ckeditor 5 [enhancement]

[FrciSmrci]

Hey @artf ,

as described in the following task I made a build of the ckeditor 5 which works with GrapesJS, however some of the functionalities don't behave as expected.

The bullet points and number points are created without a problem, but the Bold, Italic and Link option aren't.

Is there any possibility you could take a look at this - for a bounty?

Have a great day.

Edit: The custom build is not necessary anymore, because the fix was inside the latest release. I'm using the @ckeditor/ckeditor5-editor-inline build version.

[artf]

Hi @FrciSmrci I can't say it's one of my priorities but you can actually evaluate opening a bounty on https://www.bountysource.com/teams/grapesjs and see if someone else can check it out.
BTW I'd prefer an integration with the original CKEditor 5 and not some fork

[FrciSmrci]

Hi @artf, thanks for the reply.

The custom build is not necessary anymore, because the fix was inside the latest release. I'm using the @ckeditor/ckeditor5-editor-inline build version.

I'll check out the BountySource and give it a try. :)

[Unsigno]

Hi all,

I was looking to hunt the bounty, but i don't know if i can be awarded if the code is a new plugin, out of the GrapesJS project. If i create a plugin to integrate CKEditor on GrapesJS will be receive the bounty correctly ?

[FrciSmrci]

@Unsigno The code should be a new plugin that can be provided in the GrapesJS like grapesjs-plugin-ckeditor, just that this plugin should support ckeditor5 (grapesjs-plugin-ckeditor5).

@gabrigcl developed a great part of the mentioned plugin already, you can get the code in this task.

As mentioned above the problem is that the bullet points and number points are created without a problem, but the Bold, Italic and Link option aren't. Let me know if you need any additional information.

I wish you a great day!

[Unsigno]

I see some conflict with the custom RTE concept and the current CKEditor implementation, old versions of CKEditor match better, maybe some advanced user can correct me if i am wrong.

If we use a custom RTE, the edited content can't be managed be the GrapesJS editor, right ?

Using a custom RTE we can expect to edit the content of an element, but CKEditor, now, needs a root element to work and it can create new elements inside (maybe not allowed in our GrapesJS config). So if we edit a <p>, CK will use it as root element and creates the text node inside another ( a new <p>, who causes issues with the bold, italic, etc ... )

Taking into account all this, and other conflicts that may arise if we want to keep the configuration of each editor (Grapes and CK) without restrictions. The only, or better, form that occurs to me to solve the issue is creating a Grapes component for CK editor, which is handled by Grapes as a single element, but its content is edited with CK and its corresponding configuration. That way we can keep the editors together, working independently.

What do you think ??

[artf]

Honestly, I didn't get exactly which are the conflicts between the new and the old version, but I think the purpose of this issue is to make the Text Component work properly with the new CKEditor. If we're not able to do so with the current component I think it won't work with a new one.

[Unsigno]

I apologize for my English, I try to learn but I still have to rely on the translator.

I found these topic talking about what I was trying to explain ckeditor/ckeditor5#762 . There some user share a solution, but still not in the official build.

Anyway, forgetting this, CKEditor5 is not prepared to work with nested windows (<iframe>) https://github.com/ckeditor/ckeditor5-editor-inline/issues/7, so there could be some issues. Thats why i suggest implement it as Grapes component or block ( not RTE ) so we can keep it in the canvas context.

I still testing with the RTE, but i can't get the "new line" (enter button) working with CKEditor, i think there is a conflict with the context and how CKEditor listen the events, but i can't find how the Grapes RTE implement this feature so maybe there is some override.

@artf you could tell me where the "new line" implemented or if you have any idea why this may happen ?

[FrciSmrci]

@Unsigno As far as you can see from the following issue the support for iframe was pushed some time ago into the master with this pull request.

[Unsigno]

@FrciSmrci I am taking a look, but i think we are pointing diferent problems. With these build, if you instanciate a CKEditor on a "h1", it adds a "p" to contain the text node ?

Anyways i loss the "keypress" event somewhere. It could be this problem caused by using the standalone files ?

[FrciSmrci]

Hi @Unsigno , I noticed the newly added <p> element, but didn't look into it more thoroughly yet.

I'm not sure I get what do you mean if it could be caused by using the standalone files?

[johnlobster]

Hi, I'm going to pick this up, but wanted to check first

I see two issues here

1. Integrate ckeditor5
2. Ability to edit links -> how to process the output from the rte

I will do (1) creating a ckeditor5 plugin for release

I think (2) requires a lot of thought

I see two use cases

1. Modifying existing text, for instance in a title
2. Creating a substantial amount of input, for instance writing a new article

For (1) it might be good to have an editor config that disallows things like lists and links

For (2), we want the full capabilities of ckeditor5 (I haven't investigated all the ckeditor5 plugins yet).

I am thinking that after the edit, we parse the html output from ckeditor 5 using the grapesjs parser and insert the resulting components into the grapesjs database(shadow dom). This will then allow the new content to be edited as any other grapesjs content. Not sure if there is a list component available, but we can match the ckeditor5 config to what is available, or add new components.

About myself, I am a chip designer (last 30 years) branching out into full stack development. I did a bootcamp recently and am familiar with web programming, github and so on. I know what a pull request is.

A friend of mine asked me to build a website for him, no problem until he said he would need to be able to edit/add content

I discovered there are about 300 cms type solutions out there, but decided the main need was for a wysiwg editor. There are a number of paid options available (like $50 per license), there's not really any budget for this website. That's why I'm interested in grapesj.

As well as looking at rte options, I would like to fix some bugs - if you have a suggestion for some issues that are a priority, please let me know.

John

[artf]

Hi @johnlobster
nice to meet you and thanks for the willing to help, here my 2 cents about your points

I am thinking that after the edit, we parse the html output from ckeditor 5 using the grapesjs parser and insert the resulting components into the grapesjs database(shadow dom). This will then allow the new content to be edited as any other grapesjs content.

I was always skeptical about this approach with custom RTE. I mean, I have no idea what a custom plugin might do to the DOM so I can't rely on them and treat elements as "any other grapesjs content". That's why I adopted this where for a custom RTE I just brutally store their inner HTML content