I;m creating a text editor, and I'm using document.execCommand for styling purposes on my div, which is contend Editable. All other functions like underlining, italicizing, justifying, etc.. work, except for bold. I can't figure out why. Here is the code I'm using:
function makeEditableAndHighlight(styleType, optParam) {
if(typeof(optParam) == "undefined" || optParam == null){
optParam = null;
}
var range, sel = window.getSelection();
if (sel.rangeCount && sel.getRangeAt) {
range = sel.getRangeAt(0);
}
document.designMode = "on";
if (range) {
sel.removeAllRanges();
sel.addRange(range);
}
// Use HiliteColor since some browsers apply BackColor to the whole block
/*if (!document.execCommand("HiliteColor", false, colour)) {
document.execCommand("BackColor", false, colour);
}*/
document.execCommand(styleType, false, optParam);
document.designMode = "off";
}
function changeTextStyle(styleType, optParam){
if(typeof(optParam) == "undefined" || optParam == null){
optParam = null;
}
var range;
if (window.getSelection) {
// IE9 and non-IE
try {
/*if (!document.execCommand("BackColor", false, colour)) {
makeEditableAndHighlight(colour);
}*/
if (!document.execCommand(styleType, false, optParam)) {
makeEditableAndHighlight(styleType, optParam);
}
} catch (ex) {
makeEditableAndHighlight(styleType, optParam)
}
} else if (document.selection && document.selection.createRange) {
// IE <= 8 case
range = document.selection.createRange();
range.execCommand(styleType, false, optParam);
//range.execCommand("BackColor", false, colour);
}
}
I call it by using changeTextStyle("bold");
or whatever style inside the quotation marks.
This code has been working perfectly for every other style command, except bold. I'm calling it through the click of a button and it applies the style to the contenteditable div. I did get it to work once, and that was if the all the div contents were selected, other than that it won't work at all. any help would be nice, thanks!
font-weight
of<b>
tags is set to anything that is not 700.