Question

173

using summernote with vue.js 2

rated 0 times [ 178] [ 5] / answers: 1 / hits: 15224 / 7 Years ago, fri, august 25, 2017, 12:00:00

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 {

    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 compile 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 compatible with vue js 2.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

emmaleet

Add To Favorites

Follow

Total Points: 203

Total Questions: 107

Total Answers: 98

Location: Cook Islands

Member since Thu, May 21, 2020

4 Years ago

answered 7 Years ago sandra · Accepted Answer

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.