vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Editor unstyled mode updates

pull/4243/head
Tuğçe Küçükoğlu 2023-08-04 13:02:52 +03:00
parent 2040e2e09b
commit 5455aa896b
2 changed files with 21 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
components/lib/editor/BaseEditor.vue
View File

@ -953,24 +953,10 @@ const styles = `
const classes = {
root: 'p-editor-container',
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'
};
const { load: loadStyle } = useStyle(styles, { name: 'editor', manual: true });
const { load: loadStyle } = useStyle(styles, { name: 'editor' });
export default {
name: 'BaseEditor',

40
components/lib/editor/Editor.vue
View File

@ -2,44 +2,44 @@
<div :class="cx('root')" v-bind="ptm('root')" data-pc-name="editor">
<div ref="toolbarElement" :class="cx('toolbar')" v-bind="ptm('toolbar')">
<slot name="toolbar">
<span :class="cx('formats')" v-bind="ptm('formats')">
<select :class="cx('header')" defaultValue="0" v-bind="ptm('header')">
<span class="ql-formats" v-bind="ptm('formats')">
<select class="ql-header" defaultValue="0" v-bind="ptm('header')">
<option value="1" v-bind="ptm('option')">Heading</option>
<option value="2" v-bind="ptm('option')">Subheading</option>
<option value="0" v-bind="ptm('option')">Normal</option>
</select>
<select :class="cx('font')" v-bind="ptm('font')">
<select class="ql-font" v-bind="ptm('font')">
<option v-bind="ptm('option')"></option>
<option value="serif" v-bind="ptm('option')"></option>
<option value="monospace" v-bind="ptm('option')"></option>
</select>
</span>
<span :class="cx('formats')" v-bind="ptm('formats')">
<button :class="cx('bold')" type="button" v-bind="ptm('bold')"></button>
<button :class="cx('italic')" type="button" v-bind="ptm('italic')"></button>
<button :class="cx('underline')" type="button" v-bind="ptm('underline')"></button>
<span class="ql-formats" v-bind="ptm('formats')">
<button class="ql-bold" type="button" v-bind="ptm('bold')"></button>
<button class="ql-italic" type="button" v-bind="ptm('italic')"></button>
<button class="ql-underline" type="button" v-bind="ptm('underline')"></button>
</span>
<span :key="reRenderColorKey" :class="cx('formats')" v-bind="ptm('formats')">
<select :class="cx('color')" v-bind="ptm('color')"></select>
<select :class="cx('background')" v-bind="ptm('background')"></select>
<span :key="reRenderColorKey" class="ql-formats" v-bind="ptm('formats')">
<select class="ql-color" v-bind="ptm('color')"></select>
<select class="ql-background" v-bind="ptm('background')"></select>
</span>
<span :class="cx('formats')" v-bind="ptm('formats')">
<button :class="cx('list')" value="ordered" type="button" v-bind="ptm('list')"></button>
<button :class="cx('list')" value="bullet" type="button" v-bind="ptm('list')"></button>
<select :class="cx('select')" v-bind="ptm('select')">
<span class="ql-formats" v-bind="ptm('formats')">
<button class="ql-list" value="ordered" type="button" v-bind="ptm('list')"></button>
<button class="ql-list" value="bullet" type="button" v-bind="ptm('list')"></button>
<select class="ql-align" v-bind="ptm('select')">
<option defaultValue v-bind="ptm('option')"></option>
<option value="center" v-bind="ptm('option')"></option>
<option value="right" v-bind="ptm('option')"></option>
<option value="justify" v-bind="ptm('option')"></option>
</select>
</span>
<span :class="cx('formats')" v-bind="ptm('formats')">
<button :class="cx('link')" type="button" v-bind="ptm('link')"></button>
<button :class="cx('image')" type="button" v-bind="ptm('image')"></button>
<button :class="cx('codeBlock')" type="button" v-bind="ptm('codeBlock')"></button>
<span class="ql-formats" v-bind="ptm('formats')">
<button class="ql-link" type="button" v-bind="ptm('link')"></button>
<button class="ql-image" type="button" v-bind="ptm('image')"></button>
<button class="ql-code-block" type="button" v-bind="ptm('codeBlock')"></button>
</span>
<span :class="cx('formats')" v-bind="ptm('formats')">
<button :class="cx('clean')" type="button" v-bind="ptm('clean')"></button>
<span class="ql-formats" v-bind="ptm('formats')">
<button class="ql-clean" type="button" v-bind="ptm('clean')"></button>
</span>
</slot>
</div>