Note: The DOM structure of SC.WYSIWYGEditorView has changed. If you need to retain the view's previous version for a legacy project, you can check out the v0.9 tag (git checkout v0.9).

SproutCore Rich Text Editor

A basic WYSIWYG editor for SproutCore.

Features

• Basic WYSIWYG editing (bold, italic, underline, ul, ol, alignment, indenting, linking, block formating)
• Basic image inserting
• Basic video (youtube/vimeo) embeding
• Compatible with the SC view layer (unlike all other editors)
• Undo/Redo Support
• Move image inside the editor by drag'n'drop
• Extensible

Basic Usage

You can add the SproutCore WYSIWYG to your existing views the same as you would any control:

MYApp.MyView = SC.View.extend({
    childViews: ['editor'],

    editor: SC.WYSIWYGView.extend({
        valueBinding: 'MyApp.myController.content'
    })
})

Specifying Commands

To specify which commands you would like to be available inside the toolbar, simply add them to the commands list.

MYApp.MyView = SC.View.extend({
    childViews: ['editor'],

    editor: SC.WYSIWYGView.extend({
        commands: [ 'link', 'bold', 'italic', 'underline'],
        valueBinding: 'MyApp.myController.content'
    })
})

Add Commands

To create a custom command, create an object which mixes in SC.WYSIWYGCommand and add it to the command factory.

MyApp.MyCommand = SC.Object.extend(SC.WYSIWYGCommand, {
    commandName: 'myMagicCommand',
    execute: function(source, editor) {
        // do some stuff
    }
});
SC.WYSIWYGCommandFactory.registerCommand(MyApp.MyCommand);

Once it is registered with the command factory, you can simply add it to the command list in the WYSIWYGView.

MYApp.MyView = SC.View.extend({
    childViews: ['editor'],

    editor: SC.WYSIWYGView.extend({
        commands: [ 'link', 'bold', 'italic', 'underline', 'myMagicCommand'],
        valueBinding: 'MyApp.myController.content'
    })
})

Editor API

To determine if a command has been executed against the current selection use the following command (detailed: https://dvcs.w3.org/hg/editing/raw-file/tip/editing.html):

queryCommandState: function(command)

To determine the command value (if available) of the current selection:

queryCommandValue: function(command)

To execute and arbitrary command against the editor:

execCommand: function(commandName, showDefaultUI, value)

To insert arbitrary html at the current location:

insertHtmlAtCaret: function(html)

TODOs

• Add some tests boy howdy
• refine the video embed command
• refine the image embed command
• full screen support ?
• image / file uploading (probably with the sproutcore-fileupload framework)
• clean up the way the styles are enumerated / displayed (kindof brittle with the css + js views)

Thanks to LearnDot & Joe Gaudet

Special thanks to LearnDot's Joe Gaudet for incepting, developing and open-sourcing this project!