htmlArea

A directory of browser-based WYSIWYG editors

  MAIN
INDEX
SEARCH
POSTS
WHO'S
ONLINE
LOG
IN

Home: htmlArea 3 (beta): htmlArea 2 & 3 archive (read only): htmlArea v3.0 - Add-Ons:
Have Colored HTML Code like DreamWeaver (editor_setmode update)


The htmlArea 2 & 3 editors have been discontinued.

We've made these forums available as a read-only reference and knowledge-base for people using or developing editors based on htmlArea 2 or 3.

Anyone who is interested in taking over version 2 or 3 is free to do so. All we ask is that you choose a new name that doesn't have "htmlarea" in it to avoid confusion with this site. We'll even give you a link in the directory to make it easier for people to find you. If you are developing or hosting an htmlArea based-editor under a new name, please submit it to our directory.

 


aKhEnAtHoN
New User

Apr 15, 2004, 10:43 AM

Post #1 of 3 (22168 views)
Shortcut
Have Colored HTML Code like DreamWeaver (editor_setmode update) Can't Post

 This code is an update that allows you to see the HTML code with colors like on DreamWeaver. You have to replace the function editor_setmode with mine, so juste make an copy/paste on this function (at line 665)...

Enjoy Wink, akh

Code
 function editor_setmode(objname, mode) { 
var config = document.all[objname].config;
var editor_obj = document.all["_" +objname + "_editor"];
// wait until document is fully loaded
if (document.readyState != 'complete') {
setTimeout(function() { editor_setmode(objname,mode) }, 25);
return;
}
// define different editors
var TextEdit = '<iframe ID="_' +objname+ '_editor" value="0" style="width:' +editor_obj.style.width+ '; height:' +editor_obj.style.height+ ';"></iframe>';
var RichEdit = '<iframe ID="_' +objname+ '_editor" value="1" style="width:' +editor_obj.style.width+ '; height:' +editor_obj.style.height+ ';"></iframe>';
// src="' +_editor_url+ 'popups/blank.html" //
// Switch to TEXTEDIT mode
//
if (mode == "textedit" || editor_obj.value == "1") {
config.mode = "textedit"; var editdoc = editor_obj.contentWindow.document;
var contents = editdoc.body.createTextRange().htmlText;
editor_obj.outerHTML = TextEdit;

editor_obj = document.all["_" +objname + "_editor"];
contents = FormatageHTML(contents);
var editdoc = editor_obj.contentWindow.document;
editdoc.open();
editdoc.write(contents);
editdoc.close();

editor_updateToolbar(objname, "disable"); // disable toolbar items
// set event handlers
editor_obj.onkeydown = function() { editor_event(objname); }
editor_obj.onkeypress = function() { editor_event(objname); }
editor_obj.onkeyup = function() { editor_event(objname); }
editor_obj.onmouseup = function() { editor_event(objname); }
editor_obj.ondrop = function() { editor_event(objname, 100); } // these events fire before they occur
editor_obj.oncut = function() { editor_event(objname, 100); }
editor_obj.onpaste = function() { editor_event(objname, 100); }
editor_obj.onblur = function() { editor_event(objname, -1); }
editor_updateOutput(objname);
editor_focus(editor_obj);
}
//
// Switch to WYSIWYG mode
//
else {
config.mode = "wysiwyg";
if (mode == 'init') {
contents = document.all[objname].value;
} else {
var contents = editor_obj.contentWindow.document.body.innerText;
}
// create editor
editor_obj.outerHTML = RichEdit;
editor_obj = document.all["_" +objname + "_editor"];
// get iframe document object // create editor contents (and default styles for editor)
var html = "";
html += '<html><head>\n';
if (config.stylesheet) {
html += '<link href="' +config.stylesheet+ '" rel="stylesheet" type="text/css">\n';
}
html += '<style>\n';
html += 'body {' +config.bodyStyle+ '} \n';
for (var i in config.fontstyles) {
var fontstyle = config.fontstyles;
if (fontstyle.classStyle) {
html += '.' +fontstyle.className+ ' {' +fontstyle.classStyle+ '}\n';
}
}
html += '</style>\n'
+ '</head>\n'
+ '<body contenteditable="true" topmargin=1 leftmargin=1'
// still working on this
// + ' oncontextmenu="parent.editor_cMenu_generate(window,\'' +objname+ '\');"'
+'>'
+ contents
+ '</body>\n'
+ '</html>\n';
// write to editor window
var editdoc = editor_obj.contentWindow.document;
editdoc.open();
editdoc.write(html);
editdoc.close();
editor_updateToolbar(objname, "enable"); // enable toolbar items // store objname under editdoc
editdoc.objname = objname;
// set event handlers
editdoc.onkeydown = function() { editor_event(objname); }
editdoc.onkeypress = function() { editor_event(objname); }
editdoc.onkeyup = function() { editor_event(objname); }
editdoc.onmouseup = function() { editor_event(objname); }
editdoc.body.ondrop = function() { editor_event(objname, 100); } // these events fire before they occur
editdoc.body.oncut = function() { editor_event(objname, 100); }
editdoc.body.onpaste = function() { editor_event(objname, 100); }
editdoc.body.onblur = function() { editor_event(objname, -1); }
// bring focus to editor
if (mode != 'init') { // don't focus on page load, only on mode switch
editor_focus(editor_obj);
}
} // Call update UI
if (mode != 'init') { // don't update UI on page load, only on mode switch
editor_event(objname);
}
}function FormatageHTML(texte) {
// Variables Mémoire
var len = texte.length;
var res = "<pre>";
var c_tab = "";

var txt_open = false;
var txt_spec_open = false;
var balise_open = false;
var bal_txt = false;
var bal_quote = false;
var bal_script = false;

// Définition des styles
var font_balise = '<font style="font-size: 12px;" face="Verdana, Arial, Helvetica, sans-serif" color="#339999"><b>';
var fin_font_balise = '</b></font>';
var font_txt = '</b><font style="font-size: 12px;" face="Verdana, Arial, Helvetica, sans-serif" color="#0033FF">';
var fin_font_txt = '</font><b>';
var font_texte = '<font style="font-size: 12px;" face="Verdana, Arial, Helvetica, sans-serif" color="#000000">';
var fin_font_texte = '</font>';
var font_texte_special = '<font style="font-size: 12px;" face="Verdana, Arial, Helvetica, sans-serif" color="#000000"><b>';
var fin_font_texte_special = '</b></font>';
var font_script = '<font style="font-size: 12px;" face="Verdana, Arial, Helvetica, sans-serif" color="#CC0000"><i>';
var fin_font_script = '</i></font>';
// Var Paramétres
var tab = "&nbsp;&nbsp;";
// algorithme de calcul
for (i=0; i<len; i++) {
car = texte.substr(i, 1);
if (bal_script) {
// Mode Parser JAVASCRIPT
if (car=="<" && texte.substr(i+1, 7).toLowerCase()=="/script") {
bal_script = false;
res += "&lt;/SCRIPT&gt;<br>"+fin_font_script;
i = i + 8;
} else {
if (car=="\n") {
res += "<br>\n"+c_tab;
} else {
res += car;
}
}
} else {
// Mode Parser HTML
if (car=="<") {
// Fermeture des anciennes balises
if (txt_spec_open) {
txt_spec_open = false;
res += fin_font_texte_special;
}
if (txt_open) {
txt_open = false;
res += fin_font_texte;
}
// Mode Script
if (texte.substr(i+1, 6).toLowerCase()=="script") {
bal_script = true;
res += font_script+"&lt;";
c_tab += tab;
} else {
// Balise HTML
if (texte.substr(i+1, 1)!="/") {
c_tab += tab;
res += c_tab;
} else {
res += "<br>"+c_tab;
c_tab = c_tab.substr(0, c_tab.length-tab.length);
}
// Ouverture de balise
balise_open = true;
res += font_balise+"&lt;";
}
} else {
if(car==">") {
balise_open = false;
if (bal_quote || bal_txt) {
res += fin_font_txt;
bal_txt = false;
bal_quote = false;
}
if (texte.substr(i+1, 2)!="</") {
res += "&gt;"+fin_font_balise+"<br>";
} else {
res += "&gt;"+fin_font_balise;
}
} else {
if (!balise_open) {
// Debut de caractére spécial
if (car=="&") {
if (!txt_spec_open) {
txt_spec_open = true;
res += font_texte_special;
car = "&amp;";
}
}
// Fin de caractére spécial
if (car==";" && txt_spec_open) {
txt_spec_open = false;
res += car+fin_font_texte_special;
car = "";
}
// Texte Normal
if (car.charCodeAt(0)!=13 && car.charCodeAt(0)!=10) {
if (!txt_open) {
txt_open = true;
res += c_tab+tab+font_texte;
}
}
} else {
if (bal_quote) {
if (car=='"') {
res += '"' +fin_font_txt;
car = "";
bal_quote = false;
}
} else {
if (car=='=' && bal_txt==false) {
res += "="+font_txt;
car = "";
bal_txt = true;
}
if (car==" " && bal_txt==true) {
res += fin_font_txt+" ";
car = "";
bal_txt = false;
}
if (car=='"') {
if (bal_txt) {
bal_txt = false;
bal_quote = true;
} else {
res += font_txt;
bal_quote = true;
}
}
}
}
res += car;
}
}
}
}
return res;
}

Attachments: editor.js (50.4 KB)


Wildcard
Novice

Apr 15, 2004, 3:11 PM

Post #2 of 3 (22154 views)
Shortcut
Re: [aKhEnAtHoN] Have Colored HTML Code like DreamWeaver (editor_setmode update) [In reply to] Can't Post

This sounds really good. Haven't been able to test it though. I can only find a "editor.js" for version 2 of HTMLarea so I guess that is the version this is for. Can it be modified for use in version 3 too?


eisa
User

May 5, 2004, 12:27 PM

Post #3 of 3 (21809 views)
Shortcut
Re: [Wildcard] Have Colored HTML Code like DreamWeaver (editor_setmode update) [In reply to] Can't Post

Yes, this is for version 2, which means this code is posted in the wrong forum. Tested it know and it colors the code, but I got problems when I tried to edit the text and code in code-mode.

http://www.savio.no/htmlarea/example.asp | Webdesign


(This post was edited by eisa on May 5, 2004, 5:18 PM)

 
 
 


Search for (options)