إنشاء محرر متقدم WYSIWYG من الصفر (الجزء 4)
مرسل: 04 أكتوبر 2008, 07:45
هذا الجزء الرابع من سلسه "إنشاء محرر متقدم WYSIWYG من الصفر" , وفي هذا الجزء سنمر على كيفية التغلب على المشاكل مع المتصفحات المختلفه بالاضافه لبعض الزيادات مثل لوحة ألوان جديده و إضافة إبتسامات وامكانية تغيير حجم الخط و تعديل حجم المحرر من قبل المتصفح ببساطه ..
لنبدأ :
نريد أن نجعل المحرر يعمل مع كل المتصفحات او لنقل اغلبها بلا مشاكل , وسوف نصلح مشاكل ال HTML وسوف نستيطع تصدير المحتوى ك BBcodes ! كيف ؟
سوف نقوم بتعطيل CSS ونستعمل اكواد html عاديه كـ
بدلاً من
التي تستخدم غالبا في متصفحات المبنيه على Gecko ( مثل Firefox)
وسوف نستخدم هذا الكود في داله onload وهي الداله التي يتم تشغيلها اثناء فتح الصفحه .
كما ترى قمنا بتعطيل css في كل من Gecko و IE و Opera لكن لم يتم في safari و google chrome
وهذا الكود النهائي المعدل الخاص بنا من الفكره السابقه :
ميزة الإبتسامات:
لأن الابتسامات ماهي إلا صور , سوف نستخدم InsertImage التي شرحناها سابقاً لإضافة صوره داخل محرر, وهي تتطلب رابط الصوره وتنفذ العمليه كالتالي :
لوحة ألوان تعمل مع اغلب المتصفحات:
هذه الداله مقتبسه من phpBB3 وتقوم بإنشاء لوحة ألوان ويب, فقط قم بنسخها ولصقها ..
وضع هذا الكود التالي بأي مكان تريد إظهار لوحة الألوان فيه :
ميزه حجم الخط :
وهذه قائمه بالأحجام للإختيار منها :
تغيير حجم المحرر ببساطه :
داله بسيطه تعطيك الإمكانيه لوضع ازرار لزياده وتقليص المحرر وهي داله تعمل مع اغلب المتصفحات
وتضع هذا الكود للزياده :
وهذا للتقليص :
___________
المصادر:
Almsamim group - Home
لنبدأ :
نريد أن نجعل المحرر يعمل مع كل المتصفحات او لنقل اغلبها بلا مشاكل , وسوف نصلح مشاكل ال HTML وسوف نستيطع تصدير المحتوى ك BBcodes ! كيف ؟
سوف نقوم بتعطيل CSS ونستعمل اكواد html عاديه كـ
كود: تحديد الكل
<b></b>
كود: تحديد الكل
<span style="font-weight:bold;"></span>
وسوف نستخدم هذا الكود في داله onload وهي الداله التي يتم تشغيلها اثناء فتح الصفحه .
كود: تحديد الكل
// disable CSS in Geko ,IE and opera
try {
// Try new Gecko method
Editor.execCommand("styleWithCSS", 0, false);
} catch (e) {
// Use old method
try {Editor.execCommand("useCSS", 0, true);} catch (e) {}
}
وهذا الكود النهائي المعدل الخاص بنا من الفكره السابقه :
كود: تحديد الكل
window.onload = function() {
Editor = document.getElementById('box').contentWindow.document;
Editor.designMode = "on";
// disable CSS in Geko ,IE and opera
try {
// Try new Gecko method
Editor.execCommand("styleWithCSS", 0, false);
} catch (e) {
// Use old method
try {Editor.execCommand("useCSS", 0, true);} catch (e) {}
}
}
لأن الابتسامات ماهي إلا صور , سوف نستخدم InsertImage التي شرحناها سابقاً لإضافة صوره داخل محرر, وهي تتطلب رابط الصوره وتنفذ العمليه كالتالي :
كود: تحديد الكل
function AddSmileyIcon(imagePath){
Editor.execCommand('InsertImage', false, imagePath);
}
هذه الداله مقتبسه من phpBB3 وتقوم بإنشاء لوحة ألوان ويب, فقط قم بنسخها ولصقها ..
كود: تحديد الكل
// print colour palette in a table
function colorPalette(dir, width, height)
{
var r = 0, g = 0, b = 0;
var numberList = new Array(6);
var color = '';
numberList[0] = '00';
numberList[1] = '40';
numberList[2] = '80';
numberList[3] = 'BF';
numberList[4] = 'FF';
document.writeln('<table cellspacing="1" cellpadding="0" border="0">');
for (r = 0; r < 5; r++)
{
if (dir == 'h')
{
document.writeln('<tr>');
}
for (g = 0; g < 5; g++)
{
if (dir == 'v')
{
document.writeln('<tr>');
}
for (b = 0; b < 5; b++)
{
color = String(numberList[r]) + String(numberList[g]) + String(numberList[b]);
document.write('<td bgcolor="#' + color + '" style="width: ' + width + 'px; height: ' + height + 'px;">');
document.write('<a href="#" onClick="Colour(\'#' + color + '\'); return false;"><img src="images/spacer.gif" width="' + width + '" height="' + height + '" alt="#' + color + '" title="#' + color + '" /></a>');
document.writeln('</td>');
}
if (dir == 'v')
{
document.writeln('</tr>');
}
}
if (dir == 'h')
{
document.writeln('</tr>');
}
}
document.writeln('</table>');
}
كود: تحديد الكل
<script language="JavaScript">
colorPalette('h', 15, 10);
</script>
ميزه حجم الخط :
كود: تحديد الكل
function Select(selectname)
{
var cursel = document.getElementById(selectname).selectedIndex;
if (cursel != 0) {
var selected = document.getElementById(selectname).options[cursel].value;
Editor.execCommand(selectname, false, selected);
document.getElementById(selectname).selectedIndex = 0;
}
document.getElementById("box").contentWindow.focus();
}
كود: تحديد الكل
<select unselectable="on" id="fontsize" onchange="Select(this.id);">
<option value="Size">Size</option>
<option value="1">Tiny</option>
<option value="2">Small</option>
<option value="3">Normal</option>
<option value="5">Large</option>
<option value="7">Huge</option>
</select>
داله بسيطه تعطيك الإمكانيه لوضع ازرار لزياده وتقليص المحرر وهي داله تعمل مع اغلب المتصفحات
كود: تحديد الكل
// increase and decrease size of the iframe
function textbox_resize(pix)
{
var box = document.getElementById('box');
var new_height = (parseInt(box.style.height) ? parseInt(box.style.height) : 300) + pix;
if (new_height > 0)
{
box.style.height = new_height + 'px';
}
return false;
}
كود: تحديد الكل
onClick="textbox_resize(100);
كود: تحديد الكل
onClick="textbox_resize(-100);
___________
المصادر:
Almsamim group - Home