Integration of a WYSIWYG editor

[stollr]

An WYSIWYG editor is quite often needed in a Symfony application where things has to be administrated. I had hard times to integrate tinymce (in a clean way) into a Symfony application.

First I tried to use stfalcon/tinymce-bundle but it isn't maintained anymore and I think nowadays the way of the integration is not optimal anymore. So i used Encore to achieve that. I think this was a good decision, but it was very tricky. It took some time for me to get it working (here's a small how-to that I have written down: https://github.com/stfalcon/TinymceBundle/issues/221#issuecomment-723973417).

Of course tinymce is very heavy and there are other editors, which may be enough for most of the projects. I think of

• Quill or
• Summernote
• there may be many alternatives

Would be great if at least one editor would be integrated.

[guillaumesmo]

friendsofsymfony/ckeditor-bundle works pretty well

maybe updating the flex recipe for that would be sufficient or maybe by adding a thin package to bridge it

[disjfa]

This is such a loaded question. One thing i like to as is what happens when we paste an image in the text. Also, WYSIWYG , markdown, or one of 24.000 other questions come in mind.

I also was playing with a markdown editor in a project of mine, maybe when i have more i can mangle this in a bundle and share. https://simplemde.com

[tgalopin]

Hi! Thanks for your idea, I agree we should investigate on integrating a content editor in Symfony.

My general point of view regarding the addition of packages to Symfony UX is that:

1/ We should have ideally only one core option for each library in a given category. In this case, we should choose one editor and go with it. Having an opinionated take here matters: it helps people to choose a tool, it reduces our workload and it incentivizes us to make a conscious choice about which library to rely on.

2/ We should almost always go for the most popular/mature library available in a given category. In the editors category, several of them are reaching the popularity and maturity threshold IMO, but in other categories, there are many small libraries: we should always ensure a library won't change a lot in the coming years, as it would have a big impact on our reliability.

3/ Finally, we should always try to provide a package in a way that will make Backward Compatibility feasible. That's one of the reason why the current packages rely on events and not on inheritance: they help ensure the application code using these packages won't break if they upgrade, as we provide a small public API.

Other than that, I'm very open to adding new packages to Symfony UX. We should consider how generic something can be, but in the case of editors, that's definitely something very nice we could do.

Regarding this specific idea, I also have some thoughts:

• we are going to need to think about file/image upload, so that the editor can use it
• there is a topic to discuss about XSS/sanitizing so that it's safe to use the result of the editor by default
• IMO we should aim for a usage similar to the Dropzone component: a plug-and-play replacement for the TextareaType

[sebaherrera]

Hi. Please consider https://editorjs.io/. It already has a PHP implementation, is actively developed and block-based like WordPress. Thank you.

[tgalopin]

I worked with it a bit already in the past, and unfortunately it still has some important limitations (the inability to add target=_blank on links comes to mind first but I remember there were others I noted). Not sure it's mature enough but I do like its approach indeed.

[excitedbox]

CKeditor is no longer free for commercial use and CKeditor4 is no longer supported.

Suneditor is a very powerful editor and is actively maintained. It is also easy to configure through their interactive configuration. http://suneditor.com/sample/index.html

[kasali]

friendsofsymfony/ckeditor-bundle works pretty well

maybe updating the flex recipe for that would be sufficient or maybe by adding a thin package to bridge it

Yeah but I hardly display the content! Can you help me?

[Jesmaster]

With the release of Symfony 7 there is currently no supported wysiwg editor bundle for Symfony projects.

The FOSCKEditor bundle is still using CKEditor 4 which was EoL back in June 2023 and the bundle itself seems to have been abandoned shortly after Symfony 6 support was added https://github.com/FriendsOfSymfony/FOSCKEditorBundle/issues/254

I'm currently working on a project rebuilding a Symfony 3 site to the latest version and I've been using some of the new UX components and they are working great. I was looking to see if a new wysiwyg editor integration was part of the UX initiative and found this issue. My new site rebuild is stuck on Symfony 6 until I can remove the dependency on the FOSCKeditor package so I'm highly anticipating a new official UX wysiwyg component that will be supported for many versions to come!

[Jesmaster]

The FOSCKEditor bundle recently issued a new release adding Symfony 7 support. It's still using CKEditor 4 though so adding a modern WYSIWYG editor as part of the Symfony UX initiative is still an open issue.

[radiz13]

Hi ! I've a problem with Turbo and wysiwyg editors (tried FOSCKEditor bundle & Quill). After removing cache, on first load, I've an error "Uncaught ReferenceError: CKEDITOR is not defined". The editor only loads on page refreshes. Has anyone ever encountered this issue before? Thx.

Uncaught ReferenceError: CKEDITOR is not defined
    renderElement https://***.wip/assets/vendor/@hotwired/turbo/turbo.index-810f44ef1a202a441e4866b7a4c72d11.js:21
    assignNewBody https://***.wip/assets/vendor/@hotwired/turbo/turbo.index-810f44ef1a202a441e4866b7a4c72d11.js:21
    replaceBody https://***.wip/assets/vendor/@hotwired/turbo/turbo.index-810f44ef1a202a441e4866b7a4c72d11.js:21
    ...

[jrushlow]

I've had success with ProseMirror https://prosemirror.net/ which is a cousin of CodeMirror https://codemirror.net/. Pretty modular and configurable. And it's all open source... I have not tried implementing it with anything ux || asset_map, but did have a lot of success w/ WebpackEncore

[carsonbot]

Thank you for this issue. There has not been a lot of activity here for a while. Has this been resolved?

[carsonbot]

Just a quick reminder to make a comment on this. If I don't hear anything I'll close this.

[jmsche]

@carsonbot Please leave this issue open, I think a UX component for WYSIWYG would be great.

[ikerib]

@carsonbot Please leave this issue open, I think a UX component for WYSIWYG would be great.

+1

[walterbak]

@carsonbot Please leave this issue open, I think a UX component for WYSIWYG would be great.

+1

[wkania]

In the PR people also mention:

• Lexical
• Trix
• Tiptap

Looks like too many options. Maybe we need a common interface and choice like in the Notifier services or Mailer services?

Such a choice already exists in the UX Map.

[smnandre]

Maybe we need a common interface and choice like in the Notifier services or Mailer services

This would be the best option indeed, but this would require a lot of work to create a small abstraction of an "editor" .. that different editors would implement (like Notifier or Mailer "bridges"... and indeed what was started with Maps)

And many features would be out of the scope of first versions, because they would require additional code that should not be imho in an Editor packages (ex: uploads).

In particular, data format should be taken in account as some editor use pure HTML, some other some specific intermediary syntax, some other use some JSON nodes format.. and in the server side too.

So this is really on the Form / DataTransformer / HtmlSanitizer that a lot of work should probably be done to create a secure and smooth DX... while creating way to use it in a generic way. This is for me where this potential package could really be usefull.

Because in the end, if every editor require specific code, i'm not sure a component could be very useful.. and if the PHP part is just a 1:1 mapping of the JS code i'm not sure either it brings real value to the table.

And i'm not even talking of all the differences in the HTML and/or JS code required on the front-end..

So in my mind this is a very interesting idea, but not an easy one at all.. it would require a lot of work that I personnaly cannot invest at the moment... (but i'd be glad to help / have a look / answer questions if asked to :) )

[faizanakram99]

A markdown editor would also be a good alternative imo.

There is already a markdown_to_html filter in twig/markdown-extra package, and with another opinionated php markdown package like the one from thephpleague or erusev/parsedown along with some stimulus/turbo thingy should do the trick.

[Kocal]

I would like to suggest Lexical, an extensible text editor framework from Meta (Facebook), it sounds very very pleasant to use and custom, while being enough performant.

EDIT: didn't see it was already mentioned

EDIT 2: it's much much harder than expected :D I've started to look around to https://tiptap.dev, already mentioned above, but everything is so much simple.