Integrating Summernote into a Vue.js 2 single-page application has been quite a challenge for me. Not all my pages require the Summernote editor, so I decided to turn it into a component by creating an export function in my Vue file.
export default {
editor_function(){
//summernote function in summernote.min.js
}
}
I thought everything was set up correctly until I encountered an error during the npm compilation process. The error message read "unknown codemirror," which left me puzzled. To resolve this issue, I ended up including the Summernote library directly in my index.html file, even though it's not the ideal solution as it loads on every page load.
With that workaround in place, the editor started working fine. However, I found myself struggling to retrieve the data entered into Summernote and bind it to Vue.js. I tried adding a v-model directive to the textarea element like this:
<textarea class="summernote" v-model="content"></textarea>
I also attempted to create a custom input setup but couldn't get it to work properly:
<textarea class="summernote"
:value="content"
@input="content = $event.target.value"></textarea>
Unfortunately, neither approach successfully bound the content to my v-model, resulting in empty output when attempting to submit the form. This issue has left me wondering how to effectively integrate Summernote with Vue.js 2. While I have come across some packages that claim to bridge the gap between Summernote and Vue.js, they are only compatible with older versions of Vue.js and not with version 2.