1、安装
npm install vue-quill-editor --save -dev // 富文本
npm install highlight.js --save -dev // 代码高亮
2、在 main.js 中引入
import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css' // import styles
import 'quill/dist/quill.snow.css' // for snow theme
import 'quill/dist/quill.bubble.css' // for bubble theme
import 'highlight.js/styles/monokai-sublime.css'; // 代码高亮样式
Vue.use(VueQuillEditor)
3、在 需要使用富文本框的组件中
// html 代码部分
<quill-editor v-model="wz.content" ref="myQuillEditor" :options="editorOption"></quill-editor>
// js
import hljs from 'highlight.js';
// data 数据部分
data(){
return{
content:'',
editorOption: {
modules: {
toolbar: [
["bold", "italic", "underline", "strike"],
["blockquote", "code-block"],
[{ header: 1 }, { header: 2 }],
[{ list: "ordered" }, { list: "bullet" }],
[{ script: "sub" }, { script: "super" }],
[{ indent: "-1" }, { indent: "+1" }],
[{ direction: "rtl" }],
[{ size: ["small", false, "large", "huge"] }],
[{ header: [1, 2, 3, 4, 5, 6, false] }],
[{ color: [] }, { background: [] }],
[{ font: [] }], [{ align: [] }],
["clean"], ["link", "image", "video"]
],
syntax: {
highlight: text => {
return hljs.highlightAuto(text).value; // 这里就是代码高亮需要配置的地方
}
}
}
}
}
}