Medium-like editor for Plone (an alternative to TinyMCE)

At the moment, I'm looking for possible alternative editors for TinyMCE for Plone. I do like the talk that Timo gave at the Plone Conf 2018 about the editing experience (https://youtu.be/Xgqgd-JImHE?list=PLGN9BI-OAQkRIdWktlyb8ynaapIHTnkVu&t=841).

I personally like TinyMCE since it gives me the power to do all sort of formatting. However, for clients and other users, it seems like Medium-like editors are popular now.

I like http://yabwe.github.io/medium-editor, which looks and behave like the Medium Editor, with many plugins.

I'm thinking of integrating the Medium Editor in Plone during my weekends after this month end. Based on Timo talk, I think there's a react version of Gutenberg-like editor is under consideration for development. However, before I do any further planning and implementation, is there anyone working on something similar? At this point, I prefer to contribute than reinventing the wheel.

All editors for Plone are a disgrace, their usage is humiliating for content editor for a variety of reasons.
In particular when you deal with tables (resizing of cells) and images (resizing of images) you never get what you want to achieve - also with some default misconfigured HTML filtering settings. Another major usability fail are the widgets for choosing images and content references.

The Gutenberg editor perhaps give certain content editors a better experience. However consistency is king. Usability when it come to specific integration to Plone and Plone resources (images, contents, links) is king.

The Gutenberg editor is unlikely a good choice when you work on longer documents or if you are a professional writer (TinyMCE style editors are somehow better suited here).

So we have different audiences and there is not really one approach that fits all. That's why we integrated Smashdocs with Plone for professional content authors - again, this is not a solution for standard writers.

1 Like

Before we moved to use DraftJS we basically tried out every open source medium-editors that were available (including the two that you mention). They all look nice at the beginning, but none of them were anywhere near production ready and the extensibility story was always very limited.

I'd always encourage people to look around and try out as much editors as possible. Though, the current Volto editor is the result of a more than two years journey and evaluation from what I consider the smartest and most experienced devs (when it comes to JavaScript) that we have in the Plone community.

We did not reinvent the wheel with the Volto editor but build it on top of DraftJS, which is one of the most promising options and eco systems that we currently have in the JS world. Please see:

for more...

I watched the facebook video about DraftJS and tested the demo. I also tested the latest version of the Medium-like Editor, and I'm very iffy about DraftJS. I see where it's beneficial especially for referenceable and related content, however, structuring and feature-wise they seem like they are on par. DraftJS is cleaner than Medium-like Editor, but at the same time, I feel a richer experience with Medium-like Editor. I hope I'm not biased.

Nevertheless, I would love to test out the Volto Editor. Is there a demo URL?

I was thinking about this during Timo's presentation and to be quite honest; there's not a single solution to this issue without giving some form of Trade-off. DraftJS or Medium-like Editor may address many issues most users are frowned upon. However, what are we willing to trade-off for usability, simplicity, security, adaptivity, flexibility, superpowers, performance, elegant design and feature-rich editing experience? TinyMCE comes tonnes of features, performance optimisation and security audits, which can be disabled or toned down. However, as stated by not just Plone users, but almost everyone, TinyMCE is ugly and changes the structure of a standardised content.

Luckily for us, Plone is flexible to set a default editor and switch between editors. This means that we can integrate DraftJS, Medium-like Editor or any feasible editor while keeping TinyMCE for power-hungry users at the cost of maintaining various add-ons and decoupling TinyMCE from the heart of Plone.

By having these editors as add-ons, we will be able to:

  • allow site managers to set a default editor based on the audience.
  • having multiple editors, which a site-admin or manager can temporarily switch to if they need superpowers. For instance, TinyMCE allows you to edit the HTML of the content. However, all editors must use the same methods for rendering content
  • ease the mind of content structuring since Medium-like editor and DraftJS don't impact the style, design and structure of the rendered content as much as the annoying TinyMCE editor does.

.... ok... going to cut this short....

Other things to note:

  • buildout should provide a means to "do not install TinyMCE addon" especially when site users will be using another editor
  • a couple of weeks ago, I thought it could be a GSoC project, but I think its best that developers with experience of the problem and Plone work on these addons

@b4oshany You can use DraftJS à la Medium too, see

1 Like

Thanks @vincentfretin. However, after reviewing the capabilities and features of each editor mentioned here, my colleague and I decided to build the medium-like editor for Plone.

Instead of building your own editor with draft-js, you could try to make the Volto editor work with Plone 5.x... in the end it's also just React. :wink:

The Volto editor is based on DraftJS. Making DraftJS work in standard Plone might be a good first step as a proof-of-concept. Ripping out the Volto editor itself requires an in-depth understanding of React and DraftJS.