Editor (Draft)

[aeneasr]

Abstract

Editing content on the web has never been easier. With the rise of thumblr, wikipedia, medium, wordpress, facebook, twitter and many more, the consumer has shifted into a creator. Yet, content creation is constrained by technical issues and often to complicated or to limited.

This document aims to give you an overview of what approaches exist, what editors implement these approaches, where the problems are and which opportunities I see.

Feel free to contribute any time!

Layout editor

The layout editor enables the author to use predefined layouts for styling his content:

Content Editor

The content editor enables the author to create and modify content. This could be Wikimedia's Visual Editor, Markdown or CKEdit.

Considerations

Layout model: Custom vs HTML

Modern WYSIWYG editors seem to be using Custom > DOM, see why contenteditable is terrible.

Why does HTML as a format suck for saving?

• HTML is difficult to process
  • We need a DOM tree for analysing the content
  • Converting HTML to other formats like Markdown, LaTeX or ePub can be very tricky
  • If the layout is done in HTML, it is very unlikely that we can transform that format into another one without writing a lot of code
• The structure needs to be well planed and designed, changes are very difficult to implement without bc breaking
• HTML needs to be sanitized
• We can not sanitize everything, like nested things etc.

Why does HTML as a format rule?

• We can display the content without rendering it first - we don't need a server side service
• Generally, content for the web is marked up with html and easily integrationable (e.g. Solr!)

Why does a custom format suck for saving?

• Whenever we want to represent an HTML format (which is like all of the times), we need to parse the json to html
• We need a server side service for rendering

Why does a custom format rule for saving?

• We can version our "API" easily, making BC breaks less of an issue
• The requirement for server side rendering could be a SaaS business opportunity (see phantomjs)
  • Only works with preset layout parts (or we need a solution to "commit" layout parts)

    Content extension

Sometimes, content is a composition of other content. For example an article with two example exercises. Or an article including a video.

These exercises or videos are their own content (they work on their own) and are integrated into the article. This process is called "content extension", because you extend your current content.

In Markdown such a content integration could look like this: >[My first example exercise](http://mywebsite.com/exercise/1).

Sometimes a content integration is also known as "widgets" - e.g. including a twitter post or a youtube video into your article: >[My twitter post](http://twitter.com/status/...)

When creating a newline in medium, you can choose between text (just start typing) or a content integration. These "parts" or "paragraphs" can be layouted differently - for example as a single or two column layout.

Editors like the oerpub editor work similar to the approach of the medium editor.

Technical research (content editors)

Mercury

Wysiwyg.js

Medium.js

Oer Pub

This is basically the aloah editor with a few little extras.

Redactor

It's awesome!! Unfortunately doesn't work with contenteditable...

Etch.js

Hallo.js

A very simple contenteditable editor.

iFrame editors

iFrame editors are generally bad news, because you edit content in a scoped environment but display it directly on your site.

CKEditor

CKeditor is an old, feature rich text editor which supports in-text editing. CKEditor is something like Word for the Web (Wordpress, Drupal, ...). Since we used TinyMCE in older versions of our website, I feel uncomfortable with CKEditor and TinyMCE as they allow too many layout features like tables, adding css classes, custom css, ...

TinyMCE

See CKEditor.

Raptor

Raptor is a feature rich in-text (contenteditable) editor:

• Previews changes on button hover
• Has a lot of function (alignment, tables, hr, ...)

However, it feels a lot like CKEditor or TinyMCE (see CKEditor).

Technical research (layout editors)

GSS, VFL & Auto-Layout

A constraint or dependency to GSS is unsuitable for the layout editor, since the author should not decide how thinks look. However, GSS could be used to simplify the process of creating a new layout template simply by clicking things together, but not very likely.

YUI

The Yahoo UI library offers a grid layout editor. The grid system works similar to bootstraps grid system. The layout editor is very minimalistic and not suitable for editorial tools.

Hashtag grid

Not really something interesting?

ZURB CSS Grid Builder

Similar to YUI.

Construct 1.0

Similar to YUI.

[aeneasr]

this research could be interesting for you @tacurran :)

[aeneasr]

SaaS opportunities:

• Collaboration API
• Media integration API (Images, Videos)
• 3rd Party integration (Wiris, Geogebra, ...)

[elbotho]

More Editors: https://github.com/cheeaun/mooeditable/wiki/Javascript-WYSIWYG-editors http://textangular.com/ http://imperavi.com/redactor/ (not free)

[aeneasr]

Awesome! :)

[elbotho]

And here Scribe again, with a list of all the browser Inconsistencies they fixed: https://github.com/guardian/scribe/blob/master/BROWSERINCONSISTENCIES.md

[elbotho]

I like the content integration idea. If you have content types you can easily define new ones or restrict the choice for specific pages. Also certain content types could use different (or adapted) editors, e.g. a plugin for drawing graphs or an SVG-editor for vector images.

Extendibility ftw.

[aeneasr]

The idea is to do it like facebook does. You simply paste a link (for example to wikipedia) and the editor retrieves the neccessary information and displays it. This would make content ingestion really easy and omnipotent (imagine parsing an PDF link and you get a small preview of the PDF)

[aeneasr]

And as the semantic web gets more and more attention (especially because google & facebook use it), this could really be a thing

[aeneasr]

Using webcomponents makes things much easier than having to implement semantic web