Comments (13)
Maybe a version incompatibility issue? The latest ckeditor5-custom-element
plugin release (v6) is compatible only with ckeditor5 v18.
from ckeditor5-custom-element.
wow thanks a lot for the ultra fast reply! i'll give a shot right now
from ckeditor5-custom-element.
nope, it doesn't work :/
i've update al my dependency in my package.json
"@ckeditor/ckeditor5-basic-styles": "^18.0.0", "@ckeditor/ckeditor5-dev-utils": "^13.0.0", "@ckeditor/ckeditor5-dev-webpack-plugin": "^9.0.0", "@ckeditor/ckeditor5-editor-balloon": "^18.0.0", "@ckeditor/ckeditor5-editor-classic": "^18.0.0", "@ckeditor/ckeditor5-essentials": "^18.0.0", "@ckeditor/ckeditor5-link": "^18.0.0", "@ckeditor/ckeditor5-paragraph": "^18.0.0", "@ckeditor/ckeditor5-theme-lark": "^18.0.0", "@ckeditor/ckeditor5-vue": "^1.0.1",
but still when i npm i
it creates its own node_modules with the
@ck-editor5-core, @ck-editor5-engine @ck-editor5-ui @ck-editor5-utils
the same dependencies are also in my root node_modules, and i checked their version alreay.
from ckeditor5-custom-element.
F*#ing Cache, it works!
thanks alot Centaur!
from ckeditor5-custom-element.
Oh nice. Glad you 've found it.
from ckeditor5-custom-element.
on a sidenote:
when i install the lib with npm i
it still generates it's own node_module with its own core ckeditor5 libs in there.
but to avoid conflict (since i already have those libs in my root node_modules) i solved simply deleting the ckeditor5-custom-element's node_module and building the app via npm run dev
this way it will referencing my root's libs and all will work like a charm.
cheers and thanks for your work
from ckeditor5-custom-element.
That's strange. It does not occur to my installation. I use a simple script like this to install all i need.
git clone -b stable https://github.com/ckeditor/ckeditor5-build-classic.git
cd ckeditor5-build-classic
npm install
npm install --save-dev ckeditor5-custom-element
... other plugins
Perhaps something got misconfigured in your folders. It has happened to me before too. Very frustrating. I solved it by a fresh npm install in a clear folder. See the official error page you posted in your 1st post. Sometimes rm -rf node_modules && npm install
is needed (fresh install). Delete package.lock.json too.
from ckeditor5-custom-element.
i will give a shot in clearing my folders later this day :)
but i have another question (not related) i think i could ask directly here without opening a new issue:
im trying to "inject" some text into my ckeditor having some custom tags (like <ins>
or <del>
)
i've alreay defined them properly into the confing, and they are recognized both via toolbar or via v-model/:value
but here some strange behaviours with extra attributes:
if i try to pass as v-model a text having, for example, <ins class="insdiff">
int will be transformed to <ins>
deleting the extra attribute totally.
i tried then to define into the confing the class (not the best approach imho, because classes should be dynamic, but that's another topic), say attributes:{ class: 'insdiff'}
, tho see if the problem resided into the value of te attribute, but even this way the attribute will be completly removed.
im sure the confing is properly setted, because if i try to insert my custom tag via the toolbar, "ins"
will have the defined attribute i've hardcoded.
any insight on this?
from ckeditor5-custom-element.
Are you injecting the node in your html and then you load the html to ckeditor?
Or do you modify the ckeditor model directly? (a snippet would be useful in this case)
from ckeditor5-custom-element.
oh sorry! i'm making a Vue Spa with Laravel as backend.
with laravel mix (webpack) i build my compiled Js and Css.
something like that(i oversimplified for a better read):
<template>
<div>
<ckeditor
id="description"
:editor="editor"
:config="editorConfig"
v-model="editorModel"
aria-describedby="description-live-feedback"
/>
</div>
</template>
<script>
export default {
name: "Compare",
props: {
data: { default: null },
},
data () {
return {
editorModel: ''
editor: BalloonEditor,
editorConfig: {
height : 500,
placeholder: 'Inserisci qui la tua richiesta'
},
}
},
watch:{
revision: {
handler: function(newValue) {
this.editorModel = HtmlDiff.execute(this.data, newValue.value);
},
immediate: true,
deep: true
},
},
}
</script>
Ckeditor configuration resides into it's own configuration file, it is simply instanciated into this Vue Component.
for "Injecting" im referring to very the v-model which containt the editor data, it is declared as an empy value, and then populated via a watcher.
dont mind HtmlDiff, it's a lib which simply compare 2 strings ( Data
, which is passed as props, and newValue
which is getted from Vuex (omitted for readability)) and return a String.
im sure this problem resides into ckeditor itself because htmldiff return this string properly formatted (with <ins class="insdiff">
etc) , but as soon as it is passed to ckeditor it loses all the attributes.
edit: funny thing, if i then add an <ins>
via the toolbaar it will be assigned correctly ( <ins class="insdiff">
) into editorData
but still all the previous <ins>
are there without attributes
from ckeditor5-custom-element.
A guess maybe... do you inject the nodes before the editor and its plugins are loaded? The plugin makes the following schema declarations to allow the attributes in the model:
editor.model.schema.register(
tag, // the tag name defined in your config
{
allowIn: '$root',
allowAttributes: attrkeys, \\ <---- these are the attributes you define at your config
isObject: true,
isBlock: true,
}
);
Can you try to inject a node after the editor is constructed?
from ckeditor5-custom-element.
@Ragash have you solved the problem?
from ckeditor5-custom-element.
No response for a long time. Issue closed.
from ckeditor5-custom-element.
Related Issues (10)
- Adding property attributes to custom-element produces an error HOT 9
- allowedAttributes not working HOT 3
- how to check if the element is still exsist? HOT 3
- Tag attributes doesn't apply HOT 1
- Cannot resolve 'ckeditor5-custom-element' HOT 1
- elements broken after editing a second time HOT 2
- Need an update for ckeditor5 v17.0.0 HOT 1
- Support safeHtml placeholder HOT 3
- How do I provide an icon in ckeditor5-angular HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ckeditor5-custom-element.