ux icon indicating copy to clipboard operation
ux copied to clipboard

Integration of a WYSIWYG editor

Open stollr opened this issue 4 years ago • 20 comments
trafficstars

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

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

stollr avatar Dec 03 '20 11:12 stollr

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

guillaumesmo avatar Dec 03 '20 11:12 guillaumesmo

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

disjfa avatar Dec 04 '20 11:12 disjfa

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

tgalopin avatar Dec 04 '20 13:12 tgalopin

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

sebaherrera avatar Dec 12 '20 23:12 sebaherrera

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.

tgalopin avatar Dec 13 '20 02:12 tgalopin

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

excitedbox avatar Mar 14 '21 01:03 excitedbox

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?

kasali avatar Sep 09 '23 11:09 kasali

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 avatar Dec 20 '23 17:12 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.

Jesmaster avatar Jan 31 '24 17:01 Jesmaster

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
    ...

radiz13 avatar Feb 08 '24 16:02 radiz13

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

jrushlow avatar Feb 08 '24 18:02 jrushlow