مارس 202007
ملاحظة: هذا الدرس من أرشيف “عالم البي أتش بي العربي”
كنت في الفترة السابقة أقرأ بعض الكتب في لغة الـjavascript وقد عملت المحرر التالي كتطبيق لما تعلمته في الفترة الفائتة
المحرر كاملا:
<html dir="rtl">
<head>
<meta http-equiv="Content-Language" content="ar-om">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256">
<title>المحرر</title>
</head>
<body>
<script type="text/javascript" language="javascript">
//Powered by phpaw.com
function promptW(c1,info,c2,msg){
var rinfo=window.prompt(msg,info);
if (!rinfo){
document.Editor.S1.value=document.Editor.S1.value;
}else{
document.Editor.S1.value=document.Editor.S1.value+c1+rinfo+c2;
}
}
function url(msg1,msg2,info,info2){
var rinfo2=window.prompt(msg1,info);
var rinfo=window.prompt(msg2,info2);
if (rinfo && rinfo2){
document.Editor.S1.value=document.Editor.S1.value+'<a style="text-decoration: none" href="'+rinfo+'">'+rinfo2+'</a>';
}
}
function viewF(){
document.getElementById('test').innerHTML=document.Editor.S1.value;
}
</script>
<form method="POST" action="http://www.phpaw.com/?javetest" name="Editor">
<p> </p>
<p align="center"><input type="button" value="رابط" name="B3" onclick="url('أدخل اسم الرابط','أدخل عنوان الرابط','عالم البي أتش بي العربي','http://www.phpaw.com');">
<input type="button" value="صورة" name="B4" onclick="promptW('<img border=0 src=','','>','رابط الصورة');">
<input type="button" value="B" name="B5" style="font-weight: bold" onclick="promptW('<B>','','</B>','أدخل النص المراد إظهاره بشكل غامق');">
<input type="button" value="I" name="B6" style="font-style: italic" onclick="promptW('<I>','','</I>','أدخل النص المراد إظهاره بشكل مائل');">
<input type="button" value="U" name="B7" style="text-decoration: underline" onclick="promptW('<U>','','</U>','أدخل النص المراد إظهار خط بأسفله');"><span lang="en-us">
</span>
<input type="button" value="مشاهدة الموضوع" name="B8" onclick="viewF();"></p>
<p align="center"><textarea rows="7" name="S1" cols="95"></textarea></p>
<p align="center"><input type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="B2"></p>
</form>
<div id="test"></div>
</body>
</html>
تفصيل الشفرة:
<script type="text/javascript" language="javascript">
//دالة إظهار نافذة الإضافة
function promptW(c1,info,c2,msg){
//إظهار حقل الإدخال
var rinfo=window.prompt(msg,info);
//التأكد من حالة الحقل
if (!rinfo){
document.Editor.S1.value=document.Editor.S1.value;
}else{
document.Editor.S1.value=document.Editor.S1.value+c1+rinfo+c2;
}
}
//دالة إضافة وصلة
function url(msg1,msg2,info,info2){
//إظهار حقل كتابة اسم الوصلة
var rinfo2=window.prompt(msg1,info);
//إضهار حقل كتابة رابط الوصلة
var rinfo=window.prompt(msg2,info2);
// التأكد من أن الحقلين غير فارغين
if (rinfo && rinfo2){
document.Editor.S1.value=document.Editor.S1.value+'<a style="text-decoration: none" href="'+rinfo+'">'+rinfo2+'</a>';
}
}
//دالة عرض الموضوع
function viewF(){
document.getElementById('test').innerHTML=document.Editor.S1.value;
}
</script>
إستخدام دالة نافذة الإضافة:
فقط عليك بإضافة الكود الآتي إلى الزر:
onclick="promptW('<tag>','القيمة الإفتراضية','</tag>','msg');"
ويجب ملاحظة أن إسم الحقل هو S1
ويمكنك تغييره لكن تأكد من تحريره في الكود كاملا