vue项目使用vue-quill-editor富文本加高亮效果

1.下载关联包

npm install vue-quill-editor --save -dev // 富文本
npm install highlight.js --save -dev // 代码高亮

2.引入并注册

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
/*
 * 注册 - 业务模块
 */
// 注册富文本

import { quillEditor } from 'vue-quill-editor'
import 'highlight.js/styles/xcode.css'
import hljs from 'highlight.js'
export default {
  components: { quillEditor },
}

3.使用组件并添加配置项

data () {
    return {
      editorOption: {
        placeholder: '请在这里输入',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],
            [{ list: 'ordered' }, { list: 'bullet' }], // toggled buttons
            ['blockquote', 'code-block', 'image', 'link']
          ],
          syntax: {
            highlight: text => {
              return hljs.highlightAuto(text).value // 这里就是代码高亮需要配置的地方
            }
          }
        }
      }
    }
  }

4.富文本具体配置

只需要填写功能名的
加粗 - bold；
斜体 - italic
下划线 - underline
删除线 - strike
引用- blockquote
代码块 - code-block
公式 - formula
图片 - image
视频 - video
清除字体样式- clean
这一类的引用 直接['name','name']这种格式就好了

2.需要有默认值的
标题 - header  
[{ 'header': 1 }, { 'header': 2 }] 值字体大小

列表 - list 
[{ 'list': 'ordered'}, { 'list': 'bullet' }], 值ordered，bullet

上标/下标 - script 
 [{ 'script': 'sub'}, { 'script': 'super' }],  值sub，super

缩进 - indent
[{ 'indent': '-1'}, { 'indent': '+1' }], 值-1，+1等

文本方向 - direction
[{ 'direction': 'rtl' }],    值rtl