سوف يكون المحرر معتمداً على "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