السلام عليكم ورحمة الله وبركاته..
كنت في الفترة السابقة أقرأ بعض الكتب في لغة الـjavascript وقد عملت المحرر التالي كتطبيق لما تعلمته في الفترة الفائتة
المحرر كاملا:
تفصيل الكود:كود HTML:<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>
فقط عليك بإضافة الكود الآتي إلى الزر:
ويجب ملاحظة أن إسم الحقل هو S1كود HTML:onclick="promptW('<tag>','القيمة الإفتراضية','</tag>','msg');"
ويمكنك تغييره لكن تأكد من تحريره في الكود كاملا
مثال:
وحاليا أبحث عن طريقة جلب قيمة النص المحدد فقط مثل المنتديات
كمثال، تحديد النص المراد توسيطه :con2:
رد مع اقتباس
المشاركة الأصلية كتبت بواسطة Zizwar
