vue3-summernote-editor
Version:
A vuejs 3 component for Summernote library
71 lines (58 loc) • 1.78 kB
Markdown
3 component for use [Summernote WYSIWYG](https://summernote.org/)
``` cmd
// npm install
npm install vue3-summernote-editor --save
```
You must be have `jQuery` at `window.$` and install summernote by yourself.
1. import as global component.
``` javascript
// import SummernoteEditor
import SummernoteEditor from 'vue3-summernote-editor';
const vueApp = createApp({});
vueApp.component('SummernoteEditor', SummernoteEditor);
```
2. import into a single component.
``` javascript
// import SummernoteEditor
import SummernoteEditor from 'vue3-summernote-editor';
<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>
```
- `options`: `option[]`
- configurable settings, see [Summernote options](https://summernote.org/deep-dive/)
- you can define a global options on a `window.SUMMERNOTE_DEFAULT_CONFIGS`
- `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"`
A VueJs