quill-markdown-module

Quill Markdown Shortcuts for vue-quill-editor

This is a fork of Patrick Lee’s excellent Markdown Shortcuts module for Quill.js that converts markdown on the fly to formatted rich text. The fork is optimised to work out of the box with Vue.js, vue-quill-editor, and Nuxt.

I had to alter Patrick’s original code as I kept getting “Quill is undefined” errors in my app when trying to use it with my above-mentioned setup. I was able to work around them by importing the classes directly and, within those, importing Quill, and exporting the main class via an ES6 module export. (That basically sums up the difference. Apart from that I’ve stripped everything that’s not explicitly necessary, including the Webpack config, etc.)

For general purpose use, and for the canonical location for the original module and related materials, please see Markdown Shortcuts.

Using with vue-quill-editor in Nuxt

1. npm i vue-quill-editor github:aral/quill-markdown-shortcuts-for-vue-quill-editor

2. In the plugins directory of your Nuxt app, create a vue-quill-editor.js file and add the following code to it:

    /* Client-side Quill Editor plugin with Markdown Shortcuts */
    import Vue from 'vue'
    
    import Quill from 'quill'
    import VueQuillEditor from 'vue-quill-editor'
    
    import 'quill/dist/quill.core.css'
    import 'quill/dist/quill.snow.css'
    import 'quill/dist/quill.bubble.css'
    
    import MarkdownShortcuts from 'quill-markdown-shortcuts-for-vue-quill-editor'
    Quill.register('modules/markdownShortcuts', MarkdownShortcuts)
    
    Vue.use(VueQuillEditor)

3. In your Nuxt configuration, make sure to disable SSR for vue-quill-editor:

   module.exports = {
     plugins: [
       { src: '~plugins/vue-quill-editor', ssr: false }
     ]
   }

4. In your page (e.g., index.vue under your pages directory), instantiate the Quill component and specify the Markdown Shortcuts. Example:

   <template>
     <section>
       <quill-editor
         v-model='editorContent'
         ref='textEditor'
         :options='editorOption'
       >
       </quill-editor>
     </section>
   </template>
    
   <script>
     export default {
       data () {
         return {
           editorContent: '',
           editorOption: {
             placeholder: 'What’s on your mind?',
             theme: 'snow',
             modules: {
               markdownShortcuts: {},
               toolbar: [
                 [{ header: [1, 2, false] }],
                 ['image', 'blockquote']
               ]
             }
           }
         }
       }
     }
   </script> 

Contributing

Unless they specifically concern this fork and the integration with Vue, Nuxt, and vue-quill-editor, please contribute directly to Patrick’s original package. I’ll be updating this package with any improvements made upstream.

Otherwise, issues and pull requests specifically concerning this fork are always welcome.