خاصية اظهار السورس كود لمحتوى صندوق النص

راجع هذا الموضوع

/index.php?showtopic=44942

الصفحة المذكورة في الأعلى تفي بالغرض إن فهمت سؤالك بشكل صحيح. أيضاً محررات النصوص الجاهزة التي ذكرها الأخ عبد الله في المواضيع المثبتة قد تعالج الموضوع من أن بعض محررات النصوص تظهر ماكتبته بصورة HTML داخل الـ Textarea

أما بالنسبة لخط الـ bold فهل يفي السابق بالإجابة؟

أم تريد كتابة نص عادي في الـ textarea و يكون عرض الـ textarea هو bold؟

السلام عليكم

الأخوان الفاضلان : الحسين ومحمد القربي

شكرا لكما على الرد

ولكن الرابط يشير إلى موضوع سبق وان طرحته وموضوعه مختلف عما أريد الآن ففي الرابط كان الموضوع عن iframe وقد استفدت من ردود الأخ الحسين جزاه الله خيرا

ولكن الآن أنا أتكلم عن texterea ولعلي لم أوصل المعلومة بشكل واضح فاعذروني

ولعلي أعيد طرح السؤال بشكل أوضح فأقول

عندي صندوق نص كتبت به نص معين ثم طبقت على هذا النص تنسيق معين على سبيل المثال bold الآن المطلوب هو السورس كود للهتمل الذي نتج عن المحتوى لهذا الصندوق بحيث لو وضعته في قاعدة البيانات ثم جلبته مرة أخرى يعرض لي نفس النص بنفس التنسيق الذي عملته .

أما بالنسبة للسؤال الثاني فأقول للأخ محمد

اقتباس

أم تريد كتابة نص عادي في الـ textarea و يكون عرض الـ textarea هو bold؟

نعم هذا هو المطلوب.

وشكرا

تحياتي لكما

السلام عليكم

عندما تضع فرضا تنسيق معين مثل ما ذكرت bold لانفترض الكلمة موضوعه داخل الوسمين

[bB]خط عرض[/bB]

بعد أن يضغط زر اعتماد البيانات سوف تخزنها داخل قاعدة البيانات.

قبل التخزين سوف تقوم باستخدام دالة Replcase لتحويل الرمز الذي وضعته على هيئة كود HTML: كالتالي:

message=ucase(request("message"))

message = replace(message,"[bB]","<b>")

message = replace(message,"[/bB]","</b>")

أرجوا أن أكون قد أفدت بالغرض.

مع تحياتي

شكرا للتوضيح و لست متأكدً أني فهمت سؤالك:

http://www.interactivetools.com/products/htmlarea

اللينك السابق هو لمحرر نصوص استخدمه كثيراً يكتب ما تريد و كأنك تستخدم مثلاً MS Word مع إمكانية رؤية الـ HTML لما كتبته من خلال الضغط على زر "<>"

و لا أعتقد أنه ممكن ان تكتب كلمات منسقة (محررة) كما لوكانت في MS Word بدون محرر نص مثل المذكور. لأن الاتصال العادي للـ textarea في الداتا بيز يعمل كـ Text Editor بسيط (يكتب كل شئ حتى الكود و يحفظه، ولكن عرضه هو للنتيجة فقط)

وبناء على كلامي الأخير، على فرض عدم وجود محرر نصوص للـ textarea فلعرض مايوجد داخله بخط bold فقط ضع <b> قبل استرجاع النص. مثلاً:

<b><%= textareaColumnName %></b>

إن لم يكن ما تريده، أرجو تنبيهي لذلك

آه، وشكراً للأخ عبدالله أيضاً لم انتبه لرده. على كل حال نرجو أن نكون قد أفدناك أخي

مشرفنا الفاضل عبدالله جابر شقلية

شكرا لمرورك وأسعدني ذلك

وشكرا لك أنت أيضا أخي محمد

أخواني الموضوع ليس عرض النص المنسق في texterea ولكن المطلوب مثل عمل المحررات التي وضعها الأخ عبدالله جابر فهي تقوم بالتالي

تكتب أنت النص مثلا "الحمدلله " ثم تضغط زر bold فيصبح النص بخط عريض (ولكن لايظهر لك أي كود هتمل ) بل ترى كلمة الحمدلله فقط بخط عريض

وإذا أردت أن ترى السورس كود للهتمل تضغط على زر <> فيفتح لك إطار ويظهر لك السورس كود كاملا

وهذا ماأريده أريد الخاصية أو الأمر الذي يعمل ذلك ويظهر السورس كود لمحتوى texterea

وشكرا لكما مرة أخرى

أخي آسف أني لم أقدر على مساعدتك أنا استخدم محرر النص الذي ذكرته و الذي يستخدم Javascript لهذا الأمر، استطيع إرسال لك أكواد الجافا المتعلقة بهذا في مثال إن أردت. أما غير هذا فإني آسف أني لا أعلم. ربما يفيدنا أخي عبدالله

آسف مرة أخرى

شكرا لك أخي محمد وما قصرت جزاك الله خيرا

ولعل مشرفنا الفاضل عبدالله جابر شقلية يفيدنا جميعا

أخي عبدالله ننتظر ردك فمنكم نستفيد ويستفيد جميع أعضاء هذا المنتدى

تحياتي لكم

علي حسب ما فهمت ( مع أني لم أفهم جيدا قصدك أخي الكريم )

أنت تقصد أنك عندك بالصفحة محرر نصوص متقدم لعرض النصوص بشكل منسق وتريد أن تخزن ما كتب به (محتواه من النصوص) بقاعدة البيانات , ومن ثما أعادة النص إلي هذا المحرر من قاعدة البيانات مرة أخري عند الحاجة

فإن كان هذا هو المقصد

فتعال ننظر سويا علي ما قد كنا أشرنا له في الموضوع السابق

أن كنت تستخدم محرر النصوص بهذا الشكل

<iframe id="iView" style="width: 200px; height:70px"></iframe>

فيمكنك عرض محتوي النص بصيغة HTML كما يلي

alert(iView.document.body.innerHTML);

ولوضع هذا النص مرة أخري في هذا المحرر قم بعمل التالي

iView.document.body.innerHTML = "القيمة القادمة من قاعدة البيانات";

ممتاز أخي الحسين

هذا الكود يؤدي المطلوب

iView.document.body.innerHTML

ولكن هذا الكود لـ iframe

والذي أبحث عنه هو مثل عمل هذا الكود ولكن لـ texterea

لأن بعض المحررات تستخدم لإدخال النص iframe وبعضها الآخر تستخدم texterea وكلها تعرض السورس كود

ولكن iframe قرأت عنه أن بعض المواقع والمستعرضات لاتدعمه . لذلك texterea أفضل .

واعذروني إن كنت لم أطرح السؤال بشكل واضح

الذي أردت هو في المنتدى الذي عملته أن أعمل texterea لكتابة الموضوع والمشاركات وأعمل أزرار تنسيق النص ثم يظهر النص المنسق فقط بدون الكود ثم أحفظ النص - بعد استخراج السورس كود - في قاعدة البيانات - والعضو لايرى السورس كود أبدا لا أثناء الكتابة ولابعدها - وبعد ذلك اعرض النص عادي في جسم الصفحة كمشاركة عادية (وليست في صندوق نص كما فهمتم )

وأحد المحررات واسمه htmlerea يقوم بذلك عن طربق texterea وتقوم بالكتابة فيه وعندما تضغط زر bold يتحول النص إلى ثقيل مباشرة ولاترى وسمي [/bb] [bb] وإذا أردت السورس كود تضغط زر فتفتح لك نافذة فيها السورس كود وهذا هو ما أردته بالضبط .

ولعل هذا الموضوع يكون إن شاء الله مرجعا لأعضاء المنتدى حيث شارك في الردود مشكورين خيرة الأعضاء والمشرفين .

وشكرا لكم جميعا

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

شكرا علي الإيضاح

بالنسبة لمحررات htmlarea

<textarea name="yourFieldNameHere2" style="width:100%; height:200">
</textarea>

- لعرض محتوي المحرر قم بعمل التالي

   var editorName = "_yourFieldNameHere2_editor";
   var editor_obj = document.all[editorName];

   alert( editor_obj.contentWindow.document.body.innerHTML );

- ولتغير محتوي المحرر قم بعمل التالي

   var editorName = "_yourFieldNameHere2_editor";
   var editor_obj = document.all[editorName];

   editor_obj.contentWindow.document.body.innerHTML = "القيمة القادمة من قاعدة البيانات";

الله يعطيك العافية أخي الحسين

قمت بتطبيق الكود الذي كتبته ولكن ظهر لي خطأ وهو :

contentWindow.document خال أو ليس كائنا

حاولت أغير بالكود ولكن تظهر لي الرسالة التي من المفترض أن تظهر السورس كود فارغة

وعلى كل هذا هو الكود لماعملته لعله يكون أوضح في الطرح

<script language="JavaScript"> 
function boldIt() 
{ 

var editorName = "_yourFieldNameHere2_editor";
var editor_obj = document.all[editorName];
alert( editor_obj.contentWindow.document.body.innerHTML );
}
</script> 

<img border="0" src="image/bold.gif" width="25" height="24"onClick="boldIt()">

<textarea  name="yourFieldNameHere2" dir="rtl"  rows=10 cols=40></textarea>

وشكرا لك أخي الحسين والأخوة و تحياتي لكم

هذا الملف المرفق عبارة عن مثال يستخدم ال htmlarea

htmlarea.rar

شكرا لك أخي الحسين وشكرا لجميع الأخوة الذين قاموا بالرد و ماقصرتوا

أما هذا المحرر htmlerea فهو موجود عندي أخي الحسين وحاولت سابقا أن أعرف المطلوب منه ولكني ضعت في مستند الجافا سكربت وكثرة المتغيرات التي فيه وأنا غير متمكن جيدا من جافا سكربت .

فياليت لو تتكرم وتفيدنا بشرح الكود التالي :

<textarea name="yourFieldNameHere2" style="width:100%; height:200">
</textarea>

  var editorName = "_yourFieldNameHere2_editor";
  var editor_obj = document.all[editorName];

  alert( editor_obj.contentWindow.document.body.innerHTML );

فما المقصود بالمتغيرات التالية

yourFieldNameHere2

_yourFieldNameHere2_editor

editorName

لنستفيد من الكود الذي وضعته

وشكرا لك أخي الفاضل على رحابة صدرك

أخي الكريم نعم أن الكود السابق الذي كتبته كان يعتمد علي htmlarea وليس هو كود قائم بذاته وكنت كتبته لك بعدما فتحت السورس كود لل htmlarea وفهمته وهو لا يعتمد بشكل أساسي علي ال textarea ولكنه يعتبره كونتينر ويقوم بالكتابة داخلة .

يمكنك أخي العزيز إستخدام تاج ال Div لعمل محررك الخاص كما يلي :

<DIV style="position:absolute;width:100%;height:100%;border-width: 1px;border-style: inset;white-space: pre;overflow: auto;" id="txt1" contentEditable="true" >hi to arabteam 2000</DIV>

ولتنفيذ الخاصية bold قم بعمل التالي

var editorObj = document.all["txt1"];
editorObj.document.execCommand('bold', false, null);

تابع هذا المقال

/index.php?showtopic=45302

شكرا لك أخي الفاضل الحسين

لقد استفدت من ردودك كثيرا فبارك الله فيك وفي علمك

أما الكود الذي وضعته بخصوص div فهو ممتاز واستطعت تطبيق تنسيقات مختلفة عليه مثل bold و italic وغيرها ولكن أصل دائما إلى النقطة التي هي أصل المشكلة فكيف استطيع استخراج السورس كود للهتمل لمحتوى div

و بالنسبة للملف الذي وضعته فللأسف ليس لدي فيجول نت فلم استطع الاستفادة منه

تحياتي لكم

<DIV style="width:100%;height:50%;background-color:White;border-color:gray;border-width: 1px;border-style: inset;white-space: pre;overflow: auto;"
 id="txt1"
 contentEditable="true">ArabTeam 2000 developer</DIV>

<input type=button value=" get Source " onclick="getSource()">
<input type=button value=" set Source " onclick="setSource()">

<script>
var editorObj = document.all["txt1"];

function getSource() {
  alert( editorObj.innerHTML );
}

function setSource() {
  editorObj.innerHTML = "<b>hatif is good seeker man for the <span style='color:blue;'>true</span></b>";
}

</script>

الأخ الفاضل الحسين

شكرا لك على مجهوداتك ومساعدتك

والكود يقوم بالمطلوب وكائن div يقوم بتطبيق التنسيقات واستخراج السورس كود وهذا هو المطلوب بالضبط ..... إلا أنه يقوم بأشياء غريبة مثل إدراج وكتابة الرابط في body وليس في نفس div كبقية النصوص .

على العموم بارك الله فيك أخي الحسين فلقد استفدنا منك.

تحياتي لك

أخي الكريم

أولا أنا لم أواجه تلك المشكلة من قبل , عندي إستخدامي لل Div كانت الأمور طبيعية

ولكن ربما تكون علي حق

لذلك جرب أن تعمل focus لل Div قبل تنفيذ الأوامر

علي سبيل المثال

editorObj .focus();
editorObj.document.execCommand('createlink');

وبالتوفيق

لن أبخل على زوار منتدى البرمجة بمشروعي للسنه الثانية

الذي يناقش موضوعك

my_prog.ZIP

السلام عليكم

الأخ الفاضل الحسين

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

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

والفضل لله ثم لك فأنت أفدتنا كثيرا

تحياتي لك

الأخ الفاضل nardien28

شكرا لك على كرمك ومساعدتك لإعضاء هذا المنتدى

ولكن المحرر يظهر رسالة خطأ عند تطبيق أي تنسيق وهي :

s_tag غير معرف

تحياتي لكم جميعا

أخي كي يعمل البرنامج عليك قبل أي شيء ضغط زر Reset

الذي يستدعي تابع التهيئة الذي يقوم بتعريف المصفوفه وتصفيرها عند ئذ لن يقول لك انها غير معرفة