Question

在将vue2-editor（基于羽毛笔）与Highlight.js连接时遇到麻烦

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

语法模块需要highlight.js。请在“羽毛笔”之前的页面上包括图书馆。

如果它有任何改变，我正在使用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。怎么了？

Answer 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' import 'highlight.js/styles/monokai-sublime.css'似乎是一种更受欢迎和令人愉悦的风格。您也可以添加

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

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

尽管我仍然没有弄清楚如何更改背景颜色。它在其他地方显示为白色，在主轴窗口中显示为黑色背景。

Answer 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
    }
  }
}

注入Highlight.js以与vue2-editor一起使用（Quill）

2 个答案: