2

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 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.

5 Answers 5

3

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.

6
  • Hrm, did that but it wasn't much help. Perhaps if someone could provide an example of how to, say, change the FONT or COLOR of a selection, I could extrapolate from the example. As it stands (and as is often the case with items of this nature) none of the documentation covers any edge cases. Thanks though! Mar 30, 2010 at 4:49
  • That should provide all the commands that you requested in your first question, I didn't mention anything about styles. The documentation can't cover edge cases, at least it must cover properly the common use cases first, and when that part is ready and everything works as expected then maybe it's time to improve the docs with edge cases. Meanwhile, the source is the best documentation as it really shows how things are done. To set a style you can start by looking at the "basicstyles" plugin
    – AlfonsoML
    Mar 30, 2010 at 13:59
  • I understand what you're saying. However, what I need involves more than basic styling. I need to provide both the ITEM I wish to adjust, as well as its VALUE -- not simply BOLD or ITALIC, etc. Based on the current implementation I'd have to provide a specific function for each FONTSIZE, which doesn't seem right. Perhaps I can genericize it. Mar 31, 2010 at 3:06
  • The styles system allows that. After understanding how the basicstyles plugin works, look at the font or stylescombo plugin (and the stylesSet defined by default)
    – AlfonsoML
    Mar 31, 2010 at 7:55
  • Ok, I'm not afraid to admit I'm COMPLETELY missing something. However, what I need is to be able to apply formatting on the fly. Creating a "style" for each and every permutation (e.g. font-size 10, font-size 11, font-size 12, etc.) is not reasonable. Therefore, I need CKEDITOR.selection (or whatever is available) to return something useful to me so as to edit. Apr 1, 2010 at 0:59
3

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>
1

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.

3
  • Yes. I got it to work. However, I see three issues: 1) I'm not interested in acquiring an "element" so much as the general selection. If I'm understanding "getStartElement" correctly then it grabs the entire encompassing tag/element -- I only want the exact text selection. 2) I certainly don't want to insert HTML as I may need to remove it during follow-up edits. 3) jQuery edits preclude the ability to UNDO. So this might not be the greatest option. Thanks so much for your willingness to assist, btw. Apr 1, 2010 at 0:20
  • CORRECTION: #3 doesn't seem to be an issue. It appears to be more of a timing/delay issue. Anyway, the rest stands. Apr 1, 2010 at 0:28
  • I see what you mean there has to be a way to do this we just don't know what the correct path is
    – mcgrailm
    Apr 1, 2010 at 16:29
1

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'} }
    ]);
};
1
  • Thanks for the post durilai. However, I'm looking to execute the changes directly in Javascript. I'm not planning to use their default buttons. I'm actually hooking into it from a desktop application. I have the ability to execute javascript on the fly, and I need to be able to execute the changes manually. Mar 20, 2010 at 4:16
1

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"]

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.