السلام عليكم
مرحباً شباب كيف حالكم
أنا حاير مع هذا السكربت هو جيد بس للأسف عندما يحول الكود إلى html يتبع الطرق القديمة ولا يعير أهمية لقوانين وإرشادات منظمة معايير الويب
كما هو الحال مع html 4 وأنا اريده يحول الكود إلى xhtml كيف أغيره ؟
الكود هو جافاسكربت :
imagesDir = "rte/icons/";
cssDir = "rte/styles/";
popupsDir = "rte/popups/";
WidthSize = 750;
HeightSize = 320;
FontSize_w = "width:120px";
document.write('<link rel="stylesheet" type="text/css" href="' +cssDir+ 'styles.css">\n');
/* ---------------------------------------------------------------------- *\
Toolbars.
\* ---------------------------------------------------------------------- */
var Fonts = new Array();
Fonts[0] = "Arial";
Fonts[2] = "Tahoma";
Fonts[3] = "Verdana";
Fonts[4] = "Courier New";
Fonts[6] = "Times New Roman";
Fonts[8] = "Traditional Arabic";
var FontSizes = new Array();
FontSizes[0] = "1";
FontSizes[1] = "2";
FontSizes[2] = "3";
FontSizes[3] = "4";
FontSizes[4] = "5";
FontSizes[5] = "6";
var buttonName = new Array();
//buttonName[1] = 'backcolor';
buttonName[0] = 'seperator';
buttonName[2] = 'forecolor';
buttonName[3] = 'bold';
buttonName[4] = 'italic';
buttonName[5] = 'underline';
buttonName[9] = 'seperator';
buttonName[10] = 'justifyright';
buttonName[11] = 'justifycenter';
buttonName[12] = 'justifyleft';
buttonName[13] = 'seperator';
buttonName[14] = 'orderedlist';
buttonName[15] = 'unorderedlist';
buttonName[16] = 'seperator';
buttonName[19] = 'insertimage';
buttonName[20] = 'createlink';
buttonName[21] = 'seperator';
var buttonName2 = new Array();
//buttonName2[7] = 'undo';
//buttonName2[8] = 'redo';
//buttonName2[9] = 'seperator';
buttonName2[14] = 'viewSource';
var ToolbarList = {
'bold': ['Bold', 'عريض', imagesDir + 'bold.gif', imagesDir + 'bold.gif'],
'italic': ['Italic', 'مائل', imagesDir + 'italics.gif', imagesDir + 'italics.gif'],
'underline': ['Underline', 'تحته خط', imagesDir + 'underline.gif', imagesDir + 'underline.gif'],
'seperator': ['', '', imagesDir + 'seperator.gif', imagesDir + 'seperator.gif'],
'justifyright': ['Justifyright', 'محاذاة لليمين', imagesDir + 'justify_right.gif', imagesDir + 'justify_right.gif'],
'justifycenter':['Justifycenter', 'توسيط', imagesDir + 'justify_center.gif', imagesDir + 'justify_center.gif'],
'justifyleft': ['Justifyleft', 'محاذاة لليسار', imagesDir + 'justify_left.gif', imagesDir + 'justify_left.gif'],
'orderedlist': ['InsertOrderedList', 'قائمة رقمية', imagesDir + 'list_ordered.gif', imagesDir + 'list_ordered.gif'],
'unorderedlist':['InsertUnorderedList','قائمة نقطية', imagesDir + 'list_unordered.gif', imagesDir + 'list_unordered.gif'],
'cut': ['Cut', 'قص', imagesDir + 'cut.gif', imagesDir + 'cut.gif'],
'copy': ['Copy', 'نسخ', imagesDir + 'copy.gif', imagesDir + 'copy.gif'],
'paste': ['Paste', 'لصق', imagesDir + 'paste.gif', imagesDir + 'paste.gif'],
'forecolor': ['ForeColor', 'لون الخط', imagesDir + 'forecolor.gif', imagesDir + 'forecolor.gif'],
'backcolor': ['BackColor', '', imagesDir + 'backcolor.gif', imagesDir + 'backcolor.gif'],
'undo': ['Undo', 'تراجع عن..', imagesDir + 'undo.gif', imagesDir + 'undo.gif'],
'redo': ['Redo', 'إعادة التراجع', imagesDir + 'redo.gif', imagesDir + 'redo.gif'],
'insertimage': ['InsertImage', 'إدراج صورة', imagesDir + 'insert_picture.gif', imagesDir + 'insert_picture.gif'],
'createlink': ['CreateLink', 'رابط', imagesDir + 'insert_hyperlink.gif', imagesDir + 'insert_hyperlink.gif'],
'viewSource': ['ViewSource', 'HTML code', imagesDir + 'view_source.gif', imagesDir + 'view_source.gif'],
'viewText': ['ViewText', 'ViewText', imagesDir + 'view_text.gif', imagesDir + 'view_text.gif'],
'selectfont': ['SelectFont', 'نوع الخط', imagesDir + 'select_font.gif', imagesDir + 'select_font.gif'],
'selectsize': ['SelectSize', 'حجم الخط', imagesDir + 'select_size.gif', imagesDir + 'select_size.gif']
};
/* Function: insertAdjacentHTML(), insertAdjacentText() & insertAdjacentElement()
---------------------------------------------------------------------------- */
if(typeof HTMLElement!='undefined' && !HTMLElement.prototype.insertAdjacentElement){
HTMLElement.prototype.insertAdjacentElement = function
(where,parsedNode){
switch (where){
case 'beforeBegin':
this.parentNode.insertBefore(parsedNode,this)
break;
case 'afterBegin':
this.insertBefore(parsedNode,this.firstChild);
break;
case 'beforeEnd':
this.appendChild(parsedNode);
break;
case 'afterEnd':
if (this.nextSibling)
this.parentNode.insertBefore(parsedNode,this.nextSibling);
else this.parentNode.appendChild(parsedNode);
break;
}
}
HTMLElement.prototype.insertAdjacentHTML = function
(where,htmlStr)
{
var r = this.ownerDocument.createRange();
r.setStartBefore(this);
var parsedHTML = r.createContextualFragment(htmlStr);
this.insertAdjacentElement(where,parsedHTML)
}
HTMLElement.prototype.insertAdjacentText = function
(where,txtStr)
{
var parsedText = document.createTextNode(txtStr)
this.insertAdjacentElement(where,parsedText)
}
};
// enabling toolbar in HTML
viewTextMode = 0;
function generate_code(textareaID) {
document.getElementById(textareaID).style.display = 'none';
var n = textareaID;
toolbarWidth = parseFloat(WidthSize) + 2;
// ===== Generate one
var toolbar;
toolbar ='<table border="0" class="toolbar1" cellpadding="0" cellspacing="0" style="width:' + toolbarWidth + 'px;"><tr><td style="width: 2px;"></td>';
// Create IDs for inserting Font Type and Size
toolbar += '<td width="65"><span id="FontSelect' + n + '"></span></td>';
toolbar += '<td width="58"><span id="FontSizes' + n + '"></span></td>';
for (var i = 0; i <= buttonName.length;) {
if (buttonName) {
var buttonObj = ToolbarList[buttonName];
var buttonID = buttonObj[0];
var buttonTitle = buttonObj[1];
var buttonImage = buttonObj[2];
var buttonImageRollover = buttonObj[3];
if (buttonName == "seperator") {
toolbar += '<td style="width: 8px;" align="center"><img src="' +buttonImage+ '" alt="" /></td>';
} else {
toolbar += '<td style="width: 22px"><img src="' +buttonImage+ '" border="0" title="' +buttonTitle+ '" id="' +buttonID+ '" class="button" onClick="formatText(this.id,\'' + n + '\');" onmouseover="if(className==\'button\'){className=\'buttonOver\'}; this.src=\'' + buttonImageRollover + '\';" onmouseout="if(className==\'buttonOver\'){className=\'button\'}; this.src=\'' + buttonImage + '\';" width="20" height="20"></td>';
}
}
i++;
}
var toolbar2;
toolbar2 = '<td></td>';
for (var j = 0; j <= buttonName2.length;) {
if (buttonName2[j]) {
var buttonObj = ToolbarList[buttonName2[j]];
var buttonID = buttonObj[0];
var buttonTitle = buttonObj[1];
var buttonImage = buttonObj[2];
var buttonImageRollover = buttonObj[3];
if (buttonName2[j] == 'seperator'){
toolbar2 = '<td style="width: 8px;" align="center"><img src="' +buttonImage+ '" border="0" alt="" /></td>';
} else if (buttonName2[j] == 'viewSource'){
toolbar2 += '<td style="width: 22px;">';
toolbar2 += '<span id="HTMLMode' + n + '"><img src="' +buttonImage+ '" border="0" title="' +buttonTitle+ '" id="' +buttonID+ '" class="button" onClick="formatText(this.id,\'' + n + '\');" onmouseover="if(className==\'button\'){className=\'buttonOver\'}; this.src=\'' +buttonImageRollover+ '\';" onmouseout="if(className==\'buttonOver\'){className=\'button\'}; this.src=\'' + buttonImage + '\';" unselectable="on" width="20" height="20" alt="" /></span>';
toolbar2 += '<span id="textMode' + n + '"><img src="' +imagesDir+ 'view_text.gif" border="0" title="viewText" id="ViewText" class="button" onClick="formatText(this.id,\'' + n + '\');" onmouseover="if(className==\'button\'){className=\'buttonOver\'}; this.src=\'' +imagesDir+ 'view_text_on.gif\';" onmouseout="if(className==\'buttonOver\'){className=\'button\'}; this.src=\'' +imagesDir+ 'view_text.gif\';" unselectable="on" width="20" height="20" alt="" /></span>';
toolbar2 += '</td>';
} else {
toolbar2 += '<td style="width: 22px;"><img src="' +buttonImage+ '" title="' +buttonTitle+ '" id="' +buttonID+ '" class="button" onClick="formatText(this.id,\'' + n + '\');" onmouseover="if(className==\'button\'){className=\'buttonOver\'}; this.src=\'' +buttonImageRollover+ '\';" onmouseout="if(className==\'buttonOver\'){className=\'button\'}; this.src=\'' + buttonImage + '\';" unselectable="on" width="20" height="20"></td>';
}
}
j++;
}
toolbar2 += '<td style="font: normal 8px verdana; text-align: center;">1</td></tr></table>';
// Create iframe which will be used for rich text editing
var iframe = '<iframe frameborder="0" id="wysiwyg' + n + '" style="width:' + WidthSize + 'px; height:' + HeightSize + 'px; border: 1px inset #CCCCCC;"></iframe>\n';
document.getElementById(n).insertAdjacentHTML("afterEnd", toolbar + toolbar2 + iframe);
outputFontSelect(n);
outputFontSizes(n);
hideFonts(n);
hideFontSizes(n);
document.getElementById("textMode" + n).style.display = 'none';
document.getElementById("wysiwyg" + n).style.height = HeightSize + "px";
document.getElementById("wysiwyg" + n).style.width = WidthSize + "px";
var content = document.getElementById(n).value;
var doc = document.getElementById("wysiwyg" + n).contentWindow.document;
// Write the textarea's content into the iframe
doc.open();
doc.write(content);
doc.close();
doc.body.contentEditable = true;
doc.designMode = "on";
// Update the textarea with content | submits form
var browserName = navigator.appName;
if (browserName == "Microsoft Internet Explorer") {
for (var idx=0; idx < document.forms.length; idx++) {
document.forms[idx].attachEvent('onsubmit', function() { updateTextArea(n); });
}
}
else {
for (var idx=0; idx < document.forms.length; idx++) {
document.forms[idx].addEventListener('submit',function OnSumbmit() { updateTextArea(n); }, true);
}
}
};
//Function : formatText()
//---------------------------------------------------------------------- */
function formatText(id, n, selected) {
document.getElementById("wysiwyg" + n).contentWindow.focus();
var formatIDs = new Array("FontSize","FontName","Bold","Italic","Underline","Subscript","Superscript","Strikethrough","Justifyleft","Justifyright","Justifycenter","InsertUnorderedList","InsertOrderedList","Indent","Outdent","ForeColor","BackColor","InsertImage","InsertTable","CreateLink");
for (var i = 0; i <= formatIDs.length;) {
if (formatIDs == id) {
var disabled_id = 1;
}
i++;
}
if (viewTextMode == 1 && disabled_id == 1) {
alert ("لا يمكنك إجراء تعديل لأنك في وضع عرض النص البرمجي");
} else {
if (id == "FontSize") {
document.getElementById("wysiwyg" + n).contentWindow.document.execCommand("FontSize", false, selected);
} else if (id == "FontName") {
document.getElementById("wysiwyg" + n).contentWindow.document.execCommand("FontName", false, selected);
} else if (id == 'ForeColor' || id == 'BackColor') {
var w = screen.availWidth;
var h = screen.availHeight;
var popW = 210, popH = 165;
var leftPos = (w-popW)/2, topPos = (h-popH)/2;
var currentColor = _dec_to_rgb(document.getElementById("wysiwyg" + n).contentWindow.document.queryCommandValue(id));
window.open(popupsDir + 'select_color.html?color=' + currentColor + '&command=' + id + '&wysiwyg=' + n,'popup','location=0,status=0,scrollbars=0,width=' + popW + ',height=' + popH + ',top=' + topPos + ',left=' + leftPos);
} else if (id == 'InsertImage') {
window.open(popupsDir + 'insert_image.html?wysiwyg=' + n,'popup','location=0,status=0,scrollbars=0,resizable=0,width=400,height=190');
} else if (id == 'InsertTable') {
window.open(popupsDir + 'create_table.html?wysiwyg=' + n,'popup','location=0,status=0,scrollbars=0,resizable=0,width=400,height=360');
} else if (id == 'CreateLink') {
window.open(popupsDir + 'insert_hyperlink.html?wysiwyg=' + n,'popup','location=0,status=0,scrollbars=0,resizable=0,width=300,height=110');
} else if (id == 'ViewSource') {
viewSource(n);
} else if (id == 'ViewText') {
viewText(n);
} else if (id == 'Help') {
window.open(popupsDir + 'about.html','popup','location=0,status=0,scrollbars=0,resizable=0,width=400,height=330');
} else {
document.getElementById("wysiwyg" + n).contentWindow.document.execCommand(id, false, null);
}
}
};
// Function: insertHTML()
// ---------------------------------------------------------------------- */
function insertHTML(html, n) {
var browserName = navigator.appName;
if (browserName == "Microsoft Internet Explorer") {
document.getElementById('wysiwyg' + n).contentWindow.document.selection.createRange().pasteHTML(html);
} else {
var div = document.getElementById('wysiwyg' + n).contentWindow.document.createElement("div");
div.innerHTML = html;
var node = insertNodeAtSelection(div, n);
}
}
//Function : insertNodeAtSelection()
//---------------------------------------------------------------------- */
function insertNodeAtSelection(insertNode, n) {
var sel = document.getElementById('wysiwyg' + n).contentWindow.getSelection();
var range = sel.getRangeAt(0);
sel.removeAllRanges();
range.deleteContents();
var container = range.startContainer;
var pos = range.startOffset;
range=document.createRange();
if (container.nodeType==3 && insertNode.nodeType==3) {
container.insertData(pos, insertNode.nodeValue);
range.setEnd(container, pos+insertNode.length);
range.setStart(container, pos+insertNode.length);
} else {
var afterNode;
if (container.nodeType==3) {
var textNode = container;
container = textNode.parentNode;
var text = textNode.nodeValue;
var textBefore = text.substr(0,pos);
var textAfter = text.substr(pos);
var beforeNode = document.createTextNode(textBefore);
afterNode = document.createTextNode(textAfter);
container.insertBefore(afterNode, textNode);
container.insertBefore(insertNode, afterNode);
container.insertBefore(beforeNode, insertNode);
container.removeChild(textNode);
} else {
afterNode = container.childNodes[pos];
container.insertBefore(insertNode, afterNode);
}
range.setEnd(afterNode, 0);
range.setStart(afterNode, 0);
}
sel.addRange(range);
};
// Description : convert a decimal color value to rgb hexadecimal
// Usage : var hex = _dec_to_rgb('65535'); // returns FFFF00
// ---------------------------------------------------------------------- */
function _dec_to_rgb(value) {
var hex_string = "";
for (var hexpair = 0; hexpair < 3; hexpair++) {
var myByte = value & 0xFF;
value >>= 8;
var nybble2 = myByte & 0x0F;
var nybble1 = (myByte >> 4) & 0x0F;
hex_string += nybble1.toString(16);
hex_string += nybble2.toString(16);
}
return hex_string.toUpperCase();
};
// Function : Font size & family
// ---------------------------------------------------------------------- */
function outputFontSelect(n) {
var FontSelectObj = ToolbarList['selectfont'];
var FontSelect = FontSelectObj[2];
var FontSelectOn = FontSelectObj[3];
Fonts.sort();
var FontSelectDropDown = new Array;
FontSelectDropDown[n] = '<table border="0" cellpadding="0" cellspacing="0"><tr><td onMouseOver="document.getElementById(\'selectFont' + n + '\').src=\'' + FontSelectOn + '\';" onMouseOut="document.getElementById(\'selectFont' + n + '\').src=\'' + FontSelect + '\';"><img src="' + FontSelect + '" id="selectFont' + n + '" onClick="showFonts(\'' + n + '\');" />';
FontSelectDropDown[n] += '<span id="Fonts' + n + '" class="dropdown" style="width: 120px;">';
for (var i = 0; i <= Fonts.length;) {
if (Fonts) {
FontSelectDropDown[n] += '<button type="button" onClick="formatText(\'FontName\',\'' + n + '\',\'' + Fonts + '\')\; hideFonts(\'' + n + '\');" onMouseOver="this.className=\'mouseOver\'" onMouseOut="this.className=\'mouseOut\'" class="mouseOut" style="width: 120px;"><table cellpadding="0" cellspacing="0" border="0"><tr><td align="left" style="font-family: verdana; font-size: 11px;">' + Fonts + '</td></tr></table></button><br>';
}
i++;
}
FontSelectDropDown[n] += '</span></td></tr></table>';
document.getElementById('FontSelect' + n).insertAdjacentHTML("afterBegin", FontSelectDropDown[n]);
};
function outputFontSizes(n) {
var FontSizeObj = ToolbarList['selectsize'];
var FontSize = FontSizeObj[2];
var FontSizeOn = FontSizeObj[3];
FontSizes.sort();
var FontSizesDropDown = new Array;
FontSizesDropDown[n] = '<table border="0" cellpadding="0" cellspacing="0"><tr>'
+ '<td onMouseOver="document.getElementById(\'selectSize' + n + '\').src=\'' + FontSizeOn + '\';" onMouseOut="document.getElementById(\'selectSize' + n + '\').src=\'' + FontSize + '\';">'
+ '<img src="' + FontSize + '" id="selectSize' + n + '" onClick="showFontSizes(\'' + n + '\');" >';
FontSizesDropDown[n] += '<span id="Sizes' + n + '" class="fontSizedropdown" style="'+ FontSize_w +';">';
for (var i = 0; i <= FontSizes.length;) {
if (FontSizes) {
FontSizesDropDown[n] += '<button type="button" onClick="formatText(\'FontSize\',\'' + n + '\',\'' + FontSizes + '\')\;hideFontSizes(\'' + n + '\');" onMouseOver="this.className=\'mouseOver\'" onMouseOut="this.className=\'mouseOut\'" class="mouseOut" style="'+ FontSize_w +';"><font size="' + FontSizes + '">size ' + FontSizes + '</font></button><br \>';
}
i++;
}
FontSizesDropDown[n] += '</span></td></tr></table>';
document.getElementById('FontSizes' + n).insertAdjacentHTML("afterBegin", FontSizesDropDown[n]);
};
function hideFonts(n) {
document.getElementById('Fonts' + n).style.display = 'none';
};
function hideFontSizes(n) {
document.getElementById('Sizes' + n).style.display = 'none';
};
function showFonts(n) {
if (document.getElementById('Fonts' + n).style.display == 'block') {
document.getElementById('Fonts' + n).style.display = 'none';
}
else {
document.getElementById('Fonts' + n).style.display = 'block';
document.getElementById('Fonts' + n).style.position = 'absolute';
}
};
function showFontSizes(n) {
if (document.getElementById('Sizes' + n).style.display == 'block') {
document.getElementById('Sizes' + n).style.display = 'none';
}
else {
document.getElementById('Sizes' + n).style.display = 'block';
document.getElementById('Sizes' + n).style.position = 'absolute';
}
};
// Function: viewing Mode
// ---------------------------------------------------------------------- */
function viewSource(n) {
var getDocument = document.getElementById("wysiwyg" + n).contentWindow.document;
var browserName = navigator.appName;
if (browserName == "Microsoft Internet Explorer") {
var iHTML = getDocument.body.innerHTML;
getDocument.body.innerText = iHTML;
} else {
var html = document.createTextNode(getDocument.body.innerHTML);
getDocument.body.innerHTML = "";
getDocument.body.appendChild(html);
}
document.getElementById('HTMLMode' + n).style.display = 'none';
document.getElementById('textMode' + n).style.display = 'block';
getDocument.body.style.fontSize = "11px";
getDocument.body.style.fontFamily = "Courier New";
viewTextMode = 1;
};
function viewText(n) {
var getDocument = document.getElementById("wysiwyg" + n).contentWindow.document;
var browserName = navigator.appName;
if (browserName == "Microsoft Internet Explorer") {
var iText = getDocument.body.innerText;
getDocument.body.innerHTML = iText;
} else {
var html = getDocument.body.ownerDocument.createRange();
html.selectNodeContents(getDocument.body);
getDocument.body.innerHTML = html.toString();
}
document.getElementById('textMode' + n).style.display = 'none';
document.getElementById('HTMLMode' + n).style.display = 'block';
getDocument.body.style.fontSize = "";
getDocument.body.style.fontFamily = "";
viewTextMode = 0;
};
// Function: updateTextArea
// --------------------------------------------------------------------------- */
function updateTextArea(n) {
document.getElementById(n).value = document.getElementById("wysiwyg" + n).contentWindow.document.body.innerHTML;
};