إنشاء محرر متقدم WYSIWYG من الصفر (الجزء 1)
مرسل: 02 أكتوبر 2008, 13:18
اهلا بك في هذا الشرح الذي يغطي كيفية إنشاء محررك المتقدم المرئي وهو مايسمى بالانجليزيه "WYSIWYG" وهو إختصار "What You See Is What You Get" أي ماتراه هو ماتحصل عليه.
سوف يكون المحرر معتمداً على "iframe" وبعض المميزات المهمه مثل جعل النص عريض او مائل وأمور أخرى كثيره و سوف نجعل الأكواد قدر المستطاع آمنه لإستقبالها عن طريق لغات البرمجه مثل php
هذه أهم داله وضيفيه سوف تنتقل معنا في كل أجزاء الشرح , execCommand تستخدم كالتالي :
sCommand : الأمر و العمليه التي سوف يتم تنفيذها وغالبا يتم إكمالها بالقيمه vValue. ويمكنك معرفة أكثر العمليات من هنا execCommand.
bUserInterface : هذه تكون إما
false : وهي الافتراضيه , و عند تحديدها لابد ان نقوم بملأ القيمه vValue وبالتالي لن تظهر نافذه لطلب قيمة العمليه لو كانت تحتاج قيمه.
true: لعرض نافذه طلب قيمة لو كانت العمليه تحتاج .
vValue:بعض العمليات تحتاج قيمة مثل لون النص تحتاج قيمة اللون لكن لو نظرنا لجعل النص عريض فلا يحتاج الأمر قيمة ونكتفي ب null أي بدون قيمه.
لاحظ :
العنصر iframe يجب أن يكون محول لوضع designMode أي الوضع المرئي , كالتالي:
حيث أن Editor هو اسم العنصر iframe وهو العنصر الذي سوف نقوم بالكتابه بداخله.
ظبط المحرر :
في المرحله هذه سوف نقوم بإنشاء كود html لكي نقوم بوضع العنصر iframe وهو الذي سوف نقوم بالكتابه بداخله ونقوم بظبطه للوضع المرئي كما ذكرنا بالملاحظه السابقه :
قمنا بإنشاء صفحه فيها الصندوق الخاص بالكتابه وأسميناه box وقمنا بظبط العرض 500 و الطول 120 , ونحتاج الآن لتحويل هذا الصندوق للوضع المرئي بواسطة الجافاسكربت داخل وسمي
<head> و </head>
الصوره التاليه توضح شكل المحرر وبداخله نص بالوضع المرئي :
أول العمليات بالمحرر :قمنا بعمل صندوق مميز للكتابه وبالشكل المرئي لكن نحتاج الآن لأزرار وضيفيه تقوم بظبط النص وتمييزه كجعله عريض مثلا ..
نقوم بزياة الكود الذي وضعناه بالهيدر بين وسمي <head>و </head>بالسابق
ونقوم بوضع زر بسيط فوق الصندوق ونكتب عليه "bold" أي عريض
سوف يكون شكل الصندوق كالصوره :
هذا الجزء الأول من أجزاء سته لكيفية إنشاء محرر مرئي خاص بك, تابع الأجزاء التاليه لتصنع محرر متقدم ومليء بالعمليات والوظائف المنفذه على النص.
_______
المصادر: Almsamim group - Home
سوف يكون المحرر معتمداً على "iframe" وبعض المميزات المهمه مثل جعل النص عريض او مائل وأمور أخرى كثيره و سوف نجعل الأكواد قدر المستطاع آمنه لإستقبالها عن طريق لغات البرمجه مثل php
ExecCommandقد تحتاج لأن تكون ملماً بأمور بسيطه من الجافاسكربت javascript و html لكن هذا لايمنع ان تكمل الشرح لو كنت غير ملماً بأي منهما , وحاول قدر المستطاع أن تجرّب بنفسك الأمثله.
هذه أهم داله وضيفيه سوف تنتقل معنا في كل أجزاء الشرح , execCommand تستخدم كالتالي :
كود: تحديد الكل
variable = object.execCommand(sCommand,bUserInterface,vValue)bUserInterface : هذه تكون إما
false : وهي الافتراضيه , و عند تحديدها لابد ان نقوم بملأ القيمه vValue وبالتالي لن تظهر نافذه لطلب قيمة العمليه لو كانت تحتاج قيمه.
true: لعرض نافذه طلب قيمة لو كانت العمليه تحتاج .
vValue:بعض العمليات تحتاج قيمة مثل لون النص تحتاج قيمة اللون لكن لو نظرنا لجعل النص عريض فلا يحتاج الأمر قيمة ونكتفي ب null أي بدون قيمه.
لاحظ :
العنصر iframe يجب أن يكون محول لوضع designMode أي الوضع المرئي , كالتالي:
كود: تحديد الكل
Editor.designMode = 'on';ظبط المحرر :
في المرحله هذه سوف نقوم بإنشاء كود html لكي نقوم بوضع العنصر iframe وهو الذي سوف نقوم بالكتابه بداخله ونقوم بظبطه للوضع المرئي كما ذكرنا بالملاحظه السابقه :
كود: تحديد الكل
<html>
<head>
<title>WYSIWYG editor</title>
</head>
<body>
<iframe id="box" width="500" height="120"></iframe>
</body>
</html>
<head> و </head>
كود: تحديد الكل
<script type="text/javascript">
window.onload = function() {
Editor = document.getElementById('box').contentWindow.document;
Editor.designMode = 'on';
}
</script>
أول العمليات بالمحرر :قمنا بعمل صندوق مميز للكتابه وبالشكل المرئي لكن نحتاج الآن لأزرار وضيفيه تقوم بظبط النص وتمييزه كجعله عريض مثلا ..
نقوم بزياة الكود الذي وضعناه بالهيدر بين وسمي <head>و </head>بالسابق
كود: تحديد الكل
function bold()
{
Editor.execCommand('bold', false, null);
}كود: تحديد الكل
<input type="button" onClick="bold()" value="Bold">هذا الجزء الأول من أجزاء سته لكيفية إنشاء محرر مرئي خاص بك, تابع الأجزاء التاليه لتصنع محرر متقدم ومليء بالعمليات والوظائف المنفذه على النص.
_______
المصادر: Almsamim group - Home