TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Inside the Guardian’s CMS: meet Scribe, an extensible rich text editor

225 pointsby lebekabout 11 years ago

25 comments

pothiboabout 11 years ago
Let me diverge for a moment:<p>Everytime I see this, I wonder why browsers (and the W3C) don&#x27;t add more functionality to textarea.<p>ContentEditable always felt like an ugly hack for me. A rich set of API on textarea could move the web forward. Imagine building an IDE in a textarea. That should be possible.<p>&lt;&#x2F;rant&gt;<p>Great work nonetheless, very clean code and very nice documentation!
评论 #7436390 未加载
评论 #7437380 未加载
评论 #7442669 未加载
评论 #7436373 未加载
评论 #7436247 未加载
评论 #7440172 未加载
评论 #7436762 未加载
phirschybarabout 11 years ago
In my web shop, our first CMS (circa 2003) utilized a WYSIWYG editor which was a disaster. For all of the supposed benefits it brought to the editing &#x2F; writing process for our clients, the reality is that upon hitting &#x27;save&#x27;, the style&#x2F;formatting issues on the front-end were awful, having picked up junk from MS Word, or copied web pages, or massive embedded images, you name it. It threw our shop into perpetual customer-support mode as our clients struggled to get anything to look right, or consistent.<p>For our 2nd client CMS, we chucked the WYSIWYG, spent a little more time helping our clients understand Markdown (actually Textile - this took a few minutes of our and their time). There was a little squirming involved on the part of our clients, but after a day or so, they understood it. Best part, it just works. It ensures that our site renders perfect, semantically correct HTML!<p>WYSIWYG in RTEs has grown up a bit, as we can see in Guardian&#x27;s latest attempt. However, its largest flaw, from our perspective, is that it outputs HTML! HTML is just not a proper end-format. It is too difficult to reverse engineer. Markdown, on the other hand, can be rendered into many format. It can be output as HTML, raw text, truncated text, etc. So, while I applaud Guardian for releasing this, it saddens me that we&#x27;re still attempting to improve on browser-based, user-facing tools which output HTML.
eliot_sykesabout 11 years ago
I&#x27;d love to read more about the Guardian CMS that Scribe was written for and how the writers find using it. Do they like it?<p>When I&#x27;ve worked on news sites in the past, many of the journalists preferred writing in their desktop word processor of choice and cutting and pasting into the CMS as the final step before publishing.<p>The CMS was probably viewed as a necessary evil and I don&#x27;t remember there being much love for it from the people who had to spend hours in it everyday.<p>Partly this was due to the CMS not working offline and it just wasn&#x27;t as pleasant to use as the software the writers have used for years, which is understandable.
评论 #7438289 未加载
评论 #7441523 未加载
subpixelabout 11 years ago
This does look promising.<p>Markdown gets a lot of love from developers, but in my experience with clients across many industries (including journalism), it&#x27;s a non-starter. If you&#x27;re used to looking at markup in an editor, Markdown is an abstraction you can tolerate. But the average non-technical person tasked with the job of updating a blog or website sees Markdown as something like pig latin - a thing that makes communication more complicated.
评论 #7436731 未加载
aleemabout 11 years ago
This pretty much nails it and is very tricky to get right. Nearly every other contenteditable editor out there messes up the undo stack, copy-pasting and new-lines, some more than others. The extensibility feature is also a great relief.<p>However, I am curious as to their stance on Markdown and if it was ever considered.
评论 #7438305 未加载
评论 #7437465 未加载
hypertextheroabout 11 years ago
This is awesome. Copying and pasting text from Word files seems to work fairly well, instantly generating HTML with all the cruft removed.<p>To download it to your desktop and try it out locally get [these files](<a href="https://github.com/guardian/scribe/tree/gh-pages" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;guardian&#x2F;scribe&#x2F;tree&#x2F;gh-pages</a>)
评论 #7436177 未加载
danabramovabout 11 years ago
I&#x27;m so so glad.<p>Just two weeks ago I thought we&#x27;d have to implement the same thing for the same reasons: old editors were good in handling browser inconsistencies but bad in being too tightly coupled to their dated UIs, new editors sucked at generating semantic markup.<p>Thank you for making this public.
onion2kabout 11 years ago
I&#x27;m hugely impressed by some of the open source code that comes out of the Guardian offices.
Edmondabout 11 years ago
Hmmm...this may just be my favorite post on HN in a while... I have been working on a UI builder tool and have to some extent built the kind of functionality in this editor.<p>It looks, at least from first impression that you guys have done a much better job...hopefully it turns out to be the perfect solution my need..Thank you!
marknadalabout 11 years ago
I&#x27;m a tad late, but I should mention a really important library I wrote that changes HOW one writes editors - <a href="http://github.com/amark/monotype" rel="nofollow">http:&#x2F;&#x2F;github.com&#x2F;amark&#x2F;monotype</a> . Save your caret, do whatever transformation you want directly with HTML manipulation, then you restore your caret. Done, that simple - don&#x27;t even bother trying to use the browser&#x27;s API, because yes they are wildly unreliable in their behavior. The kicker with my library is it saves your caret (your selection) based on actual content, rather than the DOM tree, so it still is able to accurately restore it even if you completely delete and replace the DOM tree.
评论 #7445048 未加载
评论 #7441399 未加载
luwesabout 11 years ago
Shamelessly promoting my text selection and range API polyfill, <a href="https://github.com/luwes/selection-polyfill" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;luwes&#x2F;selection-polyfill</a><p>Just to make clear, this would enable Scribe to work in older IE browsers.
评论 #7439357 未加载
peaabout 11 years ago
The Guardian has a great approach to tech; they&#x27;ve done some really cool stuff with Scala &#x2F; Play and released some great code.
alistairjcbrownabout 11 years ago
I&#x27;m surprised not to see Aloha editor [0] in their list of &quot;Existing Solutions&quot;.<p>[0] - <a href="http://www.aloha-editor.org/" rel="nofollow">http:&#x2F;&#x2F;www.aloha-editor.org&#x2F;</a>
评论 #7436180 未加载
dunhamabout 11 years ago
I suspect the best way to make rich text editing work across browsers is to do what the current google docs editor does: Drop contentEditable and just implement your own editor in javascript. Read key and mouse events and manipulate the DOM.<p>It&#x27;s a bit more work up front, but possibly less work than trying to get four different implementations of contentEditable to behave the way you want. And this way you own the editing logic.
评论 #7442842 未加载
cantbecoolabout 11 years ago
Does anyone else notice how ridiculously bloated theguardian.com is? It seriously takes 5 seconds to completely load on my modern machine.
评论 #7437487 未加载
评论 #7436017 未加载
评论 #7436023 未加载
lewisfludeabout 11 years ago
I&#x27;m excited about using this in my next project. Love the fact they kept it simple with this one.
评论 #7436027 未加载
spartanatreyuabout 11 years ago
Anyone using angularjs should seriously consider textAngular. I&#x27;m currently using it on an enewsletter editor app and it&#x27;s pretty darn sweet.<p><a href="http://textangular.com/" rel="nofollow">http:&#x2F;&#x2F;textangular.com&#x2F;</a>
评论 #7439833 未加载
mherdegabout 11 years ago
I hope the name is in homage to Scribe, the markup language and word processor. There was a time when you might write up your thesis in Scribe (even as, in parallel, some people chose LaTeX).
GamboMamaabout 11 years ago
I am shocked how misinformed and technically misleaded a pro team like the guardian is. Saving your stories in HTML in a CMS? This is like using Joomla for hobbiest sites or something like that, it will kill your archive and it will be a pain reusing content. A good Content Management Strategy is: use libreoffice for wirting, create a plugin that publish to archive and put articles in the pipeline for redaction, save content to docbook and be prepared for any kind of reuse of that content.
评论 #7445072 未加载
etherealGabout 11 years ago
nice to see someone trying to fix contenteditable as an api, thanks for the hard work and sharing it!
paulygabout 11 years ago
This looks really nice. I can&#x27;t wait to play with it on an upcoming project. Thanks to The Guardian for open sourcing it.<p>I&#x27;m curious what support on mobile is like. I tried the demo on my Nexus 7 and it worked well for the two minutes I played. However I skimmed the browserinconsistencies.md file and did not see any specific mention of mobile browsers. Mobile is a place where most of the existing solutions fall on their face. Having good mobile could really drive adoption.
评论 #7439350 未加载
dansoabout 11 years ago
First of all, props of course to the Guardian&#x27;s team, not only for devoting resources to improvement of the CMS field, but open-sourcing it...a concept that is still mostly alien to the modern newsroom.<p>As far as I know, the solution they have here is impressive and as good as the state-of-the-art, in terms of usability and modularity...but it still can&#x27;t overcome the major quirks that come up with rich-text editors.<p>For example, I typed in the following in the demo (<a href="http://guardian.github.io/scribe/" rel="nofollow">http:&#x2F;&#x2F;guardian.github.io&#x2F;scribe&#x2F;</a>):<p>Hello, <i>world</i><p><i>Why italics?</i><p>So the error here is that <i>after</i> typing &quot;world&quot;, I switched <i>off</i> the italics and hit line break&#x2F;Enter. However, the italics-mode persisted into the next line. This was the generated HTML:<p><pre><code> &lt;p&gt;Hello, &lt;i&gt;world&lt;&#x2F;i&gt;&lt;&#x2F;p&gt;&lt;p&gt;&lt;i&gt;Why italics?&lt;&#x2F;i&gt;&lt;&#x2F;p&gt; </code></pre> As a programmer, I can appreciate why this might happen, and I know how to fix it...but this is the kind of unexpected behavior that is the bane of the layperson, so much so that with each new rich-text environment -- whether it be Word, Google Docs, TinyMCE, etc -- they have to come up with a whole new list of hacks to get around these quirks.<p><i>edit: the rest of this is address to a general &quot;you&quot;, not to &quot;you, the Guardian developers&quot;, as in, &quot;why didn&#x27;t you just do Markdown&quot;...though if the Guardian took the lead in that, I&#x27;d most definitely upvote that too ;)</i><p>I think rich-text editors are fine for the <i>very</i> layperson. But I think for professional reporters, there needs to be a move toward the expectation that they all learn Markdown. Note, I&#x27;m not saying that everyone needs to learn HTML...but Markdown is basically the exact subset of text formatting a professional online writer needs to communicate 99.9% of their reportage material, with the rest being made up through plugins&#x2F;shortcode&#x2F;embed, as is currently the case for most online CMSes.<p>Markdown can be written in any editor and is portable to a huge variety of systems and services. More importantly, even without a specialized editor, Markdown still has human-friendly structure. What else does a writer need?<p>Before you say: <i>oh but we can&#x27;t expect our writers to learn code-like things</i>...this is not true at all. As an intern at the Denver Post, I spent at least a day learning the in-house editor, which was Windows-only, designed for the print-publishing workflow, and had all manner of arcane key combinations to add editing marks (again, for print, and not the web). Everyone was expected to learn it, and everyone did fine.<p>But unlike Markdown, this in-house closed source coding system was...well, shitty as most industry-specific codes are...and once in awhile someone would accidentally &quot;un-hide&quot; notes meant for an editor&#x27;s eyes only, which would then show up in print. What I love about Markdown is that you don&#x27;t even have to really know it to write what you need...hitting Enter creates a paragraph break, both in your text editor and the platform to which you publish. How much easier can you get?
评论 #7437598 未加载
评论 #7436204 未加载
评论 #7436125 未加载
评论 #7436272 未加载
评论 #7436174 未加载
评论 #7441232 未加载
noir_lordabout 11 years ago
This is quite simply stunning.<p>I&#x27;ve used ckeditor 4 recently and found that pretty impressive (it was a system for a company of charity workers, not a hope in hell that markdown was going to happen) and it was good enough.<p>This looks like something I&#x27;d use for my <i>own</i> stuff.
RaRicabout 11 years ago
Does anyone know why Chrome uses &amp;nbsp; (non-breaking-space) before and after inline tags such as anchor and italics? This behavior causes lines to sometime break much sooner than needed.
spoiledtechieabout 11 years ago
Any links to see a demo?
评论 #7436055 未加载
评论 #7436064 未加载