How to remove some edit buttons in editable HTMLArea?

[Westy]

Is it possible to remove some of the default edit buttons that appear in the toolbar at the top of a webclient HTMLArea field when it is set to editable? If so, how can this be done?

I realize that this feature is from the YUI Editor at http://developer.yahoo.com/yui/examples ... index.html. They provide good documentation on how to edit the toolbar from within a html page. However, I do not see how this can be done from within the Servoy webclient environment. Any help would be greatly appreciated.

The only reference that I see to the editable HTMLArea in the Servoy Wiki is:

"Due to the added support for an editable HTMLArea in the Web Client, end users will now see an HTML Editor in the Web Client if the HMTLArea is left enabled in the Solution design, whereas in previous versions it would show the raw content of the dataprovider."

Dean

[david]

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:

Code: Select all

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.

[Westy]

David, thank you very much for the reply. I am surprised that this question has not come up before. In our current situation, we are limited to having the editable HTMLArea be no more that 7 inches wide. At that width the default menu items take up three lines; which is too much. I will do some experimenting based on your suggestions.

Dean

[david]

A good way to test your round trip is to remove these lines:

Code: Select all

var codeConfig = {
   type: 'push',
   label: 'Edit HTML Code',
   value: 'editcode'
};
this.toolbar.addButtonToGroup(codeConfig, 'insertitem');

This will get rid of the last button in the toolbar:

html toolbar.png

Here is some sample code you can run in your browser developer console. It removes a button at xx slot:

Code: Select all

Servoy.HTMLEdit.htmlEditor.toolbar.destroyButton(Servoy.HTMLEdit.htmlEditor.toolbar.getButtonByIndex(15))

Run it a few times and watch all the buttons disappear one by one

chrome tools.png

Lastly, you can paste the entire code block (from first post, modified how you see fit) into developer tools console, hit enter, and then slightly resize the browser window to get the code to run. Fast way to test your toolbar code iterations.