Looking for exhaustive list of commands and a way to set style

I'm currently working with CKEditor (http://ckeditor.com/). I'm looking for:

1) an exhaustive list of commands available by default via 'execCommand'.

2) a mechanism by which to set styles (as in the same way the FONT and SIZE combo boxes do it). I saw the function called 'setStyle' in the documentation, however it seems to require an exact element. I can't for the life of me figure out how to do so开发者_Go百科 based on the selection -- there is no way to use ID or CLASS, as the selected portions have none.

I've posted to the forums but they don't seem to be terribly active as far as replies are concerned. Any assistance would be most appreciated.

Best.

You can do a little search in the _source folder for ".addCommand" and that will give you a full list of all commands that can be executed on an editor. I guess that you are interested only in a part of that list, as some are meant for internal use.

For CKEditor 4 the available commands vary for each editor based on:

1. Which plugins you have loaded.
2. What configuration options you've given an editor.

Below are two functions that will list available commands.

Note: Until an editor instance is ready, these two functions will return an incomplete list.

//get all commands from specific editor
function getEditorInstanceCommands(instanceId) {
    var results = [], command, instance;
    instance = CKEDITOR.instances[instanceId];
    if (instance) {
        for (command in instance.commands) {
            if (results.indexOf(command) == -1) results.push(command);
        }
    }
    return results;
}

//get all commands from all editors
function getAllCommands() {
    var results = [], key, instance, command;
    for (key in CKEDITOR.instances) {
        instance = CKEDITOR.instances[key];
        for (command in instance.commands) {
            if (results.indexOf(command) == -1) results.push(command);
        }
    }
    return results;
}

To get a list of all commands per editor as the editor becomes ready you would do something like:

//get all commands from specific editor
function getEditorInstanceCommands(instanceId) {
    var results = [], command, instance;
    instance = CKEDITOR.instances[instanceId];
    if (instance) {
        for (command in instance.commands) {
            if (results.indexOf(command) == -1) results.push(command);
        }
    }
    return results;
}

CKEDITOR.on('instanceReady', function(e) {
    console.info(getEditorInstanceCommands(e.editor.name));
});

To create an editor with all possible commands and then to get those commands you can do the following:

<div id='MyEditor'></div>
<script>
    CKEDITOR.inline('MyEditor', { customConfig: '' });
    var commands = getEditorInstanceCommands('MyEditor');
</script>

best thing I can recommend is to to look at the javscript api

ok with a little research some trial and error I was able to change the font color

 $('#test').click(function (){
 //   fck is the instace name of the editor
    editor = CKEDITOR.instances.fck;
    var selected_text = editor.getSelection().getNative();
 // editor.insertHtml('[foo]' + selected_text + '[bar]');
    var element = editor.getSelection().getStartElement();
    element.setStyle( 'color', '#ff0000' );
 })

just got to put in a little elbow grease to get what you want my friend.

I have not used the execCommand, but from my understanding you can execute anything that is in the toolbar.

editor.execCommand( "div" );
editor.execCommand( "bold" );

To set style add this to you config.js file.

CKEDITOR.editorConfig = function(config) {
    CKEDITOR.addStylesSet('customStyles',
    [
        { name: 'Header 1', element: 'h1' },
        { name: 'Header 2', element: 'h2' },
        { name: 'Header 3', element: 'h3' },
        { name: 'Text', element: 'p' },
        { name: 'Left Align', element: 'img', attributes: { 'class': 'ImageLeft'} },
        { name: 'Right Align', element: 'img', attributes: { 'class': 'ImageRight'} }
    ]);
};

Though I know this is not an exhaustive list and will differ based on configuration. If you don't want to have to type in all of this just to get a basic list of commands, here is what I get when doing an inline editor on CKEDITOR 4:

["contextMenu", "about", "a11yHelp", "bold", "italic", "underline", "strike", "subscript", "superscript", "blockquote", "cut", "copy", "paste", "enter", "shiftEnter", "horizontalrule", "image", "indent", "outdent", "link", "anchor", "unlink", "removeAnchor", "numberedlist", "bulletedlist", "pastetext", "pastefromword", "removeFormat", "specialchar", "scaytcheck", "blur", "blurBack", "selectNextCell", "selectPreviousCell", "table", "tableProperties", "tableDelete", "cellProperties", "rowDelete", "rowInsertBefore", "rowInsertAfter", "columnDelete", "columnInsertBefore", "columnInsertAfter", "cellDelete", "cellMerge", "cellMergeRight", "cellMergeDown", "cellVerticalSplit", "cellHorizontalSplit", "cellInsertBefore", "cellInsertAfter", "undo", "redo", "checkspell", "accessPreviousSpace", "accessNextSpace"]