Html 使用Twitter引导图标构建我的第一个CKEditor插件

接下来我将尝试为CKEditor创建我的第一个插件，这里的主要思想是允许用户从SELECT元素中选择我需要构建的图标中的任何一个（一次只能选择一个），而不知道SELECT元素如何包含这些元素的每一类“图标圆圈箭头向上”、“图标球体”依此类推，用户可以在任何地方选择和编写代码，如果可能的话，可以在CKEditor区域中呈现元素，当然Twitter引导类应该包含为CSS链接。到目前为止，我所做的只是这段代码：

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

其中

insertHtml（）

将向编辑器写入类似

的内容，其中

某些类应采用用户在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();
    }
});

结果是相同的，意味着相同的错误
为什么不使用类似的对话框，它的功能几乎相同？@oleq可能是一个选项，但我有一个疑问，我如何处理这些项目的演示？我的意思是我很难在DOM ready上处理这个问题，所以我在这里有点迷茫尝试用%27替换“所以你得到了%27图标玻璃%27等，然后替换editor.insertHtml（值）；使用editor.insertHtml（unescape（value））@巴斯曼先生看到我的最新编辑，我试过没有success@ReynierTB不使用任何DOM就绪事件，图标是纯CSS。TB使用的字体中的字符是这些图标。
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"];

editor.insertHtml(unscape(value));