The act of converting content from its original format into a format capable of being displayed on the web
Manage Multiple WordPress Sites

Editing

Editing Category

Simple HTML5 Page Edits — Storage.js

Storage.js is a tool for WYSIWYG page editing; it uses HTML5′s storage, so it stores the info even after an unfortunate browser restart.

storagejs Simple HTML5 Page Edits    Storage.js

The library features an extensive API for event management and control.

It’s good to see a library that doesn’t take storage.js to the next step (saving data in a database, or adding a markup mechanism) prematurely, allowing you to shape the plugin according to your wishes.

Of course, there’s always the chance that the devs simply slacked on this. ;)

Simple & Beautiful WYSIWYG Editor — Bootstrap-wysihtml5

WYSIHTML5 is a simple and beautiful editor built upon Twitter’s Bootstrap and XING’s wysihtml5.

wysiwyhtml5 Simple & Beautiful WYSIWYG Editor    Bootstrap wysihtml5

It differs from other WYSIWYG editors by providing only the ‘bare minimum’ for editing — which is sometimes all we need.

The library works with a single line of code, and supports events as well. Although a bit scarce in features, the editor sports more than enough for a simpler blogging interface.

Function buttons can be removed from the editor, too.

In-browser Code Editing With Not Too Much Hassle – CodeMirror

CodeMirror is an easy to use tool for in-browser code editing. A great number of languages are supported in CodeMirror.

codemirror In browser Code Editing With Not Too Much Hassle   CodeMirror

CodeMirror supports markup for popular languages such as C, C++, HTML5, JavaScript, etc., as well as a number of less-known programming languages.

See this blog post for a really creative approach to using CodeMirror. Also, check out some demos here.

Markdown-ify DOM Objects On The Client Side – reMarked.js

reMarked.js is a library that converts any DOM object to Markdown.

remarked Markdown ify DOM Objects On The Client Side   reMarked.js

The library’s main purpose is to provide an ‘interface’ for converting data from WYSIWYG editors to Markdown.

Although libraries like this already exist, the most popular such library, Markdownify, is a server side solution, so, naturally, reMarked is to be preferred.

A jQuery Textarea Plugin – griffin.editor

griffin.editor is a no-frills jQuery textarea editor with an easy setup and Markdown support.

griffin A jQuery Textarea Plugin   griffin.editor

The editor supports the jQuery UI, automatically enhancing the look of, e.g., the ‘add link’ dialog if jQuery’s UI components are included.

Another great feature is the preview pane and configurable access keys.

Best of all, griffin doesn’t clog you down with these features, and you can turn them on and off as you please if you want to save the extra bandwidth.

Small Inline Rich Text Library – NicEdit

NicEdit is a JS library that converts textareas to ‘rich text editing’.

nicedit Small Inline Rich Text Library   NicEdit

NicEdit is not, of course, a solution for any website, but it grants, e.g., commentators the freedom to make their text more visually impacting.

You can easily pass arguments to NicEdit to ensure that, e.g., inserting pictures is forbidden.