summernote-editor-vue3

1.0.6 • Public • Published

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

  1. 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);
  1. 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

alt text

Readme

Keywords

Package Sidebar

Install

npm i summernote-editor-vue3

Weekly Downloads

62

Version

1.0.6

License

SEE LICENSE IN LICENSE

Unpacked Size

78 kB

Total Files

18

Last publish

Collaborators

  • cesar_zuniga