Giter Club home page Giter Club logo

jodit-vue's Introduction

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:

Property Type Default Value Description
buttons Array null The buttons that you want to show on toolbar, if this is not provided, all the buttons will be shown
extraButtons Array null If you need to create and display custom buttons you can pass an array with your custom buttons to this property
config Object {} The config object that has all the other configurations for the editor
plugins Array [] 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 ✨

jodit-vue's People

Contributors

abdelaziz321 avatar chunallen avatar dependabot[bot] avatar gigafoxweb avatar leondore avatar vladimyr avatar wendelladriel avatar zcuric avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

jodit-vue's Issues

is vue 3 support?

hello i try use basic example from documantation and receive error:
image

Support for Custom Font List

Hi - thanks so much for the work on this library to make jodit work with Vue!

I am looking for a way to load a custom font list, as is shown for the jodit library [here] (https://xdsoft.net/jodit/pro/docs/how-to/add-custom-font-family.md#override-options)

I have tried the following:

<template>
  <div>
    <q-card flat dense class="bg-white">
      <jodit-editor v-model="content" :config="config" />
    </q-card>
  </div>
</template>

<script>
import 'jodit/build/jodit.min.css'
import Vue from 'vue'
import JoditVue from 'jodit-vue'
Vue.use(JoditVue)

export default {
...
  data () {
    return {
      config: {
        controls: {
          font: {
            // Redefine font.list
            list: Jodit.atom ({
              'Tahoma,Geneva,sans-serif': 'Tahoma',
              'Roboto Medium,Arial,sans-serif': 'Roboto',
              "-apple-system,BlinkMacSystemFont,'Segoe WPC','Segoe UI',HelveticaNeue-Light,Ubuntu,'Droid Sans',sans-serif":
                'OS System Font'
            })
          }
        }
      }
    }
 }

...

}
</script>

Part of the issue is with Jodit.atom - is there an equivalent for jodit-vue?

Thanks so much!!

Jodit 3.6: Word/HTML insert dialog does not open

Version Jodit 3.6.8

There are new dialogues in Jodit which try to render fullscreen modals.

Those seem to be prevented by jodit-vue.

image

image

Temporary solution

Prevent Jodit from asking and define paste-defaults.

            let joditConfig = {
                "askBeforePasteFromWord": false,
                "askBeforePasteHTML": false,
                "defaultActionOnPaste": "insert_as_html",
                "defaultActionOnPasteFromWord": "insert_as_html",
                "processPasteFromWord": true,
                "processPasteHTML": true,

Thank you for your work with jodit-vue!

How can I implement an on-change event on jodit-vue

hey, @WendellAdriel
I want a trigger event when jodit-vue is started editing, but I don't know how can I apply an on-change event on "jodit-vue" package.
I tried the following ways. but it didn't work.

<jodit-editor v-model="product_info_text_desc" :config="fire(this.element, 'change')" />
<jodit-editor v-model="product_info_text_desc" @change="startEditing"/>
<jodit-editor v-model="product_info_text_desc" v-on:change="startEditing"/>

please help.

TypeError: jodit__WEBPACK_IMPORTED_MODULE_0___default.a is not a constructor

I'm currently using [email protected]

then in my vue-editor.js

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

Vue.component('jodit-vue', JoditVue)

and I import this in my main.js file

in my BaseEditor.vue

<jodit-vue v-model="content" />

 export default {
    name: 'BaseEditor',
    data() {
      return {
        content: "Hello"
      }
    }
}

but when I check the browser console, I'm getting

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in mounted hook: "TypeError: jodit__WEBPACK_IMPORTED_MODULE_0___default.a is not a constructor"

Paste HTML not same as expected

when I copy this HTML
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">SRAM has been working on a truly radical front derailleur design; one that&#39;s incorporated into the crankset itself, rather than attached to the frame. Game-changer? <a href="https://t.co/DRvAUQOMRS">https://t.co/DRvAUQOMRS</a> <a href="https://t.co/JIyxrcYdQT">pic.twitter.com/JIyxrcYdQT</a></p>&mdash; CyclingTips (@cyclingtips) <a href="https://twitter.com/cyclingtips/status/1273111580952182785?ref_src=twsrc%5Etfw">June 17, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

then I paste that HTML using keyboard command (ctrl+v / command+v), but the result not as expected. when I see on source code mode
that HTML look like
<meta charset="utf-8"><span style="color: rgb(136, 153, 166); font-family: &quot;Helvetica Neue&quot;, sans-serif; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: center; text-indent: 0px; text-transform: none; white-space: nowrap; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(225, 232, 237); text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;">&lt;blockquote class="twitter-tweet"&gt;&lt;p lang="en" dir="ltr"&gt;SRAM has been working on a truly radical front derailleur design; one that&amp;#39;s incorporated into the crankset itself, rather than attached to the frame. Game-changer? &lt;a href="https://t.co/DRvAUQOMRS"&gt;https://t.co/DRvAUQOMRS&lt;/a&gt; &lt;a href="https://t.co/JIyxrcYdQT"&gt;pic.twitter.com/JIyxrcYdQT&lt;/a&gt;&lt;/p&gt;&amp;mdash; CyclingTips (@cyclingtips) &lt;a href="https://twitter.com/cyclingtips/status/1273111580952182785?ref_src=twsrc%5Etfw"&gt;June 17, 2020&lt;/a&gt;&lt;/blockquote&gt; &lt;script async src="https://platform.twitter.com/widgets.js" charset="utf-8"&gt;&lt;/script&gt;</span>

so in text mode I see unexpected result
Screen Shot 2020-06-17 at 17 40 20

expected result
Screen Shot 2020-06-17 at 17 42 12

why when I paste some HTML and KEEP AS HTML, this editor always wrapped the HTML by 'meta, span, etc'.
why? how to avoid 'meta meta span span' ?

Vue 3 Question

Hi - thanks so much for such an editor! It works quite well in my Vue 2 app and I am working on a Vue 3 app with the Composition API.

My basic sample that follows the documentation results in this Vue warn and no component:

Missing required prop: "value" 
  at <JoditEditor modelValue="<h1>Hello Jodit Vue</h1>" onUpdate:modelValue=fn >

Is jodit-vue setup to work with Vue 3 and the Composition API? If so, is there a little code sample I could be directed to please.

Thank you!

Lag with amount of base64 images

I'm experiencing lag, read a few seconds wait, between typing. So when you're typing a sentance, the editor stops updating a brief while and then catches up. I updated jodit-vue with not difference. I also removed anything which might influence it, but it doesn't seem to help. If I remove all base64 images, the issue isn't there.

If I look in the jodit playground and paste the content there, it is not an issue (it faster there anyhow).

It just looks like something is happening here what I don't want. I had something like this with a normal text field and tried @change="e => { this.oNewQuestion.iSortOrder = e.target.value }" (the v-model was this.oNewQuestion.iSortOrder) which helped.

What can I do here to solve this?

Destruct method

Before my issue, great job man!
But...There's no destroy method, which need, when switching textarea and wysiwyg. I create my own Jodit Vue component, and used destruct method ( this.editor.destruct() ) in beforeDestroy() Vue cycle.
I think, it's good idea to add it.

Importing Module breaks HMR updates

Hi,

I'm using vite 4 with hmr and if I add JoditVue to my app.js it stops updating the DOM, while in console the hmr update notification still informs be about updates. Think something is interfering?

Library broken after latest Jodit export update

Jodit has (mistakenly, I hope) changed the way they do the export in the latest patch version, as described in this issue. Since this library uses ^3.2.21 semver, it includes all patches for Jodit, so it's basically broken for everyone that has the version of Jodit higher than 3.2.31.

The temporary fix for this library would be locking the version to 3.2.31, until Jodit fixes their export (assuming they don't plan to keep the named export, but I don't see a reason for it, it just breaks backwards compatibility).

For anyone that finds this issue before any fixes are made, just explicitly install Jodit version 3.2.31 in your project, and this library will work as well.

Typescript typings missing

For all who uses vue with typescript it would be great if this included (or if there was a stand alone) typings file. Otherwise we get the error:
ould not find a declaration file for module 'jodit-vue'. '/home/user/projects/project_namenode_modules/jodit-vue/dist/jodit-vue.umd.js' implicitly has an 'any' type.
Try npm install @types/jodit-vue if it exists or add a new declaration (.d.ts) file contai
ning declare module 'jodit-vue';
Thanks for an otherwise great package!

Dark Mode Support

Thanks for this library. It is super helpful and quite capable. I am looking for how to get the component to know I am using it in dark mode so it can adjust the background. Is that possible?

Now, when I use the component in dark mode and it pops up a modal, it is light text on light background (have to select it to see it).

Here is an example with the text selected so you can see it.
image

Is dark mode support a new feature or do I just need to know how to tell the component to render for dark mode?

Thanks again!

Jodit Pro Support?

Hi @WendellAdriel

First, thank you for creating this wrapper. I was wondering how it works with Jodit Pro, we have purchased Jodit OEM license.

Do we need to install the following package separately?
https://www.npmjs.com/package/jodit-pro

I want to use a few pro plugins which comes with Jodit. I appreciate if you can give an example with an existing pro plugin of Jodit.
Thank you.

Clearing cell in table from popup menu actions is not working

Package.json content:
{
"name": "wysig",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.5",
"jodit-vue": "^2.3.0",
"vue": "^2.6.11"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}

cannot select text modifiers

I tried updating from jodit-vue 2.4.0 to 2.6.0 (which updates jodit from 3.8.5 to 3.20.1) and it breaks the text modifiers. You can still select text and then apply the modification by pressing the button however the modification (bold, italic etc) does not stay down when you press it i.e it does not apply to continuous typing.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.