Quill 2.0.0 beta4 自动语法突出显示不起作用

Question

我通读了 quill 的语法高亮指南，但无法正常工作，因为 quill 一直抱怨 highlight.js 没有首先加载。

我在网上尝试了很多解决方案，但 none 都奏效了。我得到了一个语言选择器（在我的本地项目中，当保存为 html 并重新打开时，还会添加不必要的带有语言名称的 p 标签）。

这是一个沙盒https://codesandbox.io/s/importing-sass-in-vue-forked-skuss?file=/src/components/HelloWorld.vue

我直接在 index.html 上通过 cdn 导入了 highlight.js。

Answer 1

已更新

根据要求，要求禁用选择框并自动进行语法高亮。

自 quill 2.0.0 以来，在强制选择语言的情况下，语法高亮显示的工作方式发生了巨大变化。

为了达到目的，我们需要重写quill语法class。

class CodeSyntax extends Syntax {
  // override initListener to avoid creating selection box
  initListener() {}
  
  // overrider highlightBlot to highlight the text automatically
  highlightBlot(text, language = 'plain') {
    const container = this.quill.root.ownerDocument.createElement('div');
    container.classList.add(CodeBlock.className);
    container.innerHTML = this.options.hljs.highlightAuto(text).value;
    ...
  }
}

mounted() {
    const editorOpts = {
      modules: {
        syntax: {
          hljs // inject highlight.js to quill
        },
        toolbar: {
          container: [
            [{ header: [1, 2, 3, false] }],
            ["bold", "italic", "underline", "code-block"],
          ],
        },
      },
      theme: "snow",
    };
    editorOpts["scrollingContainer"] = this.$refs.scrollingContainer;
    
    // override the default syntax module with our own version of it
    Quill.register({ "modules/syntax": CodeSyntax }, true);
    this.editorInstance = new Quill(this.$refs.editorNode, editorOpts);
},

Codesandbox 似乎无法正确处理覆盖包 class。我上传了 the code in Github.

P.S。为了简单起见，我只是使用 css 而不是 scss。

我认为您只是缺少 highlightjs css。

https://codesandbox.io/s/importing-sass-in-vue-forked-fympz?file=/src/components/HelloWorld.vue:1717-1758

@import "highlight.js/styles/github.css";

导入并再次测试，语法应该被高亮显示。

Quill 2.0.0 beta4 自动语法突出显示不起作用

Quill 2.0.0 beta4 auto syntax highlight doesnt work

javascript

quill

vue.js