اضافة محرر النصوص الي موقعك حيث يظهر التكست بوكس مثل الورد كي تحرر كيفية اضافة محرر النصوص بالاشكال المختلفة واضافة الصور والكتابة كأنك تكتب داخل ملف ورد ...الي مقالتك او موقعك

اضافة محرر النصوص الي موقعك html Editor

اضافة محرر النصوص الي موقعك html Editor

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

وهي اداة غير موجودة داخل برنامج الفيجوال ستوديو .وتوجد منها بكثرة علي الانترنت ومنها ماهو مجاني ومفتوح المصدر وهو كثير ومنها ماهو غير مجاني

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

اولا رابط تحميل المشروع الذ نطبق عليه المثال بالفيجوال ستوديو من هنا قبل اي شئ

وفي هذه المقالة سوف نطبق الاتي

1- فائدة محرر النصوص وتم شرحها بالاعلي

2- عمل مثال كامل علي محرر النصوص

3- البحث عن اشكال اخري لمحرر النصوص والاختيار بينهم

ثم نبدأ في استخدام محرر النصوص بالشكل الاتي

محرر النصوص

الان مع مثال عملي علي محرر النصوص html editor sample

يوجد العديد من محرر النصوص html Editot  في مختلف الاشكال وقد اخترنا محرر نصوص اسمه Fckeditor

html editor

الخطوات لاضافة اي محرر نصوص

1- تذهب الي موقعم الرسمي وتختار مشاهدة المثال لكي تراه بشكل مباشر ..ثم حمله ان عجبك شكله وطريقة استخدامه .

مشاهدة المثال من الموقع الرسمي لهم

2- ملف التحميل او محرر النصوص يكون في شكل ملف ويندوز ونوعه  Dll

3- بعد تحميل المثال او ملف المحرر قم بحفظه علي جهاز الكمبيوتر لديك في اي مكان . يتبقي اضافته في الفيجوال ستوديو لكي تستخدمه الان .

تابع الان كيفية اضافة محرر النصوص الي فيجوال ستوديو

 

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

html editor

الان قف اسفل كل الادوات في مكان فارغ ليس به ادوات .ثم اضغط ضغطة يمين بالماوس

سيظهر لك عدة اختيارات .اختر تاب جديد Add tab

html editor free editor

الان قم بتسمية مكان الادوات الي اي اسم .حيث ستضع به اي اداة تريد تحميلها من الانترنت الي الفيجوال ستوديو

html editor free editor

اضغط كليك يمين بالماوس علي اي مكان فارغ في منتصف هذا المكان الجديد .ثم اختر اختيار العنصر Choose Items
وسوف تضع هذا المحرر من هذا الاختيار

html editor free editor

يخبرك فيجوال ستوديو الان اين هذه الاداة الجديدة التي تريد ادراجها ..اختر Browse

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

html editor free editor

ادخل الان داخل الكمبيوتر لديك ثم ادخل فولدر المشروع ثم فولدر ال Bin

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

مع العلم انه يمكنك ان تضعه في اي مكان علي الجهاز .

html editor free editor

اختر اسم الملف .او الاداة التي تسمي FCKeditor

والتي قمت بتحميلها من الموقع الرسمي لهذا المحرر .

html editor free editor

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

html editor free editor

الان انظر الي صندوق الادوات وسوف تجد الاداة ضمن ادوات فيجوال ستوديو

html editor free editor

 

كل ما عليك الان هو مجرد سحبها بالماوس ثم القائها في اي مكان تريد في الصفحة لتظهر بالشكل هذا .

html editor free editor

 

الان قم بتشغيل الصفحة وسوف تظهر بهذا الشكل مثل ملف الورد الذي ينسق الكتابة

html editor free editor

كما تستطيع استخدام الاداة في الكود من خلال خاصية ال Value

وليس التكست ..كما كان في التكست بوكس ..حيث يمكنك الحفظ او الاستدعاء بنفس الطريقة العادية من خلال خاصية ال Value

html editor free editor

 

ملاحظات هامة في هذا المحرر

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

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

html editor free editor

وهو فولدر اسمه fckeditor

فقط خذه نسخ ولصق

html editor free editor

html editor free editor

 

الان مع بعض محررات النصوص الاخري كما وعدنا في بداية المقالة

1- MarkitUp - jQuery Editor محرر نصوص

 مشاهدة المثال والتحميل

html editor free editor

2- Lightweight RTE  Editor محرر نصوص

  مشاهدة المثال والتحميل

html editor free editor

 

3- TinyMCE  Editor محرر نصوص

 مشاهدة المثال والتحميل

html editor free editor

 

4- Yahoo YUI Rich Text Editor محرر نصوص

 مشاهدة المثال والتحميل

html editor free editor

 

 

ويوجد المذيد من عشرات محررات النصوص علي جوجل فلا تنسي الاضطلاع عليها للمذيد

من فضلك اذا اعجبك المحتوي اضغط علي زر اعجبني لتقم بمشاركتها ايضا

نشكرك علي المشاركة