Inside the Guardian’s CMS: meet Scribe, an extensible wealthy textual content editor

The crew behind the Guardian’s Living Tired virtual content control gadget talk approximately how and why they built and open sourced Scribe.

As part of the Guardian’s new digital content management system, Composer, we wished a wealthy text editor to enable our reporters to write down rich content. More than that, we wanted a wealthy text editor we may want to amplify, to offer our reporters with an fashionable interface for generating and formatting wealthy content material. Unhappy with current solutions, we constructed and open sourced Scribe, our very own rich text editor. But how and why did we build it?

Image result for wordpress plugins

ContentEditable
Our first option becomes to apply content-editable, easy assets to be had on all HTML elements that was designed to allow “internet builders to construct wealthy text editors”. You can locate the content editable attribute on any detail to make its contents editable.

The hassle with content editable is its ambiguity due to the shortage of requirements. For example, what markup is generated whilst you press ENTER proper here? Let’s observe a few examples.

<div contenteditable></div>
When the user presses ENTER to insert a brand new line, word that the browser inserts a <div> detail.

<div contenteditable>
<div><br></div>
<div><br></div>
</div>
This makes a few feel, due to the fact a brand new line may be represented in HTML the usage of a blocked detail, and that’s precisely what the <div> element is. We can’t assume this behavior, however, because it has now not been defined in a trendy — although a lot of this type of records has been reverse-engineered to a degree in which today we’ve move-browser consistency for maximum simple operations. In any case — and regardless of browser guide — the <div> element is not how we need to represent paragraphs of text in our content material. The accurate, semantic equivalent of a new line might of direction be the <p> detail — the HTML element that defines a paragraph of textual content.

Read More Article :

Another problem is that the HTML produced while copying from a web page in a browser contains plenty of inline styling and metadata that we don’t need. A common workflow for reporters right here at the Guardian is to jot down the content from their word processor of desire after which reproduction and paste it into Composer. Take a have a look at what’s on my pc’s clipboard after copying from a simple Google Doc that consists of nothing but the phrase “foo”, the use of Google Chrome:

<meta charset=’utf-8′><b style=”font-weight:normal;” id=”docs-internal-guid-a59a
3075-c16d-7804-733d-505a2d883bb9″><p dir=”ltr” style=”line-height:1.15;margin-to
p:0pt;margin-bottom:0pt;”><span style=”font-size:15px;font-family:Arial;color:#0
00000;background-color:transparent;font-weight:normal;font-style:normal;font-var
iant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;”>
foo</span></p></b><br class=”Apple-interchange-newline”>
By default, contentEditable allows any HTML to be pasted into it. It suffices to say that maximum of this HTML is junk (to us). All we really need is <p>foo</p>.

Where content-editable falls brief, we need to name on JavaScript to modify the behavior of content editable. For example, we can script the browser to “produce a brand new <p> element whilst ENTER is pressed, and location the caret inner of it.” This is most effective the start, however, as many side cases are revealed whilst you introduce formatting operations for such things as bulleted lists, costs, or inline styling (ambitious, italic, strikethrough). Alas, that is no easy mission.

Existing Solutions
There are numerous popular existing solutions, inclusive of TinyMCE, CKEditor, ZenPen, Medium.Js, Redactor, and wysihtml5. TinyMCE proved itself the maximum reliable for producing the same, semantic markup we required, that is why we, to begin with, picked it for our virtual CMS. Its reliability is unsurprising given that it’s miles the rich text editor of preference for WordPress.

The problem with all of these off-the-shelf answers is their loss of extensibility. TinyMCE, as an instance, does an amazing activity of manufacturing the right markup, but plenty of the user interface for the editor is saved privately inside the library, which made it hard to enhance the user revel in we desired. Quite quickly we had to fork the library to make these modifications, which amounted to some huge tech debt given the size of the library we were forking (30,000+ lines of code). The nature of our web app meant that now and again there can be several TinyMCE instances within the DOM straight away, which caused a few serious overall performance issues. At the opposite stop of the spectrum, greater minimalist solutions such as ZenPen or Medium.Js appear promising on the floor, but most do now not deal with any of the aforementioned issues around making sure semantic markup, sanitizing markup coming into the editor, or extensibility.