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

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

[center]Welcome To PHPITC.BLOGSPOT.COM[/center]

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

<center>Welcome To PHPITC.BLOGSPOT.COM</center>

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

<script language='javascript'>
function center(){
var X = prompt("&#1575;&#1583;&#1582;&#1575;&#1604; &#1575;&#1604;&#1606;&#1589;","")
if (X=="" | X==null ) {
return;
}
FromName.TextareaName.value=FromName.TextareaName.value + "
[center]"+X+"[/center]";
FromName.TextareaName.focus();
}
function red(){
var X = prompt("&#1575;&#1583;&#1582;&#1575;&#1604; &#1575;&#1604;&#1606;&#1589;","")
if (X=="" | X==null ) {
return;
}
FromName.TextareaName.value=FromName.TextareaName.value + "
[color=red]"+X+"[/color]";
FromName.TextareaName.focus();
}
function B(){
var X = prompt("&#1575;&#1583;&#1582;&#1575;&#1604; &#1575;&#1604;&#1606;&#1589;","")
if (X=="" | X==null ) {
return;
}
FromName.TextareaName.value=FromName.TextareaName.value + "
[B]"+X+"[/B]";
FromName.TextareaName.focus();
}

</script>

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

<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>

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

<?php
$html = $_POST['TextareaName'];
$html = htmlspecialchars($html);
$html = str_replace("[B]","<b>",$html);
$html = str_replace("[/B]","</b>",$html);
$html = str_replace("[center]","<center>",$html);
$html = str_replace("[/center]","</center>",$html);
$html = str_replace("[color=red]","<font color='ff0000'>",$html);
$html = str_replace("[/color]","</font>",$html);
echo $html
?>

تحميل المرفقات: من هنا.

المزيد من المواضيع:

---