مفيد.كوم

إكمالاً لما بدأناه سابقاً , في الجزء الأول سوف نجعل المحرر أكثر تطوراً بتغيير لون النص واضافة صور او روابط ... داخل المحرر.

لنبدأ

- إضافة عمليات أكثر على النص :
بالجزء الأول أضفنا "نص عريض" وتعتبر احد عمليات التعديل على النص التي سوف نقوم باضافة بعضها الآن . وكان الكود لجعل النص عريض كما ذكرنا سابقا :

كود: تحديد الكل

function bold()
    {
    Editor.execCommand('bold', false, null);
    }

الآن قد تتسائل , هل يمكننا إضافة عمليات اخرى كنص مائل او تحته خط أو تراجع عن العمليه السابقه !
و سوف نستخدم execCommand مع داله خاصه بنا , و نزيل الكود الذي يجعل النص عريض سابقا وننشأ داله موحده لبعض العمليات السريعه كالتاالي :

كود: تحديد الكل

    function dowithtext(text) {
        Editor.execCommand(text,false,null);
    }

الآن هذه الداله تعطينا اغلب العمليات التي نريدها ونستخدمها كالتالي :

كود: تحديد الكل

    <a href="#" onClick="dowithtext('bold')">Add Bold</a>

لاحظ اننا اضفنا رابطاً عند الظغط عليه يتم تنفيذ الداله التي قمنا بتنفيذها مع العمليه bold والتي تجعل النص عريضاً .

في مثالنا سوف نستخدم هذا الكود الذي يحوي ازاراً للمحرر ..

كود: تحديد الكل

    <img src="images/undo.gif" onClick="dowithtext('Undo')" title="underline" />
    <img src="images/redo.gif" onClick="dowithtext('Redo')" title="underline" />
    <img src="images/bold.gif" onClick="dowithtext('bold')" title="Bold" />
    <img src="images/italic.gif" onClick="dowithtext('italic')" title="italic" />
    <img src="images/underline.gif" onClick="dowithtext('underline')" title="underline" />

وسوف يظهر بالشكل التالي :

تستطيع استخدام ايقونات اخرى تفضلها ..

- اضافة رابط
سوف نجعل المحرر الآن يستقبل الروابط , وسوف نستخدم داله جديده مبنيه على الداله المهمه لنا execCommand وسوف نقوم بطلب الرابط من المستخدم ووضعه داخل المحرر ..

كود: تحديد الكل

        function createURL() {
          var szURL = prompt("Enter a URL:", "http://");
             if ((szURL != null) && (szURL != "")) {
          Editor.execCommand("CreateLink",false,szURL);
              }
          }

واصنع زراً وقم بوضع الداله createURL تنفذ عند الظغط عليه .. كما ذكرنا سابقاً..
وسوف نقوم بوضع الكود كاملا بالنهايه و شكل المحرر كصوره للعرض .. لترى التغيير ..

- اضافة صوره
سوف نستخدم داله قريبه من داله اضافة الرابط , لان الوضيفه واحده وهي طلب رابط الصوره من المستخدم ولن نقوم بتحميل صوره داخل الموقع , فقط رابط الصوره ونضيفه للمحرر وتظهر الصوره داخله ..

كود: تحديد الكل

    function insertimage() {
            imagePath = prompt('Enter Image URL:', 'http://');
            if ((imagePath != null) && (imagePath != "")) {
            Editor.execCommand('InsertImage', false, imagePath);
        }
    }

واصنع زراً وقم بوضع الداله insertimage تنفذ عند الظغط عليه ..

سوف نستخدم في مثالنا الأزرار للرابط والصوره كالتالي :

كود: تحديد الكل

    <img src="images/link.gif" onClick="createURL()" title="URL" />
    <img src="images/insertimage.gif" onClick="insertimage()" title="insert image" />

- تغيير اللون ووضع لائحه بالالوان
سوف نقوم بوضع داله تقوم بتغيير لون النص داخل المحرر , رجاءاً قم بتحميل الملف التالي الذي يحول ملف جافاسكربت للالوان والصور ..
تحميل ملف الجافاسكربت والصور

وقم بتصمين ملف الجافاسكربت الذي قمت بتحميله داخل مستندك كالتالي :

كود: تحديد الكل

    <script language="JavaScript" src="jscolor.js"></script>

وسوف نستخدم المكتبة التي ضمناها للألوان كالتالي :

كود: تحديد الكل

    <input class="color" onChange="Colour(this.value)" style="width:60px;height:18px" />

وبالتالي تستطيع الآن تحديد الآلوان للنصوص داخ المحرر وسوف يظهر المحرر بعد هذه الخطوه كالتالي :

الجزء الثاني من الشرح إنتهى , الكود التالي يعتبر الكود الذي وصلنا اليه بالشرح من الجزء الأول للثاني ..

كود: تحديد الكل

    <html>
    <head>
       <script language="JavaScript">
       window.onload = function() {
       Editor = document.getElementById('box').contentWindow.document;
       Editor.designMode = "on";
       }
       function dowithtext(text)
        {
          Editor.execCommand(text, false, null);
        }
            function createURL() {
         var szURL = prompt("Enter a URL:", "http://");
            if ((szURL != null) && (szURL != "")) {
          Editor.execCommand("CreateLink",false,szURL);
            }
         }
        function insertimage() {
          imagePath = prompt('Enter Image URL:', 'http://');
          if ((imagePath != null) && (imagePath != "")) {
          Editor.execCommand('InsertImage', false, imagePath);
        }
    }
        function Colour(colour) { Editor.execCommand("forecolor",false, colour); }
       </script>
    </head>
    <body>
    <img src="images/undo.gif" onClick="dowithtext('Undo')" title="underline" />
    <img src="images/redo.gif" onClick="dowithtext('Redo')" title="underline" />
    <img src="images/bold.gif" onClick="dowithtext('bold')" title="Bold" />
    <img src="images/italic.gif" onClick="dowithtext('italic')" title="italic" />
    <img src="images/underline.gif" onClick="dowithtext('underline')" title="underline" />
    <img src="images/link.gif" onClick="createURL()" title="URL" />
    <img src="images/insertimage.gif" onClick="insertimage()" title="insert image" />
    <script language="JavaScript" src="jscolor.js"></script>
    <input class="color" onChange="Colour(this.value)" style="width:60px;height:18px" />
    <br/>
    <iframe id="box" width="500" scrolling="auto" height="120" style="border-style: solid;border-right-color: #ff0000;"></iframe>
    </body>
    </html>

رجاءاً أكمل الجزء التالي لتتمكن من الوصول لمحرر متكامل , ويمكن ربطه مع لغات البرمجه واغلب المتصفحات ..

__________
المصادر :
Almsamim group - Home

مفيد.كوم

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

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