Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

jodit-vue

Package Overview
Dependencies
Maintainers
1
Versions
22
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

jodit-vue

Vue wrapper for Jodit Editor

  • 3.1.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
2.2K
increased by3.62%
Maintainers
1
Weekly downloads
 
Created
Source

Jodit Vue

Vue Wrapper for the Jodit Editor

Version Downloads License

How to use

Use version 2.* for Vue 2

Use version 3.* for Vue 3

Install Jodit Vue:

npm install jodit-vue --save
// or with Yarn
yarn add jodit-vue

Import and use it

Since this component is just a wrapper, you need to include the css of the Jodit Editor on your app for it to work properly, if you're using vue-cli to create your app, or another build system you can import it directly or add a link tag with the css file provided by the Jodit Editor package.

import 'jodit/build/jodit.min.css'
import Vue from 'vue'
import JoditVue from 'jodit-vue'

Vue.use(JoditVue)

Instead of using Vue.use(JoditVue) you can use the component locally

<template>
    <div id="app">
        <jodit-editor v-model="content" />
    </div>
</template>

<script>
import 'jodit/build/jodit.min.css'
import { JoditEditor } from 'jodit-vue'

export default {
    name: 'app',

    components: { JoditEditor },

    data () {
        return {
            content: '<h1>Hello Jodit Vue</h1>'
        }
    }
}
</script>

You can check and test it on Codesanbox too.

Using without a build system

If you don't use a build system on your app, you can also use Jodit Vue without problems, check and test it on this JsFiddle.

Component Properties

If you pass only the v-model for the component, it will load all the editor features, if you want to customize it, you can do it with its properties that are listed below, but all of them are not required, just if you want to customize your editor that you will need them:

PropertyTypeDefault ValueDescription
buttonsArraynullThe buttons that you want to show on toolbar, if this is not provided, all the buttons will be shown
extraButtonsArraynullIf you need to create and display custom buttons you can pass an array with your custom buttons to this property
configObject{}The config object that has all the other configurations for the editor
pluginsArray[]If you need to create custom plugins you can pass array of plugins to this property
Buttons property

When providing the buttons to show on the editor you will need to provide an array with the buttons that you want to show. The button names can be found here. You can also pass a | to put a divider between the buttons.

<template>
    <div id="app">
        <jodit-editor v-model="content" :buttons="buttons" />
    </div>
</template>

<script>
import 'jodit/build/jodit.min.css'
import { JoditEditor } from 'jodit-vue'

export default {
    name: 'app',

    components: { JoditEditor },

    data () {
        return {
            content: '<h1>Hello Jodit Vue</h1>',
            buttons: ['source', 'image', '|', 'bold', 'underline', 'italic']
        }
    }
}
</script>
Extra Buttons property

If you need to create custom buttons to the editor, you can create them and provide the component with an array

<template>
    <div id="app">
        <jodit-editor v-model="content" :buttons="buttons" :extra-buttons="customButtons" />
    </div>
</template>

<script>
import 'jodit/build/jodit.min.css'
import { JoditEditor } from 'jodit-vue'

export default {
    name: 'app',

    components: { JoditEditor },

    data () {
        return {
            content: '<h1>Hello Jodit Vue</h1>',
            buttons: ['source', 'image', '|', 'bold', 'underline', 'italic'],
            customButtons: [
                {
                    name: 'insertDate',
                    iconURL: 'http://xdsoft.net/jodit/logo.png',
                    exec: function (editor) {
                        editor.selection.insertHTML((new Date).toDateString());
                    }
                }
            ]
        }
    }
}
</script>

To create custom buttons, check the Jodit Editor Docs

Config property

This config allows you to pass all the other configurations found here to customize your editor

Plugins property

Plugins property allows you to pass array of plugin objects with name and callback which will be initialized when Jodit is initialized. Plugins are initialized globally and it will added to all instances of Jodit editor. For example:

<template>
    <div id="app">
        <jodit-editor v-model="content" :plugins="plugins" />
    </div>
</template>

<script>
import 'jodit/build/jodit.min.css'
import { JoditEditor } from 'jodit-vue'

export default {
    name: 'app',

    components: { JoditEditor },

    data () {
        return {
            content: '<h1>Hello Jodit Vue</h1>',
            plugins: [
              {
                name: 'example',
                callback: function (editor) {
                  editor.events.on('afterInit', function () {
                    console.warn('Example plugin has beed initialized, check Jodit documentation for more details.')
                  })
                }
              }
            ]
        }
    }
}
</script>

To add plugins Jodit Vue uses Jodit.plugins.add API. Check Jodit documentation and examples how to implement plugins.

Credits ✨

Keywords

FAQs

Package last updated on 22 Aug 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc