mirror of
https://github.com/BookStackApp/BookStack.git
synced 2026-02-16 11:19:37 +03:00
[Feature] Move from TinyMCE to Editor.js, a better inline editor. #1353
Reference in New Issue
Block a user
Delete Branch "%!s()"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Originally created by @arpadgabor on GitHub (Sep 11, 2019).
Describe the feature you'd like
While I love the way BookStack works, one of my quirks is the editor. My suggestion would be to replace TinyMCE with a more modern and beautiful editor, that offers inline editing called Editor.js.
Describe the benefits this feature would bring to BookStack users
Much better User Experience while editing pages. Something awesome that could be implemented is directly editing from the page viewing mode, which would make the whole editing process much faster and enjoyable.
This tool is based on "blocks" of
contenteditabletags, so content won't freak out so much compared to classic WYSIWYG editors.Editor.js
Edit: Reopened issue because I found a free editor that could be implemented.
@arpadgabor commented on GitHub (Sep 11, 2019):
Closed the issue because after some more inspecting, you need to buy a licence to use it. Oh well.
@ssddanbrown commented on GitHub (Sep 11, 2019):
Hi @arpadgabor,
Thanks for the suggestions.
It would probably be valuable if you could describe what you don't like about tinyMCE.
A review and potential alignment of editors is on the roadmap.
@arpadgabor commented on GitHub (Sep 11, 2019):
Thanks for the response @ssddanbrown.
I worked with TinyMCE before for a pretty large document and it was a pain in the a** when TinyMCE bugged out on me and resized images randomly or the html generated had weird spacings. Also if I wanted some custom HTML, it wouldn't save the edits.
I've also observed that inline editors are more and more popular and they are really cool and easy to use. You can check out the Ghost blog editor that uses an editor like Editor.js. It makes editing a breeze and offers a better User Experience.
I also saw that Editor.js saves the edited document in JSON instead of HTML, which could be an advantage if you want to create custom plugins, for example the ability to embed books on a page in BookStack.
Imo, the biggest advantage would be the ability to edit inline, and see how the article would look in real-time (as a designer and UX amateur, this would be an important feature for editors).
@ssddanbrown commented on GitHub (Sep 11, 2019):
@arpadgabor Okay, Thanks for the explanation.
TinyMCE also has the ability to become an inline editor so a similar kind of thing could already be achieved. That said, I'm not sure a fully-inline editor would be the best approach, Possibly some kind of hybrid.
I don't see JSON as an advantage over HTML. I think I'd prefer to store fairly standard HTML over a semi-arbitrary JSON format. The storage format has not prevented creating custom plugins so for either, TinyMCE is quite good in that regard. The image editor, code block editor and draw.io tools are all added as custom plugins.
It's good to have another perspective though. I'll keep this open but may merge it into a wider issue once it comes time to review the editors.
@abossert commented on GitHub (Nov 5, 2019):
Just my two bits worth, but I have used Codemirror in the past and found that it has a kitchen sink approach which works well for a general purpose editor. I have yet to run into anything it does not support. https://codemirror.net/
@ssddanbrown commented on GitHub (Nov 16, 2019):
Hi @abossert, Thanks for your input. I'm a big fan of codemirror, we actually already use it in a lot of areas of BookStack including the markdown editor & page code blocks.
When it comes to looking at other editors I'll be including prosemirror, a rich-text editor from the same awesome developer as codemirror, in my review.
@james-geiger commented on GitHub (Nov 19, 2019):
Based on the little I've seen so far, +1 for prosemirror. Really like the user having the ability to switch between MD and WSYISYG.
@niklasgrewe commented on GitHub (Nov 8, 2020):
I agree with @arpadgabor in many of these things. Inline editors are actually easier to use. I also had my difficulties with TinyMCE. I also find the design of Editor.js more appealing and the functions can be grasped more quickly.
I would be very happy if the editors would get some more fine-tuning in the future.
@namxam commented on GitHub (Nov 18, 2020):
I just checked editor.js as I have never heard of it before. It looks quite nice, but collaborative editing is not built in - from what i understand.
But apart from that, I don't think you need to purchase a licence to use it. Isn't it Apache? https://github.com/codex-team/editor.js/blob/next/LICENSE
@ssddanbrown commented on GitHub (May 10, 2021):
Closing this in favour of #2738