Editor unstyled mode updates

This commit is contained in:
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

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>