Внедрение highlight.js для работы с vue2-редактором (Quill) - PullRequest
Новая
       30

Внедрение highlight.js для работы с vue2-редактором (Quill)

0 голосов
/ 19 сентября 2018

У меня проблема с подключением vue2-редактора (на основе quill) к highlight.js

Независимо от того, что я делаю, я получаю сообщение об ошибке:

Требуется модуль синтаксисаhighlight.js.Пожалуйста, включите библиотеку на странице перед Quill.

Я использую nuxt, если он что-то изменит.

Я попытался добавить эту строку в начале тега script: 

import hljs from'highlightjs';

Так это выглядит так: 

<script>
import hljs from'highlightjs';

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

Мой плагин, где мне нужен vue2-редактор: 

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 в консоли в инструментах разработки в моем браузере.Что не так?

...