版权属于:
我爱源代码|5iydm
本文链接:
https://www.5iydm.com/archives/how-to-quilljs-highlight.html (转载时请注明本文出处及文章链接)
作品采用:
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");//用于修改重新编辑内容
我爱源代码|5iydm
https://www.5iydm.com/archives/how-to-quilljs-highlight.html (转载时请注明本文出处及文章链接)
评论 (0)