مفيد.كوم

هذا الجزء 3 من سلسه "إنشاء محرر متقدم WYSIWYG من الصفر " وفي هذا الجزء سوف نمر على امور مهمه كإصلاح بعض المشاكل التي قد تواجهنا مع المتصفح انترنت اكسبلور IE و مشاكل لون الخط وسوف نضيف العمليه "justify" للمحرر , كما اننا سوف نعرف كيف نمرر النص النهائي لملف php.

لنبدأ :

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

من حظنا الجيد أن انترنت اكسبلور IE لديه "شرط" لمعرفه هل انت تتصفح منه او لا وهو مفيد للمطورين , والكود كالتالي :

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

    <!--[if IE]>
    <img src="images/color.gif" onClick="Colour(clr.value)" title="add colour" />
    <![endif]-->

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

إضافة زر "ازالة رابط" unlink للمحرر :
لم نقم بذكر اننا سوف نضيف هذا الزر, لكنه مفيد لإزالة رابط من على نص محدد ..
وببساطه يمكننا اضافته كالتالي :

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

    <img src="images/unlink.gif" onClick="dowithtext('Unlink')" title="unlink" />

ولاتنسى أن تستطيع اضافة اكثر من زر واكثر من عمليه كما ذكرنا في الأجزاء السابقه ..
ويظهر كالتالي :

إرسال المحتوى :
يجب أن نقوم بنهاية تطبيقنا لمحرر لمعرفة كيفية إرسال المحتوى من االمحرر لأي جهه تستبقله كملف php . وبالتالي نحتاج لأن ننشأل داله تقوم بإستيراد المحتوى من المحرر iframe ووضعه داخل صندوق نصي input كالتالي :

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

      function Gettext() {
          var text = document.getElementById('text');
           text.value = Editor.body.innerHTML;
      }

و صندوق نص مخفي لاستقبال المحتوى من المحرر iframe.

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

    <input type="hidden" id="text" name="text" />
    <input type="submit" id="submit" onClick="Gettext()" />

وتستقبله عن طريق ملف php بشكل طبيعي من أي form , لو لم تكن تعرف الكثير عن php يجب أن تبحث عن كيفية إستقبال نماذج forms لملف php , وعموماً سوف يكون استقبال المحتوى كالتالي :

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

    <?=$_POST['text']?>

الكود الناتج من الشرح هو :

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

    <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); }
      function Gettext() {
          var text = document.getElementById('text');
           text.value = Editor.body.innerHTML;
      }
       </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/unlink.gif" onClick="dowithtext('Unlink')" title="unlink" />
    <img src="images/insertimage.gif" onClick="insertimage()" title="insert image" />
    <script language="JavaScript" src="images/jscolor.js"></script>
    <input id="clr" class="color" onChange="Colour(this.value)" style="width:60px;height:18px" />
    <!--[if IE]>
    <img src="images/hv120x69.png" width="20" height="20" onClick="Colour(clr.value)" title="add colour" />
    <![endif]-->
    <img src="images/justifyleft.gif" onClick="dowithtext('justifyleft')" title="justify left" />
    <img src="images/justifycenter.gif" onClick="dowithtext('justifycenter')" title="justify center" />
    <img src="images/justifyright.gif" onClick="dowithtext('justifyright')" title="justify right" />
    <br/>
    <iframe id="box" width="500" scrolling="auto" height="120" style="border-style:1px solid;"></iframe>
    <br />
    <form action="php.php" method="post">
    <input type="hidden" id="text" name="text" />
    <input type="submit" id="submit" onClick="Gettext()" />
    </form>
    </body>
    </html>

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

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

مفيد.كوم

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

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