0

正如标题所说，是否有在初始化后添加颜色quill？我可以访问编辑器变量。

    var Colors = ['black','white];
    // ...
    var TOOLBAR_CONFIG = [
        ['bold', 'italic', 'link', { 'color': Colors }, { 'list': 'bullet' },
        { header: 1 }, { header: 2 }, 'image'
    ]];

    QuillEditor = new Quill('#'+this.props.id, {
        bounds: '.cnt',
        theme: 'bubble',
        modules: {
            toolbar: TOOLBAR_CONFIG
        }
    });
    // ...
    // Somewhere else in a action listen i would like to add a custom color, e.g:
    myhandle(){
        Colors.push('blue');
        // I tried looking at QuillEditor.getModule('toolbar'); but could not see any event?
    }

谢谢

4

2 回答 2

2

您需要销毁quill.destroy();并重新初始化 quill 编辑器。

var quill = new Quill('#editor');
quill.addModule('toolbar', { container: '#toolbar' });

$('#destroyAndInit').click(function() {
 	quill.destroy();
  $(".ql-color").append("<option value='rgb(255,0,0)'>red</option>");
	quill = new Quill('#editor');
    quill.addModule('toolbar', { container: '#toolbar' });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/react-quill/0.4.1/quill.base.css" rel="stylesheet"/>
<!-- Create the toolbar container -->
<div id="toolbar">
    <select class="ql-color">
        <option value="rgb(0, 102, 204)">blue</option>
        <option value="rgb(0,255,0)">green</option>
        <option value="rgb(0,0,0)" selected>black</option>
    </select>
</div>
<button id="destroyAndInit">Add red color</button>

<!-- Create the editor container -->
<div id="editor">
  <div>Select me to change color!</div>
  <div>Select me and choose color to change my color.</div>
  <div><br></div>
</div>
    
<!-- Include the Quill library -->
<script src="//cdn.quilljs.com/0.20.1/quill.js"></script>

于 2016-11-30T13:55:24.663 回答
2

根据官方网站，您可以在初始化编辑器时添加颜色：

var quill = new Quill('#editor-container', {
  modules: {
    toolbar: [
      [{ header: [1, 2, false] }, {color: ['red', 'blue']}],
      ['bold', 'italic', 'underline'],
      ['image', 'code-block']
  ]
},
placeholder: 'Compose an epic...',
theme: 'snow'  // or 'bubble'

});

正如您在初始化实例时所看到的，您可以将颜色作为数组传递给工具栏。

于 2016-11-30T10:54:24.497 回答