2

按照本教程，我正在尝试为 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">&nbsp;</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'>&#8203;</i>", "icon-glass", "icon-glass"];
        tb_icons[1] = ["<i class='icon-music'>&#8203;</i>", "icon-music", "icon-music"];
        tb_icons[2] = ["<i class='icon-search'>&#8203;</i>", "icon-search", "icon-search"];
        tb_icons[3] = ["<i class='icon-envelope'>&#8203;</i>", "icon-envelope", "icon-envelope"];
        tb_icons[4] = ["<i class='icon-heart'>&#8203;</i>", "icon-heart", "icon-heart"];
        tb_icons[5] = ["<i class='icon-star'>&#8203;</i>", "icon-star", "icon-star"];
        tb_icons[6] = ["<i class='icon-star-empty'>&#8203;</i>", "icon-star-empty", "icon-star-empty"];
        tb_icons[7] = ["<i class='icon-user'>&#8203;</i>", "icon-user", "icon-user"];
        tb_icons[8] = ["<i class='icon-film'>&#8203;</i>", "icon-film", "icon-film"];
        tb_icons[9] = ["<i class='icon-th-large'>&#8203;</i>", "icon-th-large", "icon-th-large"];
        tb_icons[10] = ["<i class='icon-th'>&#8203;</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>&#8203;</i>', "icon-glass", "icon-glass"];
tb_icons[1] = ['<i class=%27icon-music%27>&#8203;</i>', "icon-music", "icon-music"];

这也是：

tb_icons[0] = ["<i class=%27icon-glass%27>&#8203;</i>", "icon-glass", "icon-glass"];
tb_icons[1] = ["<i class=%27icon-music%27>&#8203;</i>", "icon-music", "icon-music"];

然后在onClick()函数中改变这个：

editor.insertHtml(unscape(value));

结果是相同的意思相同的错误

4

0 回答 0