vue 中富文本编辑器Quill 代码高亮 highlightjs 失效

2,527 阅读1分钟

官网示例:

报错:

修改:

  syntax: {
    highlight: text => hljs.highlightAuto(text).value
  },

完整代码: npm install highlight.js --save

<template>
  <div>
    <div id="editor-container">
      <p>hsdhjshdjshdj</p>
      <p><br></p>
      <p>存储格式为delta格式上传<span class="ql-bg-yellow">getContents</span> 或者 <span class="ql-color-purple">getText</span>,</p>
      <p>可以自定义tollbar</p>
      <p>This <span class="ql-bg-green" style="font-size: 18px">demo</span> shows how to <span style="font-size: 32px">change</span> this.</p>
      <pre>function s(){}</pre>
      <p><br></p>
    </div>
  </div>
</template>
<script>
import hljs from 'highlight.js'
import Quill from 'quill';
import 'highlight.js/styles/monokai-sublime.css'

export default {
  data() {
    return {

    }
  },
  mounted() {
    const toolbarOptions = ['bold', 'code-block'];
    const quill = new Quill('#editor-container', {
      theme: 'snow',
      modules: {
        'toolbar': toolbarOptions,
        syntax: {
            highlight: text => hljs.highlightAuto(text).value
          },
      }
    });
  },
}
</script>

原因: higlight 自身不提供实时渲染,需要调用highlightAuto