صفحة 1 من 1

إنشاء محرر متقدم WYSIWYG من الصفر (الجزء 1)

مشاركةمرسل: الخميس أكتوبر 02, 2008 1:18 pm
بواسطة saanina
اهلا بك في هذا الشرح الذي يغطي كيفية إنشاء محررك المتقدم المرئي وهو مايسمى بالانجليزيه "WYSIWYG" وهو إختصار "What You See Is What You Get" أي ماتراه هو ماتحصل عليه.

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

رد: إنشاء محرر متقدم WYSIWYG من الصفر (الجزء 1)

مشاركةمرسل: السبت يناير 22, 2011 4:21 pm
بواسطة sethshawn
أنا لا تستخدم المحرر المتقدم لأنني أعتقد بسيط هو أفضل