Building from Source? about ckeditor5-custom-element HOT 13 CLOSED

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.