Question

我正在使用QuillJS，我需要在运行时向工具栏添加一些控件。在整个Quill初始化之后有没有办法从代码中创建它？

我现在就是这样做的。

quillEditor.getModule('toolbar').addHandler('color', (value) => {
    if (value == 'new-color') {
        value = prompt('Give me hex color baby!');

        // unfortunately this code does not work    
        let n = toolbar.querySelector('select.ql-color');
        n.innerHTML += '<option value="'+value+'"></option>';
    }

    quillEditor.format('color', value);
    console.log("Color handler", value);
});

Answer 1

看起来您只是将新选项添加到隐藏的select元素中。 UI中用于选择颜色的元素是具有类ql-picker-options的范围。

查看此代码段

var tools = [
	['bold', 'italic', 'underline', 'strike'],
  [{'color': ['red', 'blue', 'green', 'new-color']}]
]

var quillEditor = new Quill('#editor-container', {
	modules: {
  	toolbar: tools
  },
  theme: 'snow'
});

var toolbar = document.querySelector('.ql-toolbar');

quillEditor.getModule('toolbar').addHandler('color', (value) => {
    if (value == 'new-color') {
        value = prompt('Give me hex color baby!');
        
        // This element is what the user sees
        let uiSelect = toolbar.querySelector('.ql-color .ql-picker-options');
        
        // This is a hidden element
        let select = toolbar.querySelector('select.ql-color');
        
        uiSelect.innerHTML += '<span class="ql-picker-item ql-primary" data-value="'+value+'" style="background-color: '+value+';"></span>';
        select.innerHTML += '<option value="'+value+'"></option>';
    }

    quillEditor.format('color', value);
});

.ql-color .ql-picker-options [data-value=new-color] {
  background: none !important;
  width: 90px !important;
  height: 20px !important;
}
.ql-color .ql-picker-options [data-value=new-color]:before {
  content: 'New Color';
}

<script src="//cdn.quilljs.com/1.3.4/quill.min.js"></script>
<link href="//cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet"/>
<link href="//cdn.quilljs.com/1.3.4/quill.core.css" rel="stylesheet"/>
<div id="editor-container"></div>

然后使用insertBefore()，您可以在最后保留“新颜色”选项。

QuillJS Reload工具栏控件

1 个答案: