Developed by SquareSheep Studios | Licensed under Creative Commons | Find the project on GitHub

Custom 100% Vanilla JavaScript Rich Text Editor

CMS Content Editor - you can edit everything!

All of the content in this area is editable. This editor is intended for use within a CMS (Content Management System) and is not supposed to replicate something like Microsoft Word or Google Docs. It is designed to help keep new content uniform and follow a standard pattern (e.g. titles, headings, links) all with the same styling and layout. This is why there are no features like "line height", "margins", "font" or "color"; as they would all be predefined in the stylesheet when establishing a unique design for your content.


So how do I use it then?

The UI that you are looking at is mainly placeholder and just demonstrates the features. This project is really about the JavaScript logic that powers it - so you could hook it up to any interface and make it work how you want.

For this demo, clicking the tabs at the top of the editor will allow you to change or define a type of node you want to create (title, heading, list, link, image). Clicking this will either change an element into this type, or, if the element was already this type it will change it back to a normal paragraph. For the hyperlink and image, just insert the link and the element will be created with the appropriate information.

I have tried to design this system so that it generates perfect HTML to be styled with CSS and easy for web assistants to process and interpret correctly. For example, lists are always created by being wrapped in a "UL", and images come with an "ALT" attribute.

Demo (Title)

I'm a heading

This is a paragraph, which you are perfectly familiar with by them now, but here you go anyway. You can also insert links inside of paragraphs like this. You can't click them from inside the editor - but they're there - trust me!

Below is a list


...and to end, here is a lovely picture of Barry

A lovely picture of Barry