معهد دعم اتش فى اى بى اس لحلول الويب - Powered by vBulletin


 
 
النتائج 1 إلى 1 من 1

الموضوع: تركيب محرر Wysiwyg الأفضل من نوعه بناءا علي طلب الأعضاء

  1. #1
    أدارى
    الصورة الرمزية HVIPS4


    تاريخ التسجيل: Jun 2011
    رقم العضوية: 6
    الدولة: Cairo
    المشاركات: 1,979
    HVIPS4 غير متواجد حالياً

    تركيب محرر Wysiwyg الأفضل من نوعه بناءا علي طلب الأعضاء


    بسم الله الرحمن الرحيم

    في ظل زياراتي الخاطفه لمعهدي الغالي ترايدنت وفي احد مواضيعي التي طلبت مساعدة بعض الأعضاء في امر برمجي أعلنت عن عثوري علي محرر لا اعلم هل هو بجديد عليكم ام انه مكرر ولكن الذي اعرفه إنه محرر اكثر من رائع وبناءا علي طلب الأعضاء راح اشرح تركيبه لكم الان . . . .

    طبعا معروف هالكود للـTEXT AREA


    كود PHP:
                           <form method="POST" action="save.php">
      <
    textarea rows="2" name="S1" cols="20">
      </
    textarea>
      <
    input type="submit" value="Submit" name="B1">
      <
    input type="reset" value="Reset" name="B2">
    </
    form
    هالكود يخرج لنا صندوق تحرير بدون اي ادوات وكلنا تقريبا كنا نستخدمه ومثال عليه هذه الصورة :
    نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي

    وطبعا في ملف save.php

    تقوم بإستلام قيمة المتغير وتقوم بالتعامل معها من حيث وضعها في قاعدة البيانات او إخراجها للمستخدم او اي شيء

    هذه هي نفس فكرة عمل المحرر الجديد مع فرق الأكواد التي سيتم وضعها

    بسم الله نبدأ :

    بالبداية قم بتحميل الملف المرفق الخاص بالمحرر .zip وقد وضعته لكم كاملا (النسخة تعمل علي الـphp والـASP والـASP.NET ) مع شرح كيفية تركيبه والتعديل عليه بالإنجليزيه.

    خطوات التركيب :

    1- قم برفع محتويات مجلد scripts لمجلد السكريبت .

    2 - قم بكتابة هذا الكود :


    كود PHP:
                           <?php
    ///////////////////////////////////////////////////
    ///////////////////////////////////////////////////
    ///////////////////////////////////////////////////
    /////////////intialize wysiwyg editor//////////////
    ///////////////////////////////////////////////////
    ///////////////////////////////////////////////////
    ///////////////////////////////////////////////////
    if(strpos($_SERVER["HTTP_USER_AGENT"],"MSIE"))
     echo 
    "<script language=JavaScript src='../scripts/editor.js'></script>";
    else
     echo 
    "<script language=JavaScript src='../scripts/moz/editor.js'></script>";
    echo 
    "
    <script>
    function submitForm()
     {
     document.forms.Form1.elements.inpContent.value = oEdit1.getHTMLBody();
     document.forms.Form1.submit()
     }
    </script>"
    ;
    echo 
    "<pre id=\"idTemporary\" name=\"idTemporary\" style=\"display:none\">";
    if(isset(
    $_POST["inpContent"])) 
     {
     
    $sContent=stripslashes($_POST['inpContent']); 
     echo 
    htmlentities($sContent);
     }
    echo 
    "</pre>";
    ///////////////////////////////////////////////////
    ///////////////////////////////////////////////////
    ///////////////////////////////////////////////////
    /////////////intialize wysiwyg editor//////////////
    ///////////////////////////////////////////////////
    ///////////////////////////////////////////////////

      
    [IMG]http://cdn5.tribalfusion.com/media/37536.gif[/IMG]    
    ///////////////////////////////////////////////////

    ///////////////////////////////////////////////////
    ///////////////////////////////////////////////////
    ///////////////////////////////////////////////////
    /////////////USING THE wysiwyg editor//////////////
    ///////////////////////////////////////////////////
    ///////////////////////////////////////////////////
    ///////////////////////////////////////////////////
    echo "
    <form method=\"post\" action=\"post.php\" id=\"Form1\">
     <script>
      var oEdit1 = new InnovaEditor(\"oEdit1\");
      oEdit1.RENDER(document.getElementById(\"idTemporary\").innerHTML);
     </script>
     <input type=\"hidden\" name=\"inpContent\" id=\"inpContent\">
    </form>
    <input type=\"button\" value=\" SUBMIT \" onclick=\"submitForm()\">
    "
    ;
    ///////////////////////////////////////////////////
    ///////////////////////////////////////////////////
    ///////////////////////////////////////////////////
    /////////////USING THE wysiwyg editor//////////////
    ///////////////////////////////////////////////////
    ///////////////////////////////////////////////////
    ///////////////////////////////////////////////////
    ?>
    طبعا نقوم بتغيير الـ action="post.php" بحيث يتناسب مع الصفحة التي نريد إرسال الـHTML CODE إليها

    ونقوم بتغيير الـTRAIDNT إلي مانريد وضعه في صندوق التحرير قبل بداية الكتابه فيه.

    وهكذا قمنا بتركيب المحرر

    الان مع الخطوة الثالثه في التركيب وهي خاصة بإستلام المتغير في صفحة post.php (في مثالنا هذا فقط ) .

    ويتم إستلام المتغير عن طريق الكود التالي :


    كود PHP:
    <?
    if(isset($_POST["inpContent"])) 
     {
     
    $sContent=stripslashes($_POST['inpContent']);//remove slashes (/) 
     
    echo $sContent;
     }
    ?>
    يمكنك في هذه الحالة التعامل مع كود الـHTML الناتج من المحرر عن طريق المتغير $sContent من حيث حفظه في قاعدة البيانات او إظهاره كما عملت انا في الكود السابق

    في النهاية شكل المحرر بعد ماركبته عندي :

    نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي

    أتمني ان اكون قد وفقت في الشرح وإن أصبت فمن الله وإن أخطأت فمن الشيطان والله ولي التوفيق واعتذر عن عدم وجودي الدائم في المعهد لأحبائي وإخواني هنا. . . .
    الملفات المرفقة

 

ضوابط المشاركة

  • لا تستطيع إضافة مواضيع جديدة
  • لا تستطيع الرد على المواضيع
  • لا تستطيع إرفاق ملفات
  • لا تستطيع تعديل مشاركاتك
  •