Question

正如标题所说，无论如何都要在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?
    }

由于

Answer 1

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

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>

Answer 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'

}）;

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

编辑器初始化后如何添加自定义颜色

2 个答案: