A case for Redactor

Redactor Show archive.org snapshot is yet another WYSIWYG editor. It definitely has its weak points, but I want to point out that it has clear strengths, too.

Pro

• Simple and beautiful interface.
• Outstandingly organized source code. Have never seen a JS library that was this structured.
• Clear, comprehensive and searchable API documentation Show archive.org snapshot . Filled with code examples.
• Easily customizable: specify toolbar buttons, pass various callbacks, etc.
• Features a collection of great plugins Show archive.org snapshot .
• Easily extendable by self-made plugins. It is really simple to write one – see example below.
• Tons of examples Show archive.org snapshot .
• Even stores the cursor position and selection on undo/redo, formatting changes etc.

Contra

• Handling pasted text is severely broken in many ways. But who could sanitize Text copied from MS Word? Some notes from our Redactor integration code:

  Headlines are sometimes not properly pasted over from MS Word documents, especially when users did not use the headline formatting. We try to fix this for the user and look at the font size of pasted elements to determine whether elements should be headlines.

  Pasting contents is actually A LOT more complicated than you'd expect. While Redactor does some kind of cleaning, the result is actually not good enough. It is also plagued by some obscure bugs that prevent options from working as they should.

  Replace tags. This should be the job of Redactor's "replaceTags", but it's broken. Why? It replaces each tag only once, and then replaces each occurence by the next replacement's target tag name (<b> by <em>) until it starts replacing into tags. Seriously. This is just horribly broken beyond repairs, so we do it ourselves. While the documentation states that allowedTags is processed upon paste, it actually is not. So we call Redactor's removeTags for this. However, settings.allowedTags also contains all sorts of tags that we actually did not allow, for some unknown reason. So we need to restore that list, and may then ask Redactor to do the cleaning. Seriously.

Examples

Undo-Redo-Plugin

Copy@RedactorPlugins = {} unless @RedactorPlugins

# Adds undo/redo buttons.
@RedactorPlugins.bufferbuttons = ->
  init: ->
    undo = this.button.addAfter('fullscreen', 'undo', 'Rückgängig')
    redo = this.button.addAfter('undo', 'redo', 'Wiederholen')

    @button.addCallback undo, ->
      this.buffer.undo()
      this.code.sync() # Sync editor and underlying textarea; triggers change and sync callbacks
    @button.addCallback redo, ->
      this.buffer.redo()
      this.code.sync()

Add this code somewhere, then call Redactor with the plugins: {'bufferbuttons'} option – voilà!