Editor unstyled mode updates
Tuğçe Küçükoğlu
parent
2040e2e09b
commit
5455aa896b
|
|
@ -953,24 +953,10 @@ const styles = `
|
||||||
const classes = {
|
const classes = {
|
||||||
root: 'p-editor-container',
|
root: 'p-editor-container',
|
||||||
toolbar: 'p-editor-toolbar',
|
toolbar: 'p-editor-toolbar',
|
||||||
formats: 'ql-formats',
|
|
||||||
header: 'ql-header',
|
|
||||||
font: 'ql-font',
|
|
||||||
bold: 'ql-bold',
|
|
||||||
italic: 'ql-italic',
|
|
||||||
underline: 'ql-underline',
|
|
||||||
color: 'ql-color',
|
|
||||||
background: 'ql-background',
|
|
||||||
list: 'ql-list',
|
|
||||||
select: 'ql-align',
|
|
||||||
link: 'ql-link',
|
|
||||||
image: 'ql-image',
|
|
||||||
codeBlock: 'ql-code-block',
|
|
||||||
clean: 'ql-clean',
|
|
||||||
content: 'p-editor-content'
|
content: 'p-editor-content'
|
||||||
};
|
};
|
||||||
|
|
||||||
const { load: loadStyle } = useStyle(styles, { name: 'editor', manual: true });
|
const { load: loadStyle } = useStyle(styles, { name: 'editor' });
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'BaseEditor',
|
name: 'BaseEditor',
|
||||||
|
|
|
||||||
|
|
@ -2,44 +2,44 @@
|
||||||
<div :class="cx('root')" v-bind="ptm('root')" data-pc-name="editor">
|
<div :class="cx('root')" v-bind="ptm('root')" data-pc-name="editor">
|
||||||
<div ref="toolbarElement" :class="cx('toolbar')" v-bind="ptm('toolbar')">
|
<div ref="toolbarElement" :class="cx('toolbar')" v-bind="ptm('toolbar')">
|
||||||
<slot name="toolbar">
|
<slot name="toolbar">
|
||||||
<span :class="cx('formats')" v-bind="ptm('formats')">
|
<span class="ql-formats" v-bind="ptm('formats')">
|
||||||
<select :class="cx('header')" defaultValue="0" v-bind="ptm('header')">
|
<select class="ql-header" defaultValue="0" v-bind="ptm('header')">
|
||||||
<option value="1" v-bind="ptm('option')">Heading</option>
|
<option value="1" v-bind="ptm('option')">Heading</option>
|
||||||
<option value="2" v-bind="ptm('option')">Subheading</option>
|
<option value="2" v-bind="ptm('option')">Subheading</option>
|
||||||
<option value="0" v-bind="ptm('option')">Normal</option>
|
<option value="0" v-bind="ptm('option')">Normal</option>
|
||||||
</select>
|
</select>
|
||||||
<select :class="cx('font')" v-bind="ptm('font')">
|
<select class="ql-font" v-bind="ptm('font')">
|
||||||
<option v-bind="ptm('option')"></option>
|
<option v-bind="ptm('option')"></option>
|
||||||
<option value="serif" v-bind="ptm('option')"></option>
|
<option value="serif" v-bind="ptm('option')"></option>
|
||||||
<option value="monospace" v-bind="ptm('option')"></option>
|
<option value="monospace" v-bind="ptm('option')"></option>
|
||||||
</select>
|
</select>
|
||||||
</span>
|
</span>
|
||||||
<span :class="cx('formats')" v-bind="ptm('formats')">
|
<span class="ql-formats" v-bind="ptm('formats')">
|
||||||
<button :class="cx('bold')" type="button" v-bind="ptm('bold')"></button>
|
<button class="ql-bold" type="button" v-bind="ptm('bold')"></button>
|
||||||
<button :class="cx('italic')" type="button" v-bind="ptm('italic')"></button>
|
<button class="ql-italic" type="button" v-bind="ptm('italic')"></button>
|
||||||
<button :class="cx('underline')" type="button" v-bind="ptm('underline')"></button>
|
<button class="ql-underline" type="button" v-bind="ptm('underline')"></button>
|
||||||
</span>
|
</span>
|
||||||
<span :key="reRenderColorKey" :class="cx('formats')" v-bind="ptm('formats')">
|
<span :key="reRenderColorKey" class="ql-formats" v-bind="ptm('formats')">
|
||||||
<select :class="cx('color')" v-bind="ptm('color')"></select>
|
<select class="ql-color" v-bind="ptm('color')"></select>
|
||||||
<select :class="cx('background')" v-bind="ptm('background')"></select>
|
<select class="ql-background" v-bind="ptm('background')"></select>
|
||||||
</span>
|
</span>
|
||||||
<span :class="cx('formats')" v-bind="ptm('formats')">
|
<span class="ql-formats" v-bind="ptm('formats')">
|
||||||
<button :class="cx('list')" value="ordered" type="button" v-bind="ptm('list')"></button>
|
<button class="ql-list" value="ordered" type="button" v-bind="ptm('list')"></button>
|
||||||
<button :class="cx('list')" value="bullet" type="button" v-bind="ptm('list')"></button>
|
<button class="ql-list" value="bullet" type="button" v-bind="ptm('list')"></button>
|
||||||
<select :class="cx('select')" v-bind="ptm('select')">
|
<select class="ql-align" v-bind="ptm('select')">
|
||||||
<option defaultValue v-bind="ptm('option')"></option>
|
<option defaultValue v-bind="ptm('option')"></option>
|
||||||
<option value="center" v-bind="ptm('option')"></option>
|
<option value="center" v-bind="ptm('option')"></option>
|
||||||
<option value="right" v-bind="ptm('option')"></option>
|
<option value="right" v-bind="ptm('option')"></option>
|
||||||
<option value="justify" v-bind="ptm('option')"></option>
|
<option value="justify" v-bind="ptm('option')"></option>
|
||||||
</select>
|
</select>
|
||||||
</span>
|
</span>
|
||||||
<span :class="cx('formats')" v-bind="ptm('formats')">
|
<span class="ql-formats" v-bind="ptm('formats')">
|
||||||
<button :class="cx('link')" type="button" v-bind="ptm('link')"></button>
|
<button class="ql-link" type="button" v-bind="ptm('link')"></button>
|
||||||
<button :class="cx('image')" type="button" v-bind="ptm('image')"></button>
|
<button class="ql-image" type="button" v-bind="ptm('image')"></button>
|
||||||
<button :class="cx('codeBlock')" type="button" v-bind="ptm('codeBlock')"></button>
|
<button class="ql-code-block" type="button" v-bind="ptm('codeBlock')"></button>
|
||||||
</span>
|
</span>
|
||||||
<span :class="cx('formats')" v-bind="ptm('formats')">
|
<span class="ql-formats" v-bind="ptm('formats')">
|
||||||
<button :class="cx('clean')" type="button" v-bind="ptm('clean')"></button>
|
<button class="ql-clean" type="button" v-bind="ptm('clean')"></button>
|
||||||
</span>
|
</span>
|
||||||
</slot>
|
</slot>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue