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

Posted 2023-02-23

【中文标题】寻找详尽的命令列表和设置样式的方法

【英文标题】：Looking for exhaustive list of commands and a way to set style

【发布时间】：2011-01-29 17:14:32

【问题描述】：

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

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

2) 一种设置样式的机制（就像 FONT 和 SIZE 组合框一样）。我在文档中看到了名为“setStyle”的函数，但它似乎需要一个 exact 元素。我一生都无法根据选择来弄清楚如何这样做——没有办法使用 ID 或 CLASS，因为所选部分没有。

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

最好的。

【参考方案1】：

我没有使用过 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' 
    ]);
;

【讨论】：

感谢您的帖子durilai。但是，我希望直接在 javascript 中执行更改。我不打算使用他们的默认按钮。我实际上是从桌面应用程序连接到它的。我能够即时执行 javascript，并且我需要能够手动执行更改。

【参考方案2】：

我可以推荐的最好的事情是查看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' );
 )

我的朋友，我只需要加一点肘部油脂就可以得到你想要的东西。

【讨论】：

是的。我让它工作。但是，我看到了三个问题：1）我对获取“元素”的兴趣不如一般选择。如果我正确理解“getStartElement”，那么它会抓取整个包含的标签/元素——我只想要确切的文本选择。 2) 我当然不想插入 HTML，因为我可能需要在后续编辑过程中将其删除。 3) jQuery 编辑排除了 UNDO 的能力。所以这可能不是最好的选择。非常感谢您愿意提供帮助，顺便说一句。

更正：#3 似乎不是问题。这似乎更像是一个时间/延迟问题。无论如何，其余的都站着。

我明白你的意思必须有办法做到这一点，我们只是不知道正确的路径是什么

【参考方案3】：

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

【讨论】：

Hrm，这样做了，但没有多大帮助。也许如果有人可以提供一个例子来说明如何改变选择的字体或颜色，我可以从这个例子中推断出来。就目前而言（这种性质的项目通常是这种情况），没有任何文档涵盖任何边缘情况。不过谢谢！

这应该提供您在第一个问题中要求的所有命令，我没有提到任何关于样式的内容。文档不能涵盖边缘情况，至少它必须首先正确涵盖常见用例，当该部分准备好并且一切按预期工作时，也许是时候改进带有边缘情况的文档了。同时，源是最好的文档，因为它真正展示了事情是如何完成的。要设置样式，您可以从查看“basicstyles”插件开始

我明白你在说什么。但是，我需要的不仅仅是基本样式。我需要提供我希望调整的项目以及它的价值——不仅仅是粗体或斜体等。根据当前的实现，我必须为每个字体提供一个特定的功能，这似乎没有正确的。也许我可以将其泛化。

样式系统允许这样做。了解了 basicstyles 插件的工作原理后，再看看 font 或 stylescombo 插件（以及默认定义的 stylesSet）

好吧，我不怕承认我完全错过了一些东西。但是，我需要的是能够即时应用格式。为每个排列（例如 font-size 10、font-size 11、font-size 12 等）创建一个“样式”是不合理的。因此，我需要 CKEDITOR.selection （或任何可用的）返回对我有用的内容以便进行编辑。

【参考方案4】：

对于 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>

【参考方案5】：

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

["contextMenu", "about", "a11yHelp", "bold", "italic", "underline", "strike", "subscript", "superscript", "blockquote", "cut", "copy ", "paste", "enter", "shiftEnter", "horizo​​ntalrule", "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”、 "cellHorizo​​ntalSplit"、"cellInsertBefore"、"cellInsertAfter"、"undo"、"redo"、"checkspell"、"accessPreviousSpace"、"accessNextSpace"]