如何在編輯器初始化後添加自定義顏色

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

根據官方網站初始化編輯器時，你可以添加顏色：

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' 

}）;

正如你可以看到實例初始化時，你可以將顏色作爲數組傳遞給工具欄。

Answer 2

您需要銷燬quill.destroy();並重新初始化套管編輯器。

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

 
$('#destroyAndInit').click(function() { 
 
    \t quill.destroy(); 
 
    $(".ql-color").append("<option value='rgb(255,0,0)'>red</option>"); 
 
\t 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>