Package Exports

jodit-vue3

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (jodit-vue3) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Jodit Vue 3 Editor

A Jodit WYSIWYG editor wrapper for vue3

Installation

Install with npm

  npm install jodit-vue3

Or With yarn

  yarn add jodit-vue3

Import and use

This is just a wrapper, so you will have to include the stylesheet for Jodit in your app for it to work properly

Import globally

//main.js
import 'jodit/build/jodit.min.css'
import { createApp } from 'vue';
import JoditEditor from 'jodit-vue3'

const app = createApp(App);
app.use(JoditEditor);

Import Localy

<script>
import {JoditEditor} from 'jodit-vue3';
export default {
  components: {
    JoditEditor
  },
  ...
}
</script>

and use

//app.vue
<template>
  <jodit-editor v-model="content"></jodit-editor>
</template>

Properties

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-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>

Author

@dilantsasi

jodit-vue3