按照本教程,我正在尝试为 CKEditor 创建我的第一个插件,这里的主要想法是允许用户从 SELECT 元素中选择任何(一次只有一个)图标,如这里我需要构建和不不知道 SELECT 元素如何包含这些元素的每个类“icon-circle-arrow-up”、“icon-globe”等,因此用户可以在任何他们想要的地方选择和编写代码,如果可能的话,可以渲染元素在 CKEditor 区域,Twitter Bootstrap 类当然应该包含为 CSS 链接。到目前为止我所做的只是这段代码:
CKEDITOR.plugins.add('twitter-icons', {
init: function(editor) {
editor.insertHtml();
}
});
WhereinsertHtml()
将写入编辑器之类的内容<i class="some_class"> </i>
,以及some_class
应在哪里获取用户在 SELECT 元素中选择的值。关于如何从这里继续的任何帮助或想法?
更新 1 经过研究,我得到了这个:
CKEDITOR.plugins.add("tbootstrap", {
requires: ["richcombo"],
init: function(editor) {
var config = editor.config, lang = editor.lang.format;
var tb_icons = []; //new Array();
tb_icons[0] = ["<i class='icon-glass'>​</i>", "icon-glass", "icon-glass"];
tb_icons[1] = ["<i class='icon-music'>​</i>", "icon-music", "icon-music"];
tb_icons[2] = ["<i class='icon-search'>​</i>", "icon-search", "icon-search"];
tb_icons[3] = ["<i class='icon-envelope'>​</i>", "icon-envelope", "icon-envelope"];
tb_icons[4] = ["<i class='icon-heart'>​</i>", "icon-heart", "icon-heart"];
tb_icons[5] = ["<i class='icon-star'>​</i>", "icon-star", "icon-star"];
tb_icons[6] = ["<i class='icon-star-empty'>​</i>", "icon-star-empty", "icon-star-empty"];
tb_icons[7] = ["<i class='icon-user'>​</i>", "icon-user", "icon-user"];
tb_icons[8] = ["<i class='icon-film'>​</i>", "icon-film", "icon-film"];
tb_icons[9] = ["<i class='icon-th-large'>​</i>", "icon-th-large", "icon-th-large"];
tb_icons[10] = ["<i class='icon-th'>​</i>", "icon-th", "icon-th"];
editor.ui.addRichCombo("tbootstrap", {
label: "TB Icons",
title: "TB Icons",
voiceLabel: "TB Icons",
className: "cke_format",
multiselect: false,
panel: {
css: [config.contentsCss, CKEDITOR.getUrl(CKEDITOR.skin.getPath("editor") + "editor.css")],
voiceLabel: lang.panelVoiceLabel
},
init: function() {
this.startGroup("tbootstrap");
for (var this_tag in tb_icons) {
this.add(tb_icons[this_tag][0], tb_icons[this_tag][1], tb_icons[this_tag][2]);
}
},
onClick: function(value) {
editor.focus();
editor.fire("saveSnapshot");
editor.insertHtml(value);
editor.fire("saveSnapshot");
}
});
editor.insertHtml();
}
});
但是我在尝试在编辑器中插入元素时遇到了这个错误:
SyntaxError: missing ) after argument list CKEDITOR.tools.callFunction(156,''); 返回假;
语法错误:缺少 ) 括号中的 void('')
有任何想法吗?
编辑 2 试过这个:
tb_icons[0] = ['<i class=%27icon-glass%27>​</i>', "icon-glass", "icon-glass"];
tb_icons[1] = ['<i class=%27icon-music%27>​</i>', "icon-music", "icon-music"];
这也是:
tb_icons[0] = ["<i class=%27icon-glass%27>​</i>", "icon-glass", "icon-glass"];
tb_icons[1] = ["<i class=%27icon-music%27>​</i>", "icon-music", "icon-music"];
然后在onClick()
函数中改变这个:
editor.insertHtml(unscape(value));
结果是相同的意思相同的错误