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