Post by Peter on Oct 2, 2006 9:39:14 GMT -8
Note: This is unfinished, I have not got time to finish it, but i'm posting it here incase there is another coder who would like to carry on with it, or get ideas to create their own version.
<script type="text/javascript">
<!--
/********************************************
*
* Open Source
* ProBoards Rich Text Editor (WYSIWYG)
*
* Created By Peter
* Copyright © 2005 - 2006 pixelDepth.net
* All rights reserved
*
* Note: This is unfinished
*
**********************************************/
var GLOBALS = new Object();
function rte(){
GLOBALS.RTE = this;
this.IE = false;
this.FF = false;
if(document.attachEvent){
this.IE = true;
} else if(document.addEventListener){
this.FF = true;
}
if(arguments[0] && arguments[0].constructor == Object){
this.background_color = arguments[0].background_color || "";
this.font_color = arguments[0].font_color || "";
this.font_family = arguments[0].font_family || "";
this.font_size = arguments[0].font_size || "";
this.border_color = arguments[0].border_color || "";
} else {
this.set_defaults();
}
if((this.IE || this.FF) && document.designMode){
this.setup_pb_area();
}
}
rte.prototype.gid = function(id){
return document.getElementById(id) || null;
}
rte.prototype.addEvent = function(obj, type, fn){
if(obj.attachEvent){
obj["e" + type + fn] = fn;
obj[type + fn] = function(){
obj["e" + type + fn](window.event);
}
obj.attachEvent("on" + type, obj[type + fn]);
} else {
obj.addEventListener(type, fn, false);
}
}
rte.prototype.create_element = function(elem, attr){
var elem = (typeof elem == "string")? document.createElement(elem) : elem;
for(key in attr){
if(key == "style"){
for(a in attr[key]){
elem.style = attr[key];
}
} else {
for(a in attr[key]){
elem.setAttribute(a, attr[key]);
}
}
}
return elem;
}
rte.prototype.exec = function(com, val){
GLOBALS.EDITOR.CW.document.execCommand(com, false, val);
GLOBALS.EDITOR.CW.focus();
}
rte.prototype.setup_pb_area = function(){
var ubbc = [];
var smileys = [];
if(document.postForm && document.postForm.message){
({
init: function(){
this.setup_smileys_tags();
this.remove_extras();
},
setup_smileys_tags: function(){
var links = document.getElementsByTagName("a");
for(a = 0; a < links.length; a ++){
if(links.item(a).href.match(/^javascript:add\(\W?/i)){
if(links.item(a).href.match(/^javascript:add\(\W?\[(.+?)\]/mi)){
links.item(a).id = RegExp.$1.split("=");
GLOBALS.RTE.addEvent(links.item(a), "click", function(evt){
switch(this.id.toLowerCase()){
case "b" :
GLOBALS.RTE.exec("bold", true);
break;
case "i" :
GLOBALS.RTE.exec("italic", true);
break;
case "s" :
GLOBALS.RTE.exec("strikethrough", true);
break;
case "sup" :
GLOBALS.RTE.exec("superscript", true);
break;
case "sub" :
GLOBALS.RTE.exec("subscript", true);
break;
case "u" :
GLOBALS.RTE.exec("underline", true);
break;
case "center" :
GLOBALS.RTE.exec("justifycenter", true);
break;
case "left" :
GLOBALS.RTE.exec("justifyleft", true);
break;
case "right" :
GLOBALS.RTE.exec("justifyright", true);
break;
case "blockquote" :
GLOBALS.RTE.exec("indent", true);
break;
}
var evt = (evt)? evt : event;
if(evt.preventDefault){
evt.preventDefault();
evt.stopPropagation();
} else {
evt.returnValue = false;
evt.cancelBubble = true;
}
return false;
});
} else {
GLOBALS.RTE.addEvent(links.item(a), "click", function(evt){
GLOBALS.RTE.exec("InsertImage", this.firstChild.src);
var evt = (evt)? evt : event;
if(evt.preventDefault){
evt.preventDefault();
evt.stopPropagation();
} else {
evt.returnValue = false;
evt.cancelBubble = true;
}
return false;
});
}
links.item(a).href = "#";
}
}
},
remove_extras: function(){
document.postForm.message.style.display = GLOBALS.RTE.gid("ta1").style.display = "none";
GLOBALS.MSG = document.postForm.message;
GLOBALS.MSG_CELL = GLOBALS.MSG.parentNode.parentNode;
}
}).init();
this.create_area();
}
}
rte.prototype.set_defaults = function(){
this.background_color = "#ffffff";
this.font_color = "#000000";
this.font_family = "Verdana";
this.font_size = 10;
this.border_color = "#000000";
}
rte.prototype.create_area = function(){
var frame_node = this.create_element("iframe", {
style: {
border: "1px solid " + this.border_color
},
set: {
id: "rte",
name: "rte",
frameborder: 0,
border: 0,
width: "80%",
height: 200,
src: ""
}
});
GLOBALS.MSG_CELL.insertBefore(frame_node, GLOBALS.MSG_CELL.firstChild);
GLOBALS.EDITOR = document.getElementById("rte");
this.addEvent(GLOBALS.EDITOR, "load", GLOBALS.RTE.write_html);
}
rte.prototype.write_html = function(){
var frame_html = "";
frame_html += '<html id="pbrte">\n';
frame_html += '<head>\n';
frame_html += '<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />\n';
frame_html += '<style type="text/css">\n\n';
frame_html += 'body {\n';
frame_html += '\tbackground: ' + GLOBALS.RTE.background_color + ';\n';
frame_html += '\tmargin: 0px;\n';
frame_html += '\tpadding: 3px;\n';
frame_html += '\tfont-family: ' + GLOBALS.RTE.font_family + ';\n';
frame_html += '\tfont-size: ' + GLOBALS.RTE.font_size + ';\n';
frame_html += '\tcolor: ' + GLOBALS.RTE.font_color + ';\n';
frame_html += '}\n\n';
frame_html += '</style>\n';
frame_html += '</head>\n'
frame_html += '<body>\n';
frame_html += '</body>\n';
frame_html += '</html>\n';
GLOBALS.EDITOR.CW = GLOBALS.EDITOR.contentWindow;
GLOBALS.EDITOR.CW.document.write(frame_html);
GLOBALS.EDITOR.CW.document.designMode = "on";
if(GLOBALS.RTE.FF){
GLOBALS.EDITOR.CW.document.close();
}
}
var rte = new rte({
background_color: "#ffffff",
font_color: "#000000",
border_color: "#A4B2BC"
});
//-->
</script>
To test it, just stick it into the global footer.
Like I said, it is unfinished, if I get time I wouldn't mind finishing it. There is quite a bit to do, the HTML to UBBC conversion (pretty simple), and then UBBC to HTML (again, simple). Also need to add support for some of the other tags, the basic ones are done.
If you do want to continue with it, I suggest reading the MIDAS specification, has some useful information
<script type="text/javascript">
<!--
/********************************************
*
* Open Source
* ProBoards Rich Text Editor (WYSIWYG)
*
* Created By Peter
* Copyright © 2005 - 2006 pixelDepth.net
* All rights reserved
*
* Note: This is unfinished
*
**********************************************/
var GLOBALS = new Object();
function rte(){
GLOBALS.RTE = this;
this.IE = false;
this.FF = false;
if(document.attachEvent){
this.IE = true;
} else if(document.addEventListener){
this.FF = true;
}
if(arguments[0] && arguments[0].constructor == Object){
this.background_color = arguments[0].background_color || "";
this.font_color = arguments[0].font_color || "";
this.font_family = arguments[0].font_family || "";
this.font_size = arguments[0].font_size || "";
this.border_color = arguments[0].border_color || "";
} else {
this.set_defaults();
}
if((this.IE || this.FF) && document.designMode){
this.setup_pb_area();
}
}
rte.prototype.gid = function(id){
return document.getElementById(id) || null;
}
rte.prototype.addEvent = function(obj, type, fn){
if(obj.attachEvent){
obj["e" + type + fn] = fn;
obj[type + fn] = function(){
obj["e" + type + fn](window.event);
}
obj.attachEvent("on" + type, obj[type + fn]);
} else {
obj.addEventListener(type, fn, false);
}
}
rte.prototype.create_element = function(elem, attr){
var elem = (typeof elem == "string")? document.createElement(elem) : elem;
for(key in attr){
if(key == "style"){
for(a in attr[key]){
elem.style = attr[key];
}
} else {
for(a in attr[key]){
elem.setAttribute(a, attr[key]);
}
}
}
return elem;
}
rte.prototype.exec = function(com, val){
GLOBALS.EDITOR.CW.document.execCommand(com, false, val);
GLOBALS.EDITOR.CW.focus();
}
rte.prototype.setup_pb_area = function(){
var ubbc = [];
var smileys = [];
if(document.postForm && document.postForm.message){
({
init: function(){
this.setup_smileys_tags();
this.remove_extras();
},
setup_smileys_tags: function(){
var links = document.getElementsByTagName("a");
for(a = 0; a < links.length; a ++){
if(links.item(a).href.match(/^javascript:add\(\W?/i)){
if(links.item(a).href.match(/^javascript:add\(\W?\[(.+?)\]/mi)){
links.item(a).id = RegExp.$1.split("=");
GLOBALS.RTE.addEvent(links.item(a), "click", function(evt){
switch(this.id.toLowerCase()){
case "b" :
GLOBALS.RTE.exec("bold", true);
break;
case "i" :
GLOBALS.RTE.exec("italic", true);
break;
case "s" :
GLOBALS.RTE.exec("strikethrough", true);
break;
case "sup" :
GLOBALS.RTE.exec("superscript", true);
break;
case "sub" :
GLOBALS.RTE.exec("subscript", true);
break;
case "u" :
GLOBALS.RTE.exec("underline", true);
break;
case "center" :
GLOBALS.RTE.exec("justifycenter", true);
break;
case "left" :
GLOBALS.RTE.exec("justifyleft", true);
break;
case "right" :
GLOBALS.RTE.exec("justifyright", true);
break;
case "blockquote" :
GLOBALS.RTE.exec("indent", true);
break;
}
var evt = (evt)? evt : event;
if(evt.preventDefault){
evt.preventDefault();
evt.stopPropagation();
} else {
evt.returnValue = false;
evt.cancelBubble = true;
}
return false;
});
} else {
GLOBALS.RTE.addEvent(links.item(a), "click", function(evt){
GLOBALS.RTE.exec("InsertImage", this.firstChild.src);
var evt = (evt)? evt : event;
if(evt.preventDefault){
evt.preventDefault();
evt.stopPropagation();
} else {
evt.returnValue = false;
evt.cancelBubble = true;
}
return false;
});
}
links.item(a).href = "#";
}
}
},
remove_extras: function(){
document.postForm.message.style.display = GLOBALS.RTE.gid("ta1").style.display = "none";
GLOBALS.MSG = document.postForm.message;
GLOBALS.MSG_CELL = GLOBALS.MSG.parentNode.parentNode;
}
}).init();
this.create_area();
}
}
rte.prototype.set_defaults = function(){
this.background_color = "#ffffff";
this.font_color = "#000000";
this.font_family = "Verdana";
this.font_size = 10;
this.border_color = "#000000";
}
rte.prototype.create_area = function(){
var frame_node = this.create_element("iframe", {
style: {
border: "1px solid " + this.border_color
},
set: {
id: "rte",
name: "rte",
frameborder: 0,
border: 0,
width: "80%",
height: 200,
src: ""
}
});
GLOBALS.MSG_CELL.insertBefore(frame_node, GLOBALS.MSG_CELL.firstChild);
GLOBALS.EDITOR = document.getElementById("rte");
this.addEvent(GLOBALS.EDITOR, "load", GLOBALS.RTE.write_html);
}
rte.prototype.write_html = function(){
var frame_html = "";
frame_html += '<html id="pbrte">\n';
frame_html += '<head>\n';
frame_html += '<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />\n';
frame_html += '<style type="text/css">\n\n';
frame_html += 'body {\n';
frame_html += '\tbackground: ' + GLOBALS.RTE.background_color + ';\n';
frame_html += '\tmargin: 0px;\n';
frame_html += '\tpadding: 3px;\n';
frame_html += '\tfont-family: ' + GLOBALS.RTE.font_family + ';\n';
frame_html += '\tfont-size: ' + GLOBALS.RTE.font_size + ';\n';
frame_html += '\tcolor: ' + GLOBALS.RTE.font_color + ';\n';
frame_html += '}\n\n';
frame_html += '</style>\n';
frame_html += '</head>\n'
frame_html += '<body>\n';
frame_html += '</body>\n';
frame_html += '</html>\n';
GLOBALS.EDITOR.CW = GLOBALS.EDITOR.contentWindow;
GLOBALS.EDITOR.CW.document.write(frame_html);
GLOBALS.EDITOR.CW.document.designMode = "on";
if(GLOBALS.RTE.FF){
GLOBALS.EDITOR.CW.document.close();
}
}
var rte = new rte({
background_color: "#ffffff",
font_color: "#000000",
border_color: "#A4B2BC"
});
//-->
</script>
To test it, just stick it into the global footer.
Like I said, it is unfinished, if I get time I wouldn't mind finishing it. There is quite a bit to do, the HTML to UBBC conversion (pretty simple), and then UBBC to HTML (again, simple). Also need to add support for some of the other tags, the basic ones are done.
If you do want to continue with it, I suggest reading the MIDAS specification, has some useful information
!
