The following is the client-side JS that Servoy uses to configure the html editor. Pretty easy to change up the code to configure the toolbar buttons (and button groups) using the YUI guide you referenced:
Servoy.HTMLEdit = {
htmlEditor: null,
attach: function(wrapperId, editorId) {
var Dom = YAHOO.util.Dom,
Event = YAHOO.util.Event;
var myConfig = {
width: '100%',
animate: false,
dompath: true
};
var myEditor = new YAHOO.widget.Editor(editorId, myConfig);
myEditor.on('toolbarLoaded', function() {
var codeConfig = {
type: 'push',
label: 'Edit HTML Code',
value: 'editcode'
};
this.toolbar.addButtonToGroup(codeConfig, 'insertitem');
Dom.setStyle(this.toolbar._titlebar, 'display', 'none');
Dom.setStyle(this.dompath, 'display', 'none');
this.on('editorContentLoaded', function() {
var toolbarHeight = document.getElementById(editorId + '_toolbar').offsetHeight;
if (Servoy.Utils.isChrome || Servoy.Utils.isSafari) {
var rows = 3;
var toolbarWidth = document.getElementById(editorId + '_toolbar').offsetWidth;
if (toolbarWidth > 1000) {
rows = 1;
} else if (toolbarWidth > 550) {
rows = 2;
}
toolbarHeight = rows * 51;
}
document.getElementById(editorId + '_editor').style.height = (document.getElementById(wrapperId).clientHeight - toolbarHeight) + "px";
}, this, true);
this.toolbar.on('editcodeClick', function() {
this.saveHTML();
var element = document.getElementById(wrapperId);
var width = element.offsetWidth;
var height = element.offsetHeight;
var fc = this.get('element').previousSibling,
el = this.get('element');
Dom.setStyle(fc, 'position', 'absolute');
Dom.setStyle(fc, 'top', '-9999px');
Dom.setStyle(fc, 'left', '-9999px');
myEditor.get('element_cont').removeClass('yui-editor-container');
Dom.setStyle(el, 'visibility', 'inherit');
Dom.setStyle(el, 'top', '');
Dom.setStyle(el, 'left', '');
Dom.setStyle(el, 'width', (width - 10) + 'px');
Dom.setStyle(el, 'height', (height - 10) + 'px');
Dom.setStyle(el, 'border-width', '0px');
return false;
}, this, true);
this.on('editorWindowBlur', function(ev) {
this.saveHTML();
var element = this.get('element');
element.onsubmit();
return false;
}, this, true);
}, myEditor, true);
var elem = myEditor.get('element');
if (elem.readOnly || elem.disabled) {
setTimeout(function() {
myEditor.set('disabled', true);
}, 1000);
}
myEditor.render();
Servoy.HTMLEdit.htmlEditor = myEditor;
}
};
The tricky part is how to inject your new code. Servoy stores the original code in one of their jars (application_server/lib/j2dbdev.jar/com/servoy/j2db/server/headlessclient/servoy.js) and pushes to the browser in a “servoy.js” file. Every major page refresh entails this file getting pushed out to the browser again.
Probably the most bullet proof approach is to use webutils plugin to insert this code on the onShow() event of every major form that you navigate to. Not sure though as we run SWC in an iframe on a “wrapper” page and add our own event listeners to SWC from there.
If you need help implementing, let us know. Pretty simple js stuff once you have all the pieces figured out.
