Yep, you need to override CuiToolbarBuilder and CUI.rte.ui.cui.Toolkit.
1. Please use CUI.rte.ui.cui.Toolkit to invoke the customized
createToolbarBuilder: function (hint) {
return new CUI.rte.ui.cui.CuiToolbarBuilderExt(); // customized toobar
},
2. In CuiToolbarBuilderExt add your new plug-in's in toolbar and popovers
Eg: ICONS (if required), inline and fullscreen in CUI.rte.ui.cui.DEFAULT_UI_SETTINGS
3. Update or add your new template for the popover in /libs/clientlibs/granite/richtext/js/Coral.templates.js ( here its hard coded with styles id you might need to add your new plug in name.)
Note: you dont have to override this class or plugin, its a method so you can define it any other classes. I added in the bottom of the CuiToolbarBuilder.
Eg:
window["Coral"]["templates"]["RichTextEditor"]["styles_pulldown"] = (function anonymous(data_0
/**/) {
var frag = document.createDocumentFragment();
var data = data_0;
var el0 = document.createElement("coral-buttonlist");
el0.className += " rte-toolbar-list";
var el1 = document.createTextNode("\r\n");
el0.appendChild(el1);
var iterated_1 = data_0;
for (var i1 = 0, ni1 = iterated_1.length; i1 < ni1; i1++) {
var data_1 = data = iterated_1[i1];
var el3 = document.createTextNode("\r\n ");
el0.appendChild(el3);
var el4 = document.createElement("button","coral-buttonlist-item");
el4.setAttribute("is", "coral-buttonlist-item");
el4.setAttribute("data-action", "styles#"+data_1["cssName"]);
el4.textContent = data_1["text"];
el0.appendChild(el4);
var el5 = document.createTextNode("\r\n");
el0.appendChild(el5);
}
var el6 = document.createTextNode("\r\n");
el0.appendChild(el6);
frag.appendChild(el0);
var el7 = document.createTextNode("\r\n");
frag.appendChild(el7);
return frag;
});
Thanks!
