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 ponent by adding

export default {
    editor_function(){
     //summernote function in summernote.min.js
    }
}

and then i just import it in my .vue file that need summernote and call editor_function on mounted() function but i got error unknown codemirror when npm pile my vue project into single app.js file.

so i went into just include summernote.min.js in my index.html and thats mean it will be loaded before vue js spa is started (which is not very ideal since only some page need this plugin, but well i need this to work)

so after that it is working, but now i got no idea how to get ouput data from summernote into vuejs, i am adding v-model into textarea like this

<textarea class="summernote" v-model="content"></textarea>

i also tried to make custom input like this but not working

<textarea class="summernote" 
          :value="content"
          @input="content = $event.target.value"></textarea>

but it just not binded into my v-model content and that's mean when i post the output from summernote/content it will be empty...

so how to make summernote works with vue js 2? i found some package for summernote and vue js but it's works only with old version vue js( v.1 maybe?) and not patible with vue js 2.

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 ponent by adding

export default {
    editor_function(){
     //summernote function in summernote.min.js
    }
}

and then i just import it in my .vue file that need summernote and call editor_function on mounted() function but i got error unknown codemirror when npm pile my vue project into single app.js file.

so i went into just include summernote.min.js in my index.html and thats mean it will be loaded before vue js spa is started (which is not very ideal since only some page need this plugin, but well i need this to work)

so after that it is working, but now i got no idea how to get ouput data from summernote into vuejs, i am adding v-model into textarea like this

<textarea class="summernote" v-model="content"></textarea>

i also tried to make custom input like this but not working

<textarea class="summernote" 
          :value="content"
          @input="content = $event.target.value"></textarea>

but it just not binded into my v-model content and that's mean when i post the output from summernote/content it will be empty...

so how to make summernote works with vue js 2? i found some package for summernote and vue js but it's works only with old version vue js( v.1 maybe?) and not patible with vue js 2.

• javascript
• vuejs2
• vue-ponent
• summernote

• Have you tried this, I think it meets your requirement. – choasia Commented Aug 25, 2017 at 8:55
• oh i already look into that and its look promising but lack of guide and have no idea how to implement it in my own project – PamanBeruang Commented Aug 26, 2017 at 12:05

1 Answer 1

I answered here since ments 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   
    }
  },
  ponents: {
    '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
          ],
        }, 
    }
  },
  ponents: {
    'summernote' : require('./Summernote')
  }
}
</script>

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