شرح طريقة برمجة صندوق ادوات BBCODE مثل المنتديات عبر PHP & JavaScript

[Chakira]

http://www.dzbatna.com/images/icons/idea.gif ط´ط±ط* ط¨ط±ظ…ط¬ط© طµظ†ط¯ظˆظ‚ ط§ط¯ظˆط§طھ BBCODE ظ…ط«ظ„ ط§ظ„ظ…ظ†طھط¯ظٹط§طھ ط¹ط¨ط± PHP & JavaScript (http://www.dzbatna.com/t2278879/)


لأول مرة وعلى غير عادتي سأقوم بإستخدام JavaScript فى أحد دروسي، ولكنني حقيقة لا أتقن تلك اللغة المعقدة؛ لذلك فسيكون إستخدامي لتلك اللغة بشكل بدائي للغاية، تستطيع أنت بعد ذلك تطويره بأى طريقة تريدها.
الفكرة فى برمجة صندوق الأدوات هي وضع الشيفرة فى المحرر ومن ثم استبدالها عبر PHP بعد ذلك إلى شيفرة HTML، وكمثال بسيط، تلك الشيفرة:
رمز PHP:

<code style="white-space:nowrap"> <code> &#91;center&#93;Welcome To PHPITC.BLOGSPOT.COM&#91;/center&#93;
</code> </code>

والتي سيتم تحويلها إلى تلك الشيفرة:
رمز PHP:

<code style="white-space:nowrap"> <code> <center>Welcome To PHPITC.BLOGSPOT.COM</center>
</code> </code>

وسنعتمد في الدرس مفصل على دالة str_replace لإستبدال النصوص.
- خطوات العمل:
بدايةً سنقوم بإنشاء ملفين، الأول والذي يحتوى على المحرر ولنسمّه مثلاً editor.php، سنقوم بوضع Form بسيط يحتوى على textarea واحد للكتابة، ويقوم هذا الـForm بالتحويل إلى ملف آخر ولنسمه process.php وهو المسئول عن تحويل وإستبدال BBCODE إلى HTML.
فى بداية ملف editor.php ، سنقوم بوضع شيفرة JavaScript بسيطة تشرح طريقة نفسها: رمز PHP:

<code style="white-space:nowrap"> <code> <script language='javascript'>
function center(){
var X = prompt("ادخال النص","")
if (X=="" | X==null ) {
return;
}
FromName.TextareaName.value=FromName.TextareaName. value + "
&#91;center&#93;"+X+"&#91;/center&#93;";
FromName.TextareaName.focus();
}
function red(){
var X = prompt("ادخال النص","")
if (X=="" | X==null ) {
return;



}
FromName.TextareaName.value=FromName.TextareaName. value + "
&#91;color=red&#93;"+X+"&#91;/color&#93;";
FromName.TextareaName.focus();
}
function B(){
var X = prompt("ادخال النص","")
if (X=="" | X==null ) {
return;
}
FromName.TextareaName.value=FromName.TextareaName. value + "
&#91;B&#93;"+X+"&#91;/B&#93;";
FromName.TextareaName.focus();
}

</script>
</code> </code>

نلاحظ أننا فى الشيفرة السابقة نقوم بإنشاء دالة لكل وظيفة معينة فى المحرر، ونقوم عندها بوضع ما أدخله المستخدم فى Prompt إلى الـTextarea محاطًا بأحد وسوم BBCODE والتي سنقوم بإستبدالها لاحقًا إلى وسوم HTML فيما يناسب كل وسم.
ثم نقوم الآن بإنشار Form به صورتان الأولى تعبر عن الرمز B كما موجود فى ملحقات الدرس مفصل ، والثانية تعبر عن المحاذاة للوسط، وستكون شيفرة الـForm كالتالي: رمز PHP:

<code style="white-space:nowrap"> <code> <form name='FromName' action='process.php' method='post'>
<p align="center">
<img src='center.gif' onclick='return center()'>&nbsp;
<img src='bold.gif' onclick='return B()'> Color: <select onclick='return red()' size="1" name="D1">
<option>Red</option>
</select>
</code> </code>

وفى صفحة Process سنقوم بأخذ بيانات الـTextarea ثم نقوم بوضعها فى دالة htmlspecialchars ثم نقوم بعملية إستبدال الأكواد، ومن ثم طباعة الناتج ، كما فى الشيفرة التالية: رمز PHP:

<code style="white-space:nowrap"> <code> <?php
$html = $_POST&#91;'TextareaName'&#93;;
$html = htmlspecialchars($html);
$html = str_replace("&#91;B&#93;","<b>",$html);
$html = str_replace("&#91;/B&#93;","</b>",$html);
$html = str_replace("&#91;center&#93;","<center>",$html);
$html = str_replace("&#91;/center&#93;","</center>",$html);
$html = str_replace("&#91;color=red&#93;","<font color='ff0000'>",$html);
$html = str_replace("&#91;/color&#93;","</font>",$html);
echo $html
?> </code> </code>

تحميل المرفقات: من هنا (http://www.mediafire.com/download/act8f31ay9ocxt5/editor.zip).

الموضوع الأصلي: من هنا (http://phpitc.blogspot.com/2014/05/how-to-program-bbcode-editor.html) - مدونة blog المبرمج (http://phpitc.blogspot.com/)

.




التعديل الأخير كان بواسطة أحمد عصام أحمد; 30 - 05 - 2014 الساعة 09:10

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




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