Using summernote with vue js 2
I want to use summernote in my vue js 2 spa, and because not all of my page uses summernote, so I am making summernote a component by adding
export default {
editor_function(){
//summernote function in summernote.min.js
}
}
and then I just import it into a .vue file that needs summernote and an editor_function
on call mounted()
, but I got an error unknown codemirror
when npm compiles my vue project into one app.js.
so i only included summernote.min.js in my index.html and that means it will be loaded before running vue js spa (which is not very ideal as only some pages need this plugin but i need it to work)
after which it works, but now I have no idea how to get the output from summernote in vuejs, I add v- model
in textarea
like this
<textarea class="summernote" v-model="content"></textarea>
I also tried to make user input like this but didn't work
<textarea class="summernote"
:value="content"
@input="content = $event.target.value"></textarea>
but it's just not tied to my V-shaped content and that means when I post the output from summernote / content it will be empty ...
so how to make summernote work with vue js 2? I found some package for summernote and vue js, but it only works with old version of vue js (v.1 maybe?) And is not compatible with vue js 2.
source to share
I answered here as the comments don't represent the code very well.
<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 summernote module this way.
I have looked at the source code. It's pretty simple and short as it is just a wrapper around summernote.
Update
I forked the project and changed the code to make it easier to set up summernote config and plugins. Using this version , you can pass your config as an object prop. You can also add a plugin by importing it into the html tag script
.
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 would like you to understand my idea. You can also view the forked string project for more information.
source to share