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

[salima]

http://www.dzbatna.com/images/icons/iconrote.gif ط´ط±ط* طھط±ظƒظٹط¨ ظ…ط*ط±ط± Wysiwyg ط§ظ„ط£ظپط¶ظ„ ظ…ظ† ظ†ظˆط¹ظ‡ ط¨ظ†ط§ط،ط§ ط¹ظ„ظٹ ط·ظ„ط¨ ط§ظ„ط£ط¹ط¶ط§ط، (http://www.dzbatna.com/t531457/)



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

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

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

رمز PHP:

<code style="white-space:nowrap"> <code> <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>
</code> </code>

هالكود code يخرج لنا صندوق تحرير بدون اي ادوات وكلنا تقريبا كنا نستخدمه ومثال عليه هذه الصورة :
http://www.dzbatna.com/attachments/167184d1187939718t-1.gif (http://www.dzbatna.com/attachments/167184d1187939718-1.gif)

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

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

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

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

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

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

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

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

رمز PHP:

<code style="white-space:nowrap"> <code> <?php
///////////////////////////////////////////////////
///////////////////////////////////////////////////
///////////////////////////////////////////////////
/////////////intialize wysiwyg editor//////////////
///////////////////////////////////////////////////
///////////////////////////////////////////////////
///////////////////////////////////////////////////
if(strpos($_SERVER&#91;"HTTP_USER_AGENT"&#93;,"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&#91;"inpContent"&#93;))
{
$sContent=stripslashes($_POST&#91;'inpContent'&#93;);
echo htmlentities($sContent);
}
echo "</pre>";
///////////////////////////////////////////////////
///////////////////////////////////////////////////
///////////////////////////////////////////////////
/////////////intialize wysiwyg editor//////////////
///////////////////////////////////////////////////
///////////////////////////////////////////////////
///////////////////////////////////////////////////

///////////////////////////////////////////////////
///////////////////////////////////////////////////
///////////////////////////////////////////////////
/////////////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//////////////
///////////////////////////////////////////////////
///////////////////////////////////////////////////
///////////////////////////////////////////////////
?> </code> </code>

طبعا نقوم بتغيير الـ action=&quot;post.php&quot; بحيث يتناسب مع الصفحة التي نريد إرسال الـHTML CODE إليها

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

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

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

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

رمز PHP:

<code style="white-space:nowrap"> <code>
<?
if(isset($_POST&#91;"inpContent"&#93;))
{
$sContent=stripslashes($_POST&#91;'inpContent'&#93;);//remove slashes (/)
echo $sContent;
}
?> </code> </code>

يمكنك في هذه الحالة التعامل مع كود code الـHTML الناتج من المحرر عن طريق المتغير $sContent من حيث حفظه في قاعدة البيانات او إظهاره كما عملت انا في الكود code السابق

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

http://www.dzbatna.com/attachments/167187d1187940813t-2.gif (http://www.dzbatna.com/attachments/167187d1187940813-2.gif)

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






التعديل الأخير كان بواسطة عاشق برمجة; 24 - 08 - 2014 الساعة 15:32

ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)


الملفات المرفقة
http://www.traidnt.net/vb/images/attach/zip.gif scripts.zip (http://www.traidnt.net/vb/attachments/167185d1187940072-scripts.zip) (1.23 ميقابايت, عدد مرات المشاهدة 4004 مرة)


https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©