editor-exec.mustache revision 3f2ac16886fbbccf85547608b11143a8795d8db4
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney<div class="intro">
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney<p>Creating and using custom ExecCommands.</p>
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney<div class="example">
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney {{>editor-exec-source}}
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney<h3>Working with EditorBase</h3>
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney<p>`EditorBase` is not a fully functional Editor, it is simply the base utility that will be used under the hood to create an Editor.</p>
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney<h3>Creating the Editor</h3>
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney<p>In this step we are going to do the initial render of the Editor, set its content, and focus it when it's ready.</p>
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt SweeneyYUI().use('editor', function(Y) {
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney //Create the Base Editor
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney var editor = new Y.EditorBase({
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney content: '<p><b>This is <i class="foo">a test</i></b></p><p><b style="color: red; font-family: Comic Sans MS">This is <span class="foo">a test</span></b></p>',
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney extracss: '.foo { font-weight: normal; color: black; background-color: yellow; }'
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney //Rendering the Editor.
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney<h3>Registering a new execCommand</h3>
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney<p>ExecCommand overrides are stored on the `execCommand` plugin. This way, you can write a plugin for Editor and have it available
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeneyto all Editor instances in your sandbox.</p>
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney<p>To create a new execCommand, we simply add an object literal to the `Y.Plugin.ExecCommand.COMMANDS` static object like this:</p>
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney foo: function(cmd, val) {
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney logFn('You clicked on Foo');
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney inst.one('body').setStyle('backgroundColor', 'yellow');
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney<p>Now we can use this new command like:</p>
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney<h3>Full Example Source</h3>
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney<h4>HTML</h4>
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney{{>editor-exec-source-html}}
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney{{>editor-exec-source-css}}
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney<h4>Javascript</h4>
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney{{>editor-exec-source-js}}