This is a code for a WYSIWYG text editor I am working on. I'm working on the HTML to BBCODE and vice versa part now. It works fine in Fire Fox but not in Internet Explorer. Thoughts?
function textstyle(a) {
document.getElementById(a).style.visibility = 'visible';
document.getElementById('editor').contentWindow.focus();
}
function option(a,b) {
document.getElementById('editor').contentWindow.document.execCommand(a, false, b);
document.getElementById('editor').contentWindow.focus();
}
function button(a) {
document.getElementById('editor').contentWindow.document.execCommand(a, false, null);
document.getElementById('editor').contentWindow.focus();
}
var colorSelection;
function selectColor(selection) {
colorSelection = selection;
document.getElementById('colorSelector').style.left = 0 + document.getElementById(selection).offsetLeft + "px";
document.getElementById('colorSelector').style.top = 0 + document.getElementById(selection).offsetTop + document.getElementById(selection).offsetHeight + "px";
document.getElementById('colorSelector').style.visibility = 'visible';
return;
}
function changeColor(colorCode) {
document.getElementById('editor').contentWindow.document.execCommand(colorSelection, false, colorCode);
document.getElementById('colorSelector').style.visibility = 'hidden';
document.getElementById('editor').contentWindow.focus();
return;
}
function dismissmenu()
{
document.getElementById("colorSelector").style.visibility = 'hidden';
document.getElementById("fontlist").style.visibility = 'hidden';
document.getElementById("formatlist").style.visibility = 'hidden';
document.getElementById("sizelist").style.visibility = 'hidden';
}
function Start() {
document.getElementById('editor').contentWindow.document.designMode = "on";
document.getElementById('editor').contentWindow.document.execCommand("styleWithCSS", false, "false");
try {
document.getElementById('editor').contentWindow.document.execCommand("undo", false, null);
editormode = "true";
} catch (e) {
editormode = "false";
}
if (document.addEventListener) {
document.addEventListener("mouseup", dismissmenu, true);
document.getElementById("editor").contentWindow.document.addEventListener("mouseup", dismissmenu, true);
document.addEventListener("keypress", dismissmenu, true);
document.getElementById("editor").contentWindow.document.addEventListener("keypress", dismissmenu, true);
} else if (document.attachEvent) {
document.attachEvent("mouseup", dismissmenu, true);
document.getElementById("editor").contentWindow.document.attachEvent("mouseup", dismissmenu, true);
document.attachEvent("keypress", dismissmenu, true);
document.getElementById("editor").contentWindow.document.attachEvent("keypress", dismissmenu, true);
}
}
function switchEditorMode() {
if (editormode == "true") {
var replaceTagsByMode = function(html, editormode) {
var tags = {};
for (var i=0, a=['b', 'i', 'u', 'strike', 'sub', 'sup']; i<a.length; i++) {
tags[['<', a[i], '>'].join('')] = ['[', a[i], ']'].join('');
tags[['</', a[i], '>'].join('')] = ['[/', a[i], ']'].join('');
}
for (var html_tag in tags) {
if (tags.hasOwnProperty(html_tag)) {
html = html.replace.apply(
html, editormode ? [html_tag, tags[html_tag], 'g'] : [tags[html_tag], html_tag, 'g']);
}
}
return html;
};
var editor_body = document.getElementById('editor').contentWindow.document.body;
editor_body.innerHTML = replaceTagsByMode(editor_body.innerHTML, editormode);
editormode = "false";
} else {
var replaceTagsByMode = function(html, editormode) {
var tags = {};
for (var i=0, a=['b', 'i', 'u', 'strike', 'sub', 'sup']; i<a.length; i++) {
tags[['[', a[i], ']'].join('')] = ['<', a[i], '>'].join('');
tags[['[/', a[i], ']'].join('')] = ['</', a[i], '>'].join('');
}
for (var html_tag in tags) {
if (tags.hasOwnProperty(html_tag)) {
html = html.replace.apply(
html, editormode ? [html_tag, tags[html_tag], 'g'] : [tags[html_tag], html_tag, 'g']);
}
}
return html;
};
var editor_body = document.getElementById('editor').contentWindow.document.body;
editor_body.innerHTML = replaceTagsByMode(editor_body.innerHTML, editormode);
editormode = "true";
}
}