A Jodit WYSIWYG editor wrapper for vue3
Install with npm
npm install jodit-ts-vue3Or With yarn
yarn add jodit-ts-vue3This is just a wrapper, so you will have to include the stylesheet for Jodit in your app for it to work properly
//main.js
import { createApp } from 'vue';
import JoditEditor from 'jodit-ts-vue3'
const app = createApp(App);
app.use(JoditEditor);<script>
import {JoditEditor} from 'jodit-ts-vue3';
export default {
components: {
JoditEditor
},
...
}
</script>//app.vue
<template>
<jodit-editor v-model="content"></jodit-editor>
</template>
| Property | Type | Required | Description |
|---|---|---|---|
| editorOptions | Object | false | the editor options for jodit editor |
for a full list of Jodit editor Options, visit https://xdsoft.net/jodit/doc/options/
##example
<template>
<jodit-editor v-model="content" :editorOptions="options"></jodit-editor>
</template>
<script>
import {JoditEditor} from 'jodit-ts-vue3';
export default {
name:'Edit',
components: {
JoditEditor
},
data(){
return{
content:"",
options:{
textIcons: false,
iframe: false,
iframeStyle: '*,.jodit_wysiwyg {color:red;}',
height: 'auto',
minHeight:400,
maxHeight:600,
defaultMode: Jodit.MODE_WYSIWYG,
imageDefaultWidth:'100%',
observer: {
timeout: 100
},
commandToHotkeys: {
'openreplacedialog': 'ctrl+p'
},
}
}
}
}
</script>