Editor Font Color

Suite and Optimus Suite 5
#1

Is there a way to add a button on the editor toolbar that will change the font color?

Thanks

#2

There is not a ready solution.

If you use extended initialization (with dhtmlxtoolbar), you may use toolbar API to add the new button:

var toolbar = editor.tb;

editor.edDoc is the document object that you can apply execCommand method.

#3

Thanks Alexandra. I was able to add the button to the toolbar, but I can not get the execCommand to work. Here’s my code.
function addButton(){
_toolbar = _editor.tb;
_toolbar.addButton(“changeColor”, 0, “COLOR”, “”, “”);
_toolbar.attachEvent(“onClick”, toolbarClicked);
}

function toolbarClicked(id) {
_editor.edDoc.execCommand(“ForeColor”, false, “#FF0033”);
//also tried the following
var cRange = _editor.edDoc.selection.createRange();
cRange.execCommand(“ForeColor”, false, “#FF0033”);

    }

Also, if I add a twoStateButton to the toolbar and click it, I get a javascript error in dhtmlxeditor_ext.js line 39.

Thanks for the help.

Scott

#4

Try to call runCommand (private editor method)

_toolbar.attachEvent(“onClick”, function(id){
if(id==“changeColor”)
editor.runCommand(“ForeColor”,"#FF0033");
});
})

#5

Thanks again Alexandra. That worked for me. One thing to note.
If I add the toolbar button with text,

_toolbar.addButton(“changeColor”, 0, “SHOW TEXT”, “h1.gif”, “h1.gif”);

the runCommand will move the cursor to the top of editor, and only change color once you start typing.

If I add the toolbar button without text,

_toolbar.addButton(“changeColor”, 0, “”, “h1.gif”, “h1.gif”);

the selected text will change color as it should.

Just thought I would mention that. At this point I’ll just use an image like in MS Word, and leave the text blank.

Thanks