Richtext Editor: WYSIWYG

A rich text editor adds formatting options (bold, italic, ...) to text fields.
It also allows the user to insert links, images, videos, tables etc without that he/she has to write html code.

You immediately see the rendered html tags or What You See Is What You Get (WYSIWYG)

There are a couple of richtext/WSIWYG editors plugins available: TinyMCE, Summernote, Froala, ... After some research, I decided to use CKeditor. It is not the most lighweight and elegantly written piece of code but once you know how to tweek it, it is a very versatile rich text editor. It is also the best maintained and the most widely used.

The editor will only be displayed when the text is focused (inline mode). This keeps the interface clean as not to confuse the user with irrelevant options.

There are two configurations: minimal and advanced but these can easily be customized.

Minimal Configuration

Available Options

  • bold
  • italic
  • underline
  • numbered lists
  • bullet lits
  • align: left, center, right, justify
  • link
This is some example text.
This is bold, this is in italic, this is a link
  • This is a bullet list
Please click here to see the options

Advanced Configuration

Available Options

  • sourcecode: ability to add html tags
  • bold
  • italic
  • underline
  • strikethrough
  • numbered lists
  • bullet lits
  • align: left, center, right, justify
  • link
  • named anchor
  • image (from the media libaray or a new one)
  • video embed (youtube, vimeo, ...)
  • table
  • horizontal line
  • special characters

Lorem ipsum

Dolor sit amet, consectetur adipiscing elit. In a dignissim massa, ut pharetra risus. Nulla ex sem, egestas sed nunc id, laoreet fringilla nulla. Nunc mollis erat sodales, mollis purus ac, blandit nibh. Proin maximus urna vel risus sagittis mollis a vitae massa. Donec tincidunt, arcu sit amet accumsan vehicula, turpis massa aliquam enim, ut venenatis tellus lectus sed quam. Duis id efficitur neque. Curabitur non metus quam. Phasellus nisl ligula, viverra id rutrum eget, consequat eget velit. Vestibulum auctor augue eros, ac facilisis massa posuere in. Suspendisse at bibendum risus, ac condimentum erat. Mauris eu mi at sem scelerisque congue.

Please click here to see the options.