html - Twitter Bootstrap アイコンを使用して最初の CKEditor プラグインを構築する

Question

このチュートリアルに従って、私は CKEditor 用の最初のプラグインを作成しようとしています。ここでの主なアイデアは、ここにあるように、ユーザーが SELECT 要素から任意のアイコン (一度に 1 つだけ) を選択できるようにすることです。これらの要素「icon-circle-arrow-up」、「icon-globe」などのすべてのクラスを含む SELECT 要素がどのようになっているのかがわからないため、ユーザーは好きな場所でコードを選択して記述し、可能であれば要素をレンダリングできますCKEditor 領域では、もちろん Twitter Bootstrap クラスを CSS リンクとして含める必要があります。これまでに行ったことは、次のコードです。

CKEDITOR.plugins.add('twitter-icons', {
    init: function(editor) {
        editor.insertHtml();
    }
});

SELECT 要素でユーザーが選択した値を取得する必要がある場所と、どこinsertHtml()に何かをエディターに書き込みます。ここから続行する方法について何か助けやアイデアはありますか?<i class="some_class">&nbsp;</i>some_class

更新 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: 引数リストの後に ) がありません CKEDITOR.tools.callFunction(156,' '); false を返します。

SyntaxError: 括弧内に ) がありません 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));

結果は同じ意味で同じエラーです