quilljs富文本编辑器使用方法和实时代码高亮方法 quill.js_强大,丰富的文本编辑器，这篇文章主要讲最新版的quilljs怎么实时渲染代码。主要是找了百度很多文章都不对，最后发现其实很简单。如下图所示，可以输入代码后实时渲染高亮下面开始在html插入quilljs富文本编辑器引入quilljs的css、js和highlight的css、js<link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/monokai-sublime.min.css" rel="stylesheet"> <link href="https://cdn.bootcss.com/quill/1.3.7/quill.snow.min.css" rel="stylesheet"> <link href="https://cdn.bootcss.com/quill/1.3.7/quill.bubble.css" rel="stylesheet"> <link href="https://cdn.bootcss.com/quill/1.3.7/quill.core.min.css" rel="stylesheet"> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script> <script src="https://cdn.bootcss.com/quill/1.3.7/quill.core.min.js"></script> <script src="https://cdn.bootcss.com/quill/1.3.7/quill.js"></script> id为editor的div<div id="editor"></div> 设置quilljs的图标和高度还有自动保存功能、代码高亮（已注释）var toolbarOptions = [ [{ 'header': [1, 2, 3, 4, 5, 6, false] }], ['bold', 'italic', 'underline', 'strike'], // toggled buttons ['blockquote', 'link', 'image', 'code-block'], [{ 'header': 1 }, { 'header': 2 }], // custom button values [{ 'list': 'ordered'}, { 'list': 'bullet' }], [{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme [{ 'align': [] }], ['clean'] // remove formatting button ]; var quill = new Quill('#editor', { bounds: '#editor', modules: { //自动保存 history: { delay: 1000, maxStack: 100, userOnly: false }, 'syntax': true,//代码高亮 toolbar: toolbarOptions }, placeholder: '请输入内容', theme: 'snow' }); quill.container.style.height = '500px';//高度 this.quill.pasteHTML("插入html");//用于修改重新编辑内容