寻找详尽的命令列表和设置样式的方法

Question

我目前正在使用 CKEditor (http://ckeditor.com/)。我正在寻找：

1）默认情况下通过“execCommand”可用的命令的详尽列表。

2) 设置样式的机制（与 FONT 和 SIZE 组合框的方式相同）。我在文档中看到了名为“setStyle”的函数，但它似乎需要一个 exact 元素。我无法根据选择弄清楚如何执行此操作 - 无法使用 ID 或 CLASS，因为所选部分没有。

我已经在论坛上发帖了，但就回复而言，他们似乎不太活跃。任何帮助将不胜感激。

最好的。

Answer 1

您可以在 _source 文件夹中搜索“.addCommand”，这将为您提供可以在编辑器上执行的所有命令的完整列表。我猜您只对该列表的一部分感兴趣，因为其中一些是供内部使用的。

Answer 2

对于 CKEditor 4，每个编辑器的可用命令会有所不同，具体取决于：

1. 您加载了哪些插件。
2. 您为编辑器提供了哪些配置选项。

下面是两个列出可用命令的函数。

注意：在编辑器实例准备就绪之前，这两个函数将返回不完整的列表。

//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;
}

要在编辑器准备就绪时获取每个编辑器的所有命令列表，您可以执行以下操作：

//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));
});

要创建包含所有可能命令的编辑器，然后获取这些命令，您可以执行以下操作：

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

Answer 3

我可以推荐的最好的事情是查看 javscript api

可以进行一些研究和尝试错误 我能够更改字体颜色，

 $('#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' );
 })

只需付出一点努力即可得到你想要的东西，我的朋友。

Answer 4

我没有使用 execCommand，但根据我的理解，您可以执行工具栏中的任何内容。

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

要设置样式，请将其添加到您的 config.js 文件中。

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'} }
    ]);
};

Answer 5

尽管我知道这不是一个详尽的列表，并且会根据配置而有所不同。如果您不想仅仅为了获得基本命令列表而输入所有这些内容，那么以下是我在 CKEDITOR 4 上执行内联编辑器时得到的结果：

["contextMenu"、"about"、"a11yHelp"、"粗体"、"斜体"、"下划线"、"删除线"、"下标"、"上标"、"块引用"、"剪切"、"复制"、"粘贴"、"输入"、"shiftEnter"、"水平规则"、"图像"、"缩进"、"减少缩进"、"链接"、"锚点"、"取消链接"、"removeAnchor"、"编号列表"、 “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”、 “cellHorizo​​ntalSplit”，“cellInsertBefore”，“cellInsertAfter”，“撤消”，“重做”，“checkspell”，“accessPreviousSpace”，“accessNextSpace”]