html - Building my first CKEditor plugin using Twitter Bootstrap Icons -

following tutorial i'm trying create first plugin ckeditor, main idea here allow users pick select element (just 1 @ time) of icons in here need build , don't know how select element contains every class of elements "icon-circle-arrow-up", "icon-globe" , on users can pick , write code wherever want , if it's possible render element on ckeditor area, of course twitter bootstrap class should include css links. have done far piece of code:

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

where inserthtml() write editor <i class="some_class">&nbsp;</i> , some_class should take value picked users in select element. or ideas in how continue here?

update 1 after research got this:

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");                 (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();     } }); 

but i'm getting error while trying insert element in editor:

syntaxerror: missing ) after argument list ckeditor.tools.callfunction(156,'​'); return false;

syntaxerror: missing ) in parenthetical void('​')

any ideas?

edit 2 tried this:

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"]; 

and too:

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"]; 

then in onclick() function change this:

editor.inserthtml(unscape(value)); 

and results same meaning same error