我目前正在使用 CKEditor (http://ckeditor.com/)。我正在寻找：
1) 默认情况下通过“execCommand”可用的命令的详尽列表。
2) 一种设置样式的机制（就像 FONT 和 SIZE 组合框一样）。我在文档中看到了名为“setStyle”的函数，但它似乎需要一个 exact 元素。我一生都无法根据选择来弄清楚如何这样做——没有办法使用 ID 或 CLASS，因为所选部分没有。
我已在论坛上发帖，但就回复而言，他们似乎并不十分活跃。任何帮助将不胜感激。
最好的。
【问题讨论】：
标签： javascript coding-style ckeditor command
我没有使用过 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'} }
]);
};
【讨论】：
我可以推荐的最好的事情是查看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' );
})
我的朋友，我只需要加一点肘部油脂就可以得到你想要的东西。
【讨论】：
您可以在 _source 文件夹中搜索“.addCommand”，这将为您提供可以在编辑器上执行的所有命令的完整列表。我猜您只对该列表的一部分感兴趣，因为有些是供内部使用的。
【讨论】：
对于 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>
【讨论】：
虽然我知道这不是一个详尽的列表，并且会根据配置而有所不同。如果您不想为了获取基本命令列表而输入所有这些内容，那么这是我在 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"]
【讨论】：