wendelladriel / jodit-vue Goto Github PK
View Code? Open in Web Editor NEWVue wrapper for Jodit Editor
License: MIT License
Vue wrapper for Jodit Editor
License: MIT License
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.
I'm using Jodit VUE 2.2.1 , and also have added these lines
in my config JS file.
Still when i tap on RTE from safari browser, the browser automatically zooms,
How can we prevent that.
Thankyou.
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.
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!
I am adding the spellcheck button to the toolbar but is there a way to have it turned on by default?
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?
There are new dialogues in Jodit which try to render fullscreen modals.
Those seem to be prevented by jodit-vue.
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!
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.
Fresh install got this error , not working ..
[Vue warn]: Failed to mount component: template or render function not defined.
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!!
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"
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?
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.
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.
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!
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"
]
}
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!
Example as well as library itself doesn't work well when pressing enter. Cursor navigates to top.
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.
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'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>— 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: "Helvetica Neue", 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;"><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></span>
so in text mode I see unexpected result
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' ?
Currently jodit is adding some inline-style which cause issue for CSP. Do we have anyway to solve this issue?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.