CKEDITOR.plugins.add("variables", {
  init: function(editor) {
    console.log("variables.init")

    editor.addCommand("insertVariable", {
     allowedContent: "span[contenteditable](*)"
     ,requiredContent: "span[contenteditable](*)"
     ,exec: function (editor) {
       console.log("insertVariable.exec");
       editor.insertElement(CKEDITOR.dom.element.createFromHtml('<span class="variable" contenteditable="false">[ variable ]</span>'));
     }
    })

    editor.addCommand("insertVariableSelected", {
      allowedContent: "span[contenteditable](*)"
      ,requiredContent: "span[contenteditable](*)"
      ,exec: function(editor, id) {
        console.log("insertVariableSelected.exec(id: " + id + ")")
        editor.insertElement(CKEDITOR.dom.element.createFromHtml('<span class="variable" contenteditable="false">[ ' + id + ' ]</span>'));
      }
    })

    editor.ui.addRichCombo("InsertVariableSelect", {
      label: "Variables"
      ,title: "Insert variable"
      ,multiSelect: false
      ,toolbar: "others"
      ,init: function () {
        console.log("InsertVariableSelect.init")

        var rich_combo = this
        
        rich_combo.add("foo", "foo", "foo")
        rich_combo.add("boo", "boo", "boo")
        rich_combo.add("goo", "goo", "goo")
      }
      ,onClick: function(id) {
        console.log("InsertVariableSelect.onClick(id: " + id + ")")
        editor.execCommand("insertVariable")
        editor.execCommand("insertVariableSelected", id)
      }
    })
  }
})