using summernote with vue.js 2

Question

i want to use summernote in my vue.js 2 spa, and because not all my page using summernote so i make summernote to be a component by adding

export default {
         


        

Answer 1

I answered here since comments are not very good at displaying code.

<template>
<div id="app">
  <summernote
    name="editor"
    :model="content"
    v-on:change="value => { content = value }"
  ></summernote>
</div>
</template>

<script>
export default {
  data() {
    return {
        content: null   
    }
  },
  components: {
    'summernote' : require('./Summernote')
  }
}
</script>

I think you can use the summernote module in this way.
I looked into the source code. It's quite simple and short since it's just a wrapper of summernote.

Update
I forked the project and changed some code to make it easier to set summernote's configuration and plugins. With this version, you can pass your configuration as an object prop. You can also add a plugin by importing it in html script tag.
See sample code below.

<template>
<div id="app">
  <summernote
    name="editor"
    :model="content"
    v-on:change="value => { content = value }"
    :config="config"
  ></summernote>
</div>
</template>

<script>
export default {
  data() {
    return {
        content: null,
        // ↓ It is what the configuration object looks like. ↓
        config: {
            height: 100,
            toolbar: [
                // [groupName, [list of button]]
                ['style', ['bold', 'italic', 'underline', 'clear']],
                ['font', ['strikethrough', 'superscript', 'subscript']],
                ['fontsize', ['fontsize']],
                ['color', ['color']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['insert', ['gxcode']], // plugin config: summernote-ext-codewrapper
          ],
        }, 
    }
  },
  components: {
    'summernote' : require('./Summernote')
  }
}
</script>

I wish you could get my idea. You can also look into the forked project for more information.