注入 highlight.js 以使用 vue2-editor (Quill)答案

【问题标题】：Injecting highlight.js to work with vue2-editor (Quill)注入 highlight.js 以使用 vue2-editor (Quill)
【发布时间】：2021-05-07 22:48:39
【问题描述】：

我在将 vue2-editor（基于 quill）与 highlight.js 连接时遇到问题

无论我做什么，我都会收到一条错误消息：

语法模块需要 highlight.js。请在 Quill 之前的页面上包含库。

如果它有任何改变，我会使用 nuxt。

我尝试在脚本标签的开头添加这一行：

import hljs from'highlightjs';

所以它看起来像：

<script>
import hljs from'highlightjs';

export default {
  middleware: 'hasPermissions',
  permissions: [ 'createPosts' ],
  ...
}
</script>

我需要 vue2-editor 的插件：

import Vue from'vue';
import VueEditor from'vue2-editor';

Vue.use(VueEditor);

我页面中的 VueEditor 组件：

<VueEditor
  class="my-4"
  v-model="content"
  :editor-options="{ modules: { syntax: true } }"
  placeholder="Post content" />

编辑：我尝试创建自己的组件，但显示相同的错误：

<template>
  <v-layout
    row
    wrap>
    <v-flex xs12>
      <div ref="editor" />
    </v-flex>
  </v-layout>
</template>

<script>
import Quill from'quill';

export default {
  data() {
    return {
      editor: null
    };
  },

  mounted() {
    window.hljs = require('highlight.js');
    this.editor = new Quill(this.$refs.editor, {
      modules: {
        toolbar: [
          [{ header: [ 1, 2, 3, 4, false ]}],
          [ 'bold', 'italic', 'underline' ]
        ],
        syntax: true
      },
      theme: 'snow',
      formats: [ 'bold', 'underline', 'header', 'italic' ]
    });

    this.editor.root.innerHTML = this.value;
  }
};
</script>

我可以在浏览器的开发工具中的控制台中成功打印 hljs。怎么了？

【问题讨论】：

我在使用带角度的羽毛笔时遇到了类似的问题。问题是 quill 总是在 highlight.js 之前被加载，或者 highlight.js 从来没有在 quill 可以访问它的范围内。最后，我最终在根 html 中加载了 highlight.js（在我的例子中是 index.html，其中注入了 angular）。您可以尝试一下，直到找到更好的解决方案。
如果我用 Quill 和 HLJS 注册自己的组件怎么办？也许我可以避免使用 vue2-editor
你安装highlightjs了吗？

标签： javascript node.js quill highlight.js

【解决方案1】：

我也为此苦苦挣扎了很长时间，this 答案对我有用！

    // highlight.js  component
import Vue from 'vue'
import Hljs from 'highlight.js'
import 'highlight.js/styles/googlecode.css'
let Highlight = {}
Highlight.install = function (Vue, options) {
  Vue.directive('highlight', function (el) {
    let blocks = el.querySelectorAll('pre code');
    blocks.forEach((block) => {
      Hljs.highlightBlock(block)
    })
  })
}
export default Highlight

// in main.js

import Highlight from 'path/to/Highlight.js'
Vue.use(Highlight)

我改了import 'highlight.js/styles/googlecode.css' toimport 'highlight.js/styles/monokai-sublime.css' 似乎是一种比较流行和讨人喜欢的风格。你也可以添加一个

hljs.configure({   // optionally configure hljs
  languages: ['javascript', 'ruby', 'python']
});

选择某些语言，但我没试过。

虽然我还没有弄清楚如何更改背景颜色。它在其他地方显示为白色，在羽毛笔窗口中显示为黑色背景。

【讨论】：

【解决方案2】：

这应该是一个更好的解决方案，对我有用。 https://github.com/surmon-china/vue-quill-editor/issues/39

其实这是因为quill内部的自闭造成的问题，解决方法如下： modules.syntax from true to 替换一个函数：

import hljs from 'highlight.js'
import 'highlight.js/styles/monokai-sublime.css'

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

【讨论】：