Jump to content
Jens Martsch - dotnetic

Integrate CKEditor 5 into ProcessWire

Recommended Posts

Very refined. It would make for a nice experience with front-end editing too. Would love to see this implemented very soon.

Share this post


Link to post
Share on other sites
Quote

Would love to see this implemented very soon.

The question raises for who ? For the developer ? For the website owner/administrator ? For both ?

As a website developer you only need to dump the automatic <p> tag generation and add some extra tags and attributes in the body field like div, span, id, and bring them under your external style sheet. With that you have your CKEditor body field text full style controlled.

I have never met a website owner/admin/end-user who needed more than font-size, color, background-color and inserting images.

Therefore I think it would be even better to use a stripped down version of the CKEditor.
It would make the use of CKEditor in Processwire also more safe.

 

Share this post


Link to post
Share on other sites

Last few days I am playing with CKE5 inside PW, and here are my first impressions with it.
First, what is important to say - CKE5 is totally different product compared to CKE4, but that mostly from development perspective.
V5 use different data model, MVC architecture, and for any kind of customization (development) be prepared to use Node.js with dozens of packages.

By default, CKE5 has explicit and strict HTML API and right now, as example, you can't set "target" attribute on link (!) and here and here are answers how that can be done. Also, the same goes if you need to place "data" attribute to some DOM element. "View Source" button (option) will never again by default be part of CKEditor and here you can find the answers for that task.

Development of my first CKE5 plugin was not a nice experience, as example I build "ViewSource" plugin, but after a while realized that, in this very stricted data model, it is useless. To get some advanced options (eg. insert "target="_blank") need to develope and additional plugins (npm packages).

On the other side, this new API provide options to works with content on different ways and maybe that is the best part of new CKE5 editor. As example, in theory, we can store in JSON but with single click that content can be converted to some Markdown or HTML and vice versa. Or maybe we can get option to store content in 1 cell but "descriptions" in other etc...

Regards.

  • Like 10

Share this post


Link to post
Share on other sites

Thanks for your short summary, it has opened my eyes... No source code editing? No target on a link? Are they serious?

5 hours ago, OLSA said:

for any kind of customization (development) be prepared to use Node.js with dozens of packages.

I think this Node.js craziness is sucking the fun out of web development. Sometimes a little bit of hacking here and there can solve something just right and the job is done. Why is this movement of over-engineering anything we can? When fiddling with the tool takes more time than doing actual development, then things are getting no longer enjoyable.

And on top of all these, they remove features I rely on. I certainly do not need CKEditor 5 if things are going in this direction 😞

  • Like 1

Share this post


Link to post
Share on other sites
9 hours ago, szabesz said:

I think this Node.js craziness is sucking the fun out of web development. Sometimes a little bit of hacking here and there can solve something just right and the job is done. Why is this movement of over-engineering anything we can?

Having a compile step in software does allow for optimizations in the deployed endproduct, which just wouldn't be possible without it. To run that compile step for javascript one simply needs node, because e.g. a browsers runtime is even harder to get hold of. CKEditor is by it's functionality already tending to be a big package and it really needs to optimize every inch in it's package to save on download times and other performance critical parts of itself. That's the nature of anything you ship directly to the browser of your users. Part of that is modularizing code, so every bit of unused code can just be excluded from the shipped build.

The downside of compile steps is that you often cannot directly hack on the end product anymore or it's way harder to do so. But would you rather have a hackable product, which performs worse for your endusers because of missing optimizations or a product, which requires you to setup a build environment, but builds a optimized package, which is not hurting your user's perceived performance. 

This is not to say node is super great. It does what I described above in a often super (and maybe unnecessary) complex way, but I wanted to give a bit of argumentation on why we see that trend.

  • Like 6

Share this post


Link to post
Share on other sites

@OLSA Thanks for your insights.

After reading many github comments and parts of the documentation and also trying out different things, I want to summarize some conclusions:

CKEditor is not an HTML editor. It is a content editor and HTML is just one of the possible outputs. (From the lead developer) 
CKEditor 4 uses the DOM as a model. When loading data, the HTML is processed (read – filtered, normalized and escaped) but it ends up in the DOM anyway.
CKEditor 5 has a custom data model. When you load HTML into the editor, it's parsed and then features (initialized previously in the editor) try to pick up from this HTML the pieces they understand. This is called "conversion". As a result of a conversion, the content is being loaded into the custom data structure. The reverse process is executed when content needs to be rendered back to the DOM (either for editing or for data retrieval).
Read the complete comment here https://github.com/ckeditor/ckeditor5/issues/592#issuecomment-335108129

There is no no "View source" button to edit the HTML output directly, because you are not working with HTML, but a custom data model instead.

There is no option to insert custom tags or javascripts in the content. Or we have to use placeholders and replace them. Or someone writes plugins for them.

Custom attributes like data-something on elements are not implemented atm but you could write a plugin to extend this feature.

CKEditor 5 is not meant as a replacement or upgrade of CKeditor 4. There may be content loss if you try to use existing content produced by CKE4 in CKE5. Read https://github.com/ckeditor/ckeditor5/issues/592#issuecomment-399361490

Table Plugin is very basic. No option to add a class to the table or specific rows/cells 😞

No target attribute on hyperlinks, like OLSA said.

You can not add classes to elements like paragraphs, or words, etc. You could develop a plugin for this, but this has to be done for every element as far as I understood. 

My conclusion is, that CKeditor 5 may not be the best option for most of us. I will close the feature-request on github with a reference to this comment.

  • Like 4
  • Thanks 1

Share this post


Link to post
Share on other sites
34 minutes ago, jmartsch said:

CKEditor is not an HTML editor. It is a content editor and HTML is just one of the possible outputs.

This might be interesting in combination with e.g. a matrix field though. Have the nice UI of a "text-editor", but the (often not negative) restrictions of properly managed content types. I'm not sure how those plugins for content-types are managed, but if it's at runtime it could talk to processwire for that.

  • Like 2

Share this post


Link to post
Share on other sites

Very interesting topic. I surely can relate to the thing that the new CKEditor 5 seems weird for those used to work mostly with html and DOM (like myself). But I can see that it is very much in line with content editing principles @ryan initially put in ProcessWire. By default we can't put too much raw html and especially js in CKEditor fields. This stuff all gets striped out if you do not take time to configure otherwise (and this configuration is not that easy if not just simply turning everything off). So it might be CKEditor 5 is the best choice for content editing as defined by PW by default. And it can be configured even easier (by those who know how to).

The main problem I can see is that there may be lack of developer's experience to get it all right for PW, as most of us here seem not to be easy with modern js development workflow.

  • Like 1

Share this post


Link to post
Share on other sites
4 hours ago, jmartsch said:

My conclusion is, that CKeditor 5 may not be the best option for most of us.

I'm wondering if it's time we considered other editors? Maybe this though is premature...

  • Like 3

Share this post


Link to post
Share on other sites

I would LOVE to see something like Gutenberg inside of PW. I think I remember there was a post about integrating it somewhere here in the forums.  A drag 'n drop "Page Builder" or "Content Builder" was often requested here and most solutions that excist at the moment (including Repeater Matrix), are suboptimal in my eyes, but they get the job done, which is fine.  I also love the editor from Dropbox Paper. A solution like this could be a huge step forward for ProcessWire.

I think the approach of building Content/Structure instead of HTML (like CKEditor 5 does) is a good one, and it would eliminate many errors that are being made by users that have too much options in content editor fields (CKEditor, TinyMCE). But now CKE5 it is too restrictive, because many options mentioned before are missing.

If we are using a content builder and the content would be stored not as HTML but in a structured array like bard does it,

image.png.ed9ece1ca20bc599983df6bd35f6656d.png

we would have a convenient way to edit and add content and still can control how the content is displayed on the frontend.

  • Like 2

Share this post


Link to post
Share on other sites

Looks like a nice alternative to CKEditor 4 : https://xdsoft.net/jodit/play.html

If you play with the on/off switches you get he appropriate code to initialize the editor that way, eg:

var editor = new Jodit("#editor", {
 "uploader": {
 "insertImageAsBase64URI": true
 },
 "language": "hu",
 "enter": "BR",
 "defaultMode": "1"
});

This is a very easy was to customize compared to the convoluted CKEditor 4 configuration.

Also, code level customization is possible: https://xdsoft.net/jodit/examples/plugin/custom_plugin.html

At first sight, writing modules is good for adding custom content building capabilities: https://xdsoft.net/jodit/examples/plugin/custom_plugin.html Note that the running example at the bottom of this page has a missing icon, so you need to click on the "empty" space next to the I icon in order to add a 100x100 pixel dummy image.

I can imagine that it would be useful to be able to write all sorts of predefined HTML snippet blocks with some Lorem Ipsum text which can be inserted by the user and afterwards the user can edit the Lorem Ipsum without the need to style it as it is already styled. Well, this way of creating new content is not a visual page builder feature but a dead simple way to aid the user in producing nice looking content with generated CSS classes to style things properly on the frontend.

I wonder how styling inside the editor is possible though, I cannot find too much about that, maybe this is the way to do it: https://xdsoft.net/jodit/examples/theme/dark.html However, I am missing the "Styles" dropdown, so I cannot see how that can be achieved. Maybe by writing custom modules?

BTW, among other features it seems to support image uploading: https://xdsoft.net/jodit/doc/methods/

  • Like 1

Share this post


Link to post
Share on other sites

@szabesz I don't see any advantages of using or integrating Jodit. If you take it as an alternative you have to develop some plugins for images and links first, as they have to be modified to work together with ProcessWire (think links to existing pages in PW) or inserting images from an image field.

It is also possible with CKE4 to insert HTML snippets/templates.

Share this post


Link to post
Share on other sites
4 minutes ago, jmartsch said:

I don't see any advantages of using or integrating Jodit.

I do not see any advantages either besides that it might be quite possible that CKEditor 4.x will not be supported in the future, while an alternative like Jodit might be.

Share this post


Link to post
Share on other sites

@szabesz I understand your point, but think we don't have to worry about this. Because CKE4

  • Like 1

Share this post


Link to post
Share on other sites

I see. That's good to know. There is then time to figure out where to go from here.

  • Like 1

Share this post


Link to post
Share on other sites
2 hours ago, szabesz said:

Looks like a nice alternative to CKEditor 4 

Maybe I missed it, but Jodit does not seem to be free?

Share this post


Link to post
Share on other sites
1 hour ago, szabesz said:

Licensed under GNU General Public License v2.0 or later:

What I saw was this. But that is for paid support I realise.

Edited by kongondo
  • Like 1

Share this post


Link to post
Share on other sites

Yeah, that looks misleading at first sight, however it reads : Buy Jodit Support

In the case Ryan would not need technical support -  which I presume 🙂 – it looks like a free alternative. Besides, since currently Jodit is a one man show, the developer might welcome serious contribution, see:

"This project is maintained by a community of developers. Contributions are welcome and appreciated."

Note that I'm still speaking theoretically, just brainstorming and not trying to convince anyone, including myself 😉 

Edited by szabesz
typo
  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...