How vue-quill-editor combine with the syntax highlighter module of highlight.js

Question

How vue-quill-editor combine with the syntax highlighter module of highlight.js

goforward01 opened this issue 7 years ago · 15 comments

As the document of quill said, I add the highlight.js in my page.Well, no matter where I put the library in my html file, it always run out with the issue: Error: Syntax module requires highlight.js. Please include the library on the page before Quill., I searched a lot, but with no luck. Sorry, I know here isn't the place to ask question like that, but I really couldn't figure out how to solve this. So if anyone knows solutions about that, any suggestion will be appreciated, Thx.

surmon-china commented 7 years ago

Answer 1 · 2017-04-17T01:46:11.000Z

Can you show me your code? Mainly part of your entry file, the introduction of highlight.js part and the introduction of components of the part.

Answer 2 · 2017-04-17T01:59:57.000Z

Thanks for so rapid answer. my html file looks like:
** <link href="static/monokai-sublime.min.css" rel="stylesheet"> <script type="text/javascript" href="static/highlight.min.js"></script> **
And I used the vue-quill-editor for my SPA pro, for now the component just like the demo you give in the main page of this pro.
I put the code above in my head flag or after the body flag, neither way work. And the link of quill about the syntax highlight is: https://quilljs.com/docs/modules/syntax/.Thanks very much for your time, I'm new in Vue.js, maybe I lost something about the lifecycle of Vue component.

Answer 3 · 2017-04-17T02:02:05.000Z

Is it a vue webpack project?

Answer 4 · 2017-04-17T02:07:49.000Z

Try this code.

  // in your main.js
  import 'highlight.js'
  import 'highlight.js/styles/monokai-sublime.min.css'
  import VueQuillEditor from 'vue-quill-editor'
  // ...

or

<template>
  <quill-editor v-model="content" :options="editorOption"></quill-editor>
</template>

<script>
  import 'highlight.js/styles/monokai-sublime.min.css'
  import 'highlight.js'
  import Quill from 'quill'
  
  export default {
    // something...
  }
</script>

Answer 5 · 2017-04-17T02:21:15.000Z

It's a vue webpack project. I gave a shot about the suggestions above, well, it still report the same error as before. I'm not sure if the order of import will be loaded in run time. I would try again and make some experiments about the load order of lib file. thanks surmon-china, could you give me some advise about these~

Answer 6 · 2017-04-17T04:09:40.000Z

In fact, this is because quill internal self-closure caused by the problem, the solution is as follows: modules.syntax from true to replace a function:

editorOption: {
  modules: {
    syntax: {
      highlight: text => window.hljs.highlightAuto(text).value
      // or
      /*
      highlight(text) {
        const result = window.hljs.highlightAuto(text)
        return result.value
      }
      */
    }
  },
  theme: 'snow'
}

Other parts remain the same, highlight.js still need to be introduced before the introduction of quill.

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

Enjoy your work!

Answer 7 · 2017-04-17T04:59:36.000Z

Wow, Thanks a lot, your save me tons of time. @surmon-china

Answer 8 · 2017-12-23T13:09:03.000Z

If anyone wants to use this in NUXT:

add the CSS to your nuxt.config.js:

module.exports = {

  ...

  css: [
    'highlight.js/styles/atom-one-light.css'
  ],

  ...

}

import highlight.js in your component and add it to editorOptions like so:

import hljs from 'highlight.js'

...

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

Thanks @surmon-china for pointing out the need for a function call!

Answer 9 · 2018-12-18T07:01:50.000Z

In fact, this is because quill internal self-closure caused by the problem, the solution is as follows: modules.syntax from true to replace a function:
editorOption: {
  modules: {
    syntax: {
      highlight: text => window.hljs.highlightAuto(text).value
      // or
      /*
      highlight(text) {
        const result = window.hljs.highlightAuto(text)
        return result.value
      }
      */
    }
  },
  theme: 'snow'
}
Other parts remain the same, highlight.js still need to be introduced before the introduction of quill.
import hljs from 'highlight.js'
import 'highlight.js/styles/monokai-sublime.css'
Enjoy your work!

index.vue?0dbc:150 Uncaught TypeError: Cannot read property 'highlightAuto' of undefined

Answer 10 · 2018-12-29T08:04:45.000Z

@macnie add hightlight config, like this

...
<script>
import hljs from 'highlightjs'
hljs.configure({
  languages: ['javascript', 'python']
})
import 'highlightjs/styles/monokai-sublime.css'
import 'quill/dist/quill.snow.css'
import * as Quill from 'quill'
export default {
  data () {
    return {
      quill: null
    }
  },
  mounted () {
    this.quill = new Quill('#editor', {
      modules: {
        syntax: {
          highlight: text => hljs.highlightAuto(text).value
        },
        toolbar: '#toolbar-container'
      },
      placeholder: 'Compose an epic...',
      theme: 'snow'
    })
  },

...

Answer 11 · 2019-04-04T02:40:07.000Z

In NUXT project, highlight.js asynchronous change 'content'. In 'onEditorChange(){}' , 'this.content' repeated assignment. So dead cycle. The code and error are as follows：

[Vue warn]: You may have an infinite update loop in a component render function.

found in

---> <QuillEditor> at components/common/quillEditor.vue
       <Pages/detail/Index.vue> at pages/detail/_index.vue
         <Nuxt>
           <Layouts/default.vue> at layouts/default.vue
             <Root> commons.app.js:13282:7
    NuxtJS 7

data() {
            return {
                content: ""
                editorOption: {
                    modules: {
                        toolbar: [ ... ],
                        syntax: {
                            highlight: text => hljs.highlightAuto(text).value
                        }
                    },
                    theme:'snow'
                },
            }
        },
        methods: {
            onEditorChange({quill, html, text}) {
                this.content = html;
            },
        }
    }

Answer 12 · 2019-09-02T23:22:14.000Z

Try this code.

  // in your main.js
  import 'highlight.js'
  import 'highlight.js/styles/monokai-sublime.min.css'
  import VueQuillEditor from 'vue-quill-editor'
  // ...

or

<template>
  <quill-editor v-model="content" :options="editorOption"></quill-editor>
</template>

<script>
  import 'highlight.js/styles/monokai-sublime.min.css'
  import 'highlight.js'
  import Quill from 'quill'
  
  export default {
    // something...
  }
</script>

Hi. In the or part you are importing quill but you using quill-edior component. how this is happening? I don't understand.

Answer 13 · 2019-09-03T08:59:57.000Z

Ok. I guess i solved it finally.
I added this
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/highlight.min.js"></script>
in the index.html.

And it's done.

Answer 14 · 2021-11-18T10:15:41.000Z

In fact, this is because quill internal self-closure caused by the problem, the solution is as follows: modules.syntax from true to replace a function:
editorOption: {
  modules: {
    syntax: {
      highlight: text => window.hljs.highlightAuto(text).value
      // or
      /*
      highlight(text) {
        const result = window.hljs.highlightAuto(text)
        return result.value
      }
      */
    }
  },
  theme: 'snow'
}
Other parts remain the same, highlight.js still need to be introduced before the introduction of quill.
import hljs from 'highlight.js'
import 'highlight.js/styles/monokai-sublime.css'
Enjoy your work!

i think i may have the solution

what i need to do is to handle these message