summernote-editor-vue3

Summernote Editor for Vue 3

A VueJs 3 component for use Summernote WYSIWYG

Install

// npm install
npm install summernote-editor-vue3 --save

You must be have jQuery at window.$ and install summernote by yourself.

Globla JQuery sample for vite

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import inject from '@rollup/plugin-inject';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    inject({
      $: [ 'jquery', '*' ],
      jQuery: 'jquery',
    }),
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})
// on main.js 
import * as jQuery from "jquery";

// define & and jQuery on the global window object
Object.assign(window, { $: jQuery, jQuery });

Use as component

• import as global component.

//import summernote lite
import "summernote/dist/summernote-lite.min";
// import css summernote lite
import "summernote/dist/summernote-lite.min.css";
//Add import for change default lang to spanish if not add this line default lang is English
import "summernote/dist/lang/summernote-es-ES.min";
import SummernoteEditor from 'summernote-editor-vue-3';
// import SummernoteEditor
import SummernoteEditor from 'summernote-editor-vue-3';


const vueApp = createApp({});
vueApp.component('SummernoteEditor', SummernoteEditor);

• import into a single component.

// import SummernoteEditor
import SummernoteEditor from 'summernote-editor-vue-3';

<template>
  <SummernoteEditor
      v-model="myValue"
      @update:modelValue="summernoteChange($event)"
      @summernoteImageLinkInsert="summernoteImageLinkInsert"
    />
</template>
<script>
export default {
    // declare SummernoteEditor
    components: {SummernoteEditor},
    data() {
        return {
            myValue: '',
        }
    },
    methods: {
       summernoteChange(newValue) {
          console.log("summernoteChange", newValue);
       },
        summernoteImageLinkInsert(...args) {
          console.log("summernoteImageLinkInsert()", args);
       },
    }
}
</script>

Config/Options

• :config: option[]
  • configurable settings, see Summernote options
  • you can define a global options on a window.SUMMERNOTE_DEFAULT_CONFIGS

Events

• @update:modelValue
  • triggered when summernote value change
• summernote bare events
  • summernote events will be triggered in camelCase
  • "summernote.change": "@summernoteChange"
  • "summernote.image.link.insert": "@summernoteImageLinkInsert"

Screen Demo