Question

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

1）默认情况下通过'execCommand'提供的详尽命令列表。

2）设置样式的机制（与FONT和SIZE组合框一样）。我在文档中看到了名为'setStyle'的函数，但它似乎需要 exact 元素。我不能为我的生活找出如何根据选择这样做 - 没有办法使用ID或CLASS，因为所选部分没有。

我已经发布到论坛，但就回复而言，它们似乎并不十分活跃。非常感谢任何帮助。

最佳。

Answer 1

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

Answer 2

对于CKEditor 4，可用的命令因每个编辑器而异：

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

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

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

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

我没有使用过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 4

我建议的最好的方法是查看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 5

虽然我知道这不是一个详尽的列表，但会因配置而异。如果你不想输入所有这些只是为了得到一个基本的命令列表，这就是我在CKEDITOR 4上进行内联编辑时得到的结果：

[“contextMenu”，“about”，“a11yHelp”，“bold”，“italic”，“underline”，“strike”，“undercript”，“superscript”，“blockquote”，“cut”，“copy” “，”粘贴“，”输入“，”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”]

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

5 个答案: