slab
Duplicated ql-picker element when create Quill with toolbar dom container.
Quill：v2.0.0-beta.1
<div ref="toolbarRef">
<div class="ql-formats">
<select class="ql-color">
<option selected="selected"></option>
<option value="#e60000"></option>
<option value="#ff9900"></option>
</select>
<select class="ql-background">
<option selected="selected"></option>
<option value="#e60000"></option>
<option value="#ff9900"></option>
</select>
</div>
</div>
let toolbarRef = ref()
quill = new Quill(editorRef.value, {
modules: {
toolbar: {
container: toolbarRef.value,
handlers: {date: insertDate}
}
},
theme: 'snow',
})
Result：
<span class="ql-color ql-picker ql-color-picker">***</span>
<span class="ql-color ql-picker ql-color-picker" style="display: none;">***</span>
<select class="ql-color" style="display: none;">***</select>
Bug description： In some cases, generated dublicated element of ql-picker, and the first didn't trigger dropdown event, but the second(display:none) can trigger dropdown event.
What is expected： Remove duplicated ql-picker and let the first el-picker trigger dropdown event.
我在 v2.0.2 中遇到了同样的问题
在 vue 中，我添加了 key attr 来修复它
i have the same problem in v2.0.2
in vue , i add key attr to fix it
Hi! Can you provide more details about the issue you’re encountering and share the current code or configuration?
in vue3
<div id="editor-toolbar">
<!-- Add font size dropdown -->
<select class="ql-size" key="ql-size">
<option value="small"></option>
<!-- Note a missing, thus falsy value, is used to reset to default -->
<option selected></option>
<option value="large"></option>
<option value="huge"></option>
</select>
<!-- Add a bold button -->
<button class="ql-bold"></button>
<select id="ql-table-picker" key="ql-table-picker">
<option value="2" selected>2 x 2</option>
<option value="3"> 3 x 3</option>
<option value="4">4 x 4</option>
</select>
</div>
我在 v2.0.2 中遇到了同样的问题
在 vue 中，我添加了 key attr 来修复它
i have the same problem in v2.0.2
in vue , i add key attr to fix it
Hi! Can you provide more details about the issue you’re encountering and share the current code or configuration?你好！您能否提供有关您遇到的问题的更多详细信息并分享当前的代码或配置？
in
vue3<div id="editor-toolbar"> <!-- Add font size dropdown --> <select class="ql-size" key="ql-size"> <option value="small"></option> <!-- Note a missing, thus falsy value, is used to reset to default --> <option selected></option> <option value="large"></option> <option value="huge"></option> </select> <!-- Add a bold button --> <button class="ql-bold"></button> <select id="ql-table-picker" key="ql-table-picker"> <option value="2" selected>2 x 2</option> <option value="3"> 3 x 3</option> <option value="4">4 x 4</option> </select> </div>
<button class="ql-bold" title="加粗"></button>
<select key="ql-color" class="ql-color" title="字体颜色"></select>
<button class="ql-list" value="ordered" title="编号列表"></button>
<button class="ql-list" value="bullet" title="项目列表"></button>
<button class="ql-script" value="sub" title="下角标"></button>
<button class="ql-script" value="super" title="上角标"></button>
<select class="ql-size" title="字体大小">
<option v-for="size in sizes" :key="size" :value="size">
{{ size }}
</option>
</select>