JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdn.ckeditor.com/4.5.7/standard/ckeditor.js"></script>
<textarea id="container">How are you!</textarea>
JavaScript
var InternPagesSelectBox = [['', ''], ['Main page', 'main.html']];
(function () {
function refreshItems(sel) {
sel.clear();
sel.items && sel.items.forEach(function (itm) {
sel.add(itm[0], itm[1]);
});
}
CKEDITOR.plugins.add('internpage', {
lang : [CKEDITOR.lang.detect()]
});
CKEDITOR.plugins.setLang('internpage', 'en', {
internpage : {
internpage : 'Internal page'
}
});
CKEDITOR.on('dialogDefinition', function (a) {
var b = a.data.name,
c = a.data.definition,
d = a.editor;
if (b == 'link') {
var e = c.getContents('info');
e.add({
type : 'select',
id : 'intern',
label : 'Select page',
'default' : '',
style : 'width:100%',
items : InternPagesSelectBox,
onChange : function () {
var f = CKEDITOR.dialog.getCurrent();
f.setValueOf('info', 'url', this.getValue());
f.setValueOf('info', 'protocol', !this.getValue() ? 'http://' : '');
},
setup : function (f) {
this.allowOnChange = false;
refreshItems(this);
this.setValue(f.url ? f.url.url : '');
this.allowOnChange = true;
}
}, 'browse');
c.onLoad = function () {
var f = this.getContentElement('info', 'intern');
f.reset();
};
}
});
})();
var k = 0;
CKEDITOR.config.extraPlugins = "internpage"
editor = CKEDITOR.replace('container')
editor.addCommand("mySimpleCommand", {
exec : function (edt) {
InternPagesSelectBox.push(['file' + k, 'url' + k]);
k++;
}
});
editor.ui.addButton('SuperButton', {
label : "Click me",
command : 'mySimpleCommand',
toolbar : 'insert',
icon : 'https://avatars1.githubusercontent.com/u/5500999?v=2&s=16'
});