最近項(xiàng)目中接觸到了富文本框，最終選擇了quill.js逞频。這里是對(duì)一些小問題和小技巧的總結(jié)。
官方文檔地址
toolbar 工具欄定制
var toolbarOptions = [
['bold', 'italic', 'underline', 'strike'], // toggled buttons
['blockquote', 'code-block'],
[{ 'header': 1 }, { 'header': 2 }], // custom button values
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
[{ 'script': 'sub'}, { 'script': 'super' }], // superscript/subscript
[{ 'indent': '-1'}, { 'indent': '+1' }], // outdent/indent
[{ 'direction': 'rtl' }], // text direction
[{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
[{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme
[{ 'font': [] }],
[{ 'align': [] }],
['clean'] // remove formatting button
];
var quill = new Quill('#editor', {
modules: {
toolbar: toolbarOptions
},
theme: 'snow'
});
上面代碼是官方文檔中對(duì)定制工具欄的示例（最全的版本）可以根據(jù)自己的需求來增加和減少栋齿，對(duì)于工具名（上面例子中沒有的）去哪里找呢苗胀？
tips：在官網(wǎng)中，有一個(gè)完整版的工具欄瓦堵，右鍵打開檢查基协，如圖所示，就能找到你工具欄所需要定制的工具名菇用；
工具名尋找示例
自定義圖片上傳
在網(wǎng)上找了很多現(xiàn)成的解決方案都覺得沒啥用澜驮，直到看到下面這個(gè)鏈接的內(nèi)容，覺得很有益處
參考鏈接--來自知乎
1.通過addHander來監(jiān)聽image事件
let toolbar = quill.getModule('toolbar');
toolbar.addHandler('image', () => {
document.getElementById('checkImg').click();
});
2.圖片上傳成功之后的回調(diào)
handleSuc(url) {
const range = this.obj.getSelection();
if (range) {
quill.insertEmbed(range.index, 'image', url);
}
},
url是圖片的鏈接地址, 通過inserEmbed將圖片插入到富文本框中惋鸥；圖片的插入位置為上傳圖片前光標(biāo)所在位置：rang.index
獲取html格式的富文本框內(nèi)容
let content = quill.container.firstChild.innerHTML;
注意點(diǎn)： 當(dāng)文本框中沒有任何內(nèi)容的時(shí)候杂穷，
quill.container.firstChild.innerHTML默認(rèn)為<p><br></p>
