Simditor

An Easy and Fast WYSIWYG Editor

Simditor will trigger different events, you can bind these events if needed:

# init Simditor
editor = new Simditor
  textarea: $('#editor')

# bind valuechanged event
editor.on 'valuechanged', (e, src) ->
  alert('simditor valuechanged')

Events

valuechanged e jQuery Event

Event fires when body content has changed

selectionchanged e jQuery Event

Event fires when cursor position or selected text has changed

decorate e jQuery Event $el jQuery Object

Event fires when pasting content and calling setValue.

Example:

Some features will insert extra attributes or tags in order to make the element looks nicer. That is "decorating". These elements should never be included when getting the content from the editor.

<div class="simditor-table"> <!-- extra tags -->
  <table>...</table>
  <div class="simditor-resize-handle" contenteditable="false"></div> <!-- extra tags  -->
</div>

When inserting the above table, Simditor needs to call 'decorate' method to create extra tags in 'decorate' event. When getting the content value, it will call 'undecorate' method to remove all extra tags.

class TableButton extends Button
  constructor: (@editor) ->
    ...

    @editor.on 'decorate', (e, $el) =>
      $el.find('table').each (i, table) =>
        @decorate $(table)

    @editor.on 'undecorate', (e, $el) =>
      $el.find('table').each (i, table) =>
        @undecorate $(table)

  ...

  decorate: ($table) ->
    if $table.parent('.simditor-table').length > 0
      @undecorate $table

    $table.wrap '<div class="simditor-table"></div>'
    @initResize $table
    $table.parent()

  undecorate: ($table) ->
    return unless $table.parent('.simditor-table').length > 0
    $table.parent().replaceWith($table)
undecorate e jQuery Event $el jQuery Object

Event fires when calling getValue and sync.
Refer to decorate event

pasting e jQuery Event $pasteContent jQuery Object

Event fires when pasting content into editor.
Param $pasteContent is the pasted content. You can valid the content and stop paste.

Example:
// stop paste if the content contains images
editor.on 'pasting', (e, $pasteContent) ->
  if $pasteContent.find("img").length > 0
    return false
focus e jQuery Event

Event fires when textarea is focused.

blur e jQuery Event

Event fires when textarea is blur.

destroy e jQuery Event

Event fires when calling destroy method.

Fork me on GitHub