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

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

لنبدأ :

نريد أن نجعل المحرر يعمل مع كل المتصفحات او لنقل اغلبها بلا مشاكل , وسوف نصلح مشاكل ال HTML وسوف نستيطع تصدير المحتوى ك BBcodes ! كيف ؟

سوف نقوم بتعطيل CSS ونستعمل اكواد html عاديه كـ

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

<b></b>

بدلاً من

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

<span style="font-weight:bold;"></span>

التي تستخدم غالبا في متصفحات المبنيه على Gecko ( مثل Firefox)
وسوف نستخدم هذا الكود في داله onload وهي الداله التي يتم تشغيلها اثناء فتح الصفحه .

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

          // disable CSS in Geko ,IE and opera 
          try {
             // Try new Gecko method
             Editor.execCommand("styleWithCSS", 0, false);
          } catch (e) {
             // Use old method
             try {Editor.execCommand("useCSS", 0, true);} catch (e) {}
          }

كما ترى قمنا بتعطيل css في كل من Gecko و IE و Opera لكن لم يتم في safari و google chrome

وهذا الكود النهائي المعدل الخاص بنا من الفكره السابقه :

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

           window.onload = function() {
           Editor = document.getElementById('box').contentWindow.document;
           Editor.designMode = "on";
               // disable CSS in Geko ,IE and opera  
            try {
            // Try new Gecko method
                Editor.execCommand("styleWithCSS", 0, false);
            } catch (e) {
            // Use old method
                try {Editor.execCommand("useCSS", 0, true);} catch (e) {}
            }
           }

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

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

    function AddSmileyIcon(imagePath){
            Editor.execCommand('InsertImage', false, imagePath);
        }

لوحة ألوان تعمل مع اغلب المتصفحات:
هذه الداله مقتبسه من phpBB3 وتقوم بإنشاء لوحة ألوان ويب, فقط قم بنسخها ولصقها ..

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

    // print colour palette in a table
    function colorPalette(dir, width, height)
    {
        var r = 0, g = 0, b = 0;
        var numberList = new Array(6);
        var color = '';
        numberList[0] = '00';
        numberList[1] = '40';
        numberList[2] = '80';
        numberList[3] = 'BF';
        numberList[4] = 'FF';
        document.writeln('<table cellspacing="1" cellpadding="0" border="0">');
        for (r = 0; r < 5; r++)
        {
            if (dir == 'h')
            {
                document.writeln('<tr>');
            }

            for (g = 0; g < 5; g++)
            {
                if (dir == 'v')
                {
                    document.writeln('<tr>');
                }
                for (b = 0; b < 5; b++)
                {
                    color = String(numberList[r]) + String(numberList[g]) + String(numberList[b]);
                    document.write('<td bgcolor="#' + color + '" style="width: ' + width + 'px; height: ' + height + 'px;">');
                    document.write('<a href="#" onClick="Colour(\'#' + color + '\'); return false;"><img src="images/spacer.gif" width="' + width + '" height="' + height + '" alt="#' + color + '" title="#' + color + '" /></a>');
                    document.writeln('</td>');
                }
                if (dir == 'v')
                {
                    document.writeln('</tr>');
                }
            }
            if (dir == 'h')
            {
                document.writeln('</tr>');
            }
        }
        document.writeln('</table>');
    }

وضع هذا الكود التالي بأي مكان تريد إظهار لوحة الألوان فيه :

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

<script language="JavaScript">
colorPalette('h', 15, 10);
</script>

ميزه حجم الخط :

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

  function Select(selectname)
    {
      var cursel = document.getElementById(selectname).selectedIndex;
      if (cursel != 0) {
        var selected = document.getElementById(selectname).options[cursel].value;
        Editor.execCommand(selectname, false, selected);
        document.getElementById(selectname).selectedIndex = 0;
      }
      document.getElementById("box").contentWindow.focus();
    }

وهذه قائمه بالأحجام للإختيار منها :

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

    <select unselectable="on" id="fontsize" onchange="Select(this.id);">
      <option value="Size">Size</option>
      <option value="1">Tiny</option>
      <option value="2">Small</option>
      <option value="3">Normal</option>
      <option value="5">Large</option>
      <option value="7">Huge</option> 
    </select>

تغيير حجم المحرر ببساطه :
داله بسيطه تعطيك الإمكانيه لوضع ازرار لزياده وتقليص المحرر وهي داله تعمل مع اغلب المتصفحات

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

    // increase and decrease size of the iframe
    function textbox_resize(pix)
    {
        var box            = document.getElementById('box');
        var new_height    = (parseInt(box.style.height) ? parseInt(box.style.height) : 300) + pix;

        if (new_height > 0)
        {
            box.style.height = new_height + 'px';
        }

        return false;
    }

وتضع هذا الكود للزياده :

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

    onClick="textbox_resize(100);

وهذا للتقليص :

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

    onClick="textbox_resize(-100);

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