A rich text editor for SproutCore.
JavaScript CSS Ruby
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
commands Fixes an issue where undo redo buttons state wasn't updated Jun 3, 2014
controls Fixes a bug where the toolbar dropdown would steal focus, thus bombin… Jun 3, 2014
delegates Fixed an incompatibility with Master May 21, 2013
french.lproj Adds french translations Jun 3, 2014
panes Rename controller by editor Mar 25, 2013
resources Adds the smoothed CSS class Feb 4, 2017
tests Editor should not accept first respondership if disabled Feb 10, 2015
views Replaces defaultValue by hint as defaultValue has been deprecated Feb 4, 2017
.gitignore Added the delightful .DS_Store to gitignore. Feb 25, 2013
Buildfile Removes dependency on sproutcore-upload. Mar 10, 2014
README.md Adds upgrade notice to top of README. Jun 4, 2014
contributors.txt Fixing typos and licensing details Nov 8, 2012
sc_config Adds brief explanatory note to sc_config. Jun 3, 2014
screen-shot.png And all the other things Nov 8, 2012


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.



  • 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

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)


  • 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!