dhtmlXEditor: How to remove the toolbar?


Hi,



I use dhtmlXEditor and I need to display the content only, no formatting buttons.
How can I do that?



Thanks in advance,
Mitko



 


One more question:



Is it possible to set dhtmlXEditor to readonly mode, so I can use it in my readonly pages?



Thanks

I use dhtmlXEditor and I need to display the content only, no formatting buttons.

Editor can be intialized only with toolbar.

There is no opportunity to remove buttons.

>> Is it possible to set dhtmlXEditor to readonly mode, so I can use it in my readonly pages?

If the content is readonly why do you need to use editor ?

You can try to use the following approach to disable typing in editor:

var editor = new dhtmlXEditor(“editorObj”);

dhtmlxEvent(editor.edDoc, “keypress”, function(e){
        return false;
})

But in any case, it is better to use iframe or div instead of the editor if you want to display to readonly content.

@Mitko
I needed the same requirements as you and wanted to remove the toolbar also.
I ended up modifying dhtmlxEditor.js in the following way by adding an extra (boolean) parameter (blnToolbar) to the dhtmlXEditor function and if set to true, setting the toolbar height to 0.
The attachToolbar function is only called in the init function if blnToolbar is passed in true (or omitted completely).
It removes the toolbar but still gives you the shortcut functionality should you want it (eg CTRL-B to bold the selected text still works).

function dhtmlXEditor(id, skin, blnToolbar) {   
    this.skin = (skin!=null?skin:“dhx_blue”);
    this._tbH = 24; // toolbar height
    if (this.skin == “standard”) {
        this._tbH = 26;
    }
    //
    this.blnToolbar = ((blnToolbar) ? (blnToolbar) : (true));
    if (this.blnToolbar == false)
    {
        this._tbH = 0;
    }
    //</NICK MOD>
    this.iconsPath = “codebase/imgs/”;
    this.setIconsPath = function(path) {
        this.iconsPath = path;
    }
    this._genStr = function(w) {
        var s = “”; var z = “abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789”;
        for (var q=0; q<w; q++) { s = s + z.charAt(Math.round(Math.random() * z.length)); }
        return s;
    }
    this.init = function()
    {
        //
        if (this.blnToolbar == true)
        {
            this._attachToolbar();
        }
        //</NICK MOD>
    }

It seems to work for me so far … hope it helps.

Thanks Nick :slight_smile:

try this…

dhtmlXEditor.prototype.hideToolbar = function(){
	if (this.tb.base.parentNode.parentNode.style.display=='none') return;

	var tbHeight = this.tb.base.offsetHeight;
	this.tb.base.parentNode.parentNode.style.display = 'none';
	this.editor.style.height = (tbHeight+this.editor.offsetHeight)+'px';
}

Updated…

dhtmlXEditor.prototype.hideToolbar = function(){
   if (this.tb.base.parentNode.parentNode.style.display=='none') return;

   this.tb.base.parentNode.parentNode.style.display = 'none';
   this.adjustSize();
}

The above didn’t work for me; but this did:

myEditor.cell._stbHide(); //Hide std toolbar
myEditor.setSizes(); //Resizes the editor area

For all who tries to use Editor only to show content and disable editing:

  1. if you use it as a form part - just attach text (HTML text) to container item type
  2. if you use editor attached to any cell (layout, window, tabbar, accordion) - just attach txt document with the next you need