Tiny MCE عبارة عن محرر نصوص غني ( Rich Text Editor ( RTE معتمد على الجافاسكربت والـ HTML ، وهو الأكثر شهرة والأقوى لتحرير النصوص عبر صفحات الويب حيث تستخدمه الكثير من أنظمة إدارة المحتويات الشهيرة مثل WordPress .
يحتوي على مجموعة أدوات متكاملة لتنسيق النصوص وإضافة الصور والجداول ، وتستطيع رؤية هذه التنسيقات والإضافات مباشرة كما ستظهر في الموقع ، أو كأكواد HTML .
مطوري الويب يستخدمون هذا المحرر في لوحة تحكم التطبيقات أو لتمكين الأعضاء و الزوار من التفاعل مع الموقع في كتابة المواضيع أو الردود ٫ حيث يمكنك تهيئة محرر الـ Tiny MCE لأي هدف تريده .
مميزات Tiny MCE :
١ : توافقه مع جميع المتصفحات .
٢ : سهولة تركيبه حتى للمبتدئين .
٣ : إمكانية استخدامه مع أيّ إطار عمل ولآي لغة برمجية .
٤ : إمكانية التلاعب بخصائصه ( شديد المرونة ) .
٥ : مجاني .
طريقة التركيب :
١ : قم بتحميل النسخة الرسمية من محرر Tiny MCE .
٢ : انسخ المجلّد tiny_mce إلى مجلد مشروعك .
٣ : أيًا كانت صفحتك : HTML – PHP – ASPX .. استدعِ من المجلد ملف tiny_mce.js في وسم <head>
<head> <script type="text/javascript" src="tiny_mce/tiny_mce.js"> </script> </head>
3 : ضع كود استدعاء المحرر وضبط خصائصه
<pre id="line68"><script type="text/javascript">
tinyMCE.init({
// General options
mode : "textareas",
theme : "advanced",
plugins : "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist,autosave,imagemanager,filemanager",
// Theme options
theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
skin : "o2k7",
skin_variant : "silver",
// Example content CSS (should be your site CSS)
content_css : "css/example.css",
// Drop lists for link/image/media/template dialogs
template_external_list_url : "js/template_list.js",
external_link_list_url : "js/link_list.js",
external_image_list_url : "js/image_list.js",
media_external_list_url : "js/media_list.js",
// Replace values for the template plugin
template_replace_values : {
username : "Some User",
staffid : "991234"
},
autosave_ask_before_unload : false // Disable for example purposes
});
</script>
أبرز وأهم خصائص الـTiny MCE :
١ : mode
أهم خاصية للمحرر تحدد آلية اختيار عناصر الـ HTML التي ستتحول إلى محرر غني .
textareas لتحويل جميع وسوم الـ textarea في الصفحة إلى محرر Tiny MCE
specific_textareas لتحويل وسوم معينة إلى محرر Tiny MCE يتم حصرها عن طريق خاصية element_selector أو حصر العناصر التي لن تُحوّل إلى محررات عن طريق خاصية element_disselector .
mode : "specific_textareas", <pre>element_selector: "div,textaream,p"
exact لتحويل عناصر معينة إلى محرر Tiny MCE عن طريق معرفاتها (Id) باستخدام خاصية elements .
mode : "exact", elements: "elm1,elm2,elm3",
٢ : theme
تحديد نوع المحرر .
simple بسيط ٫ يحتوي على أدوات محدودة جدًا ولا يصلح لكتابة المقالات أو التدوينات وإنما الردود أو محتويات بسيطة .
advaned متقدم ٫ يحتوي على جميع خصائص ال Tiny MCE ٫ ويمكنك تحديد هذه الخصائص عن طريق خاصية Theme_advanced_buttons .
٣ : plugins
مجموعة إضافات ترفع من كفاءة المحرر موجودة في مجلد tiny_mce/plugins ٫ بحيث يتم استدعاء الإضافة باسم مجلدها .
أمثلة : pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups
بالتأكيد أنت لن تحتاج إلى جميع هذه الإضافات ، اختر ما يخدم محتواك وعميلك فحسب .
٤ : directionality
لتحديد الاتجاه الافتراضي للنص ٫ من اليمين إلى اليسار أو من اليسار إلى اليمين .
rtl من اليمين إلى اليسار .
ltr من اليسار إلى اليمين .
٥ : skin
إضافة ستايل معين للمحرر ٫ يوجد ستايلين ” مجلدين ” أصليين للمحرر default & o2k7 ولكن يمكنك إنشاء الستايل الخاص بك بإضافة مجلد باسم iSkin مثلاً إلى المجلد tiny_mce/themes/advanced/skins ٫ وإضافة ملف content.css بعد تهيئته داخل هذا المجلد.
.
.
طريقة تغيير الوجوه المبتسمة (emotions) في المحرر :
١ : قم برفع صور الوجوه المبتسمة إلى مجلد Tiny_mce\plugins\emotions\img .
٢ : افتح ملف tiny_mce\plugins\emotions\emotions.htm عن طريق ي محرر لملفات الـ HTML .
سوف تجد أن الملف يحتوي على جدول للوجوه المبتسمة بحيث تكون كل خلية فيه بهذا الشكل :
<td>
<a href="javascript:EmotionsDialog.insert('emotion_smile.gif','emotions_dlg.smile');">
<img src="img/emotion_smile.gif" alt="{#emotions_dlg.smile}"
title="{#emotion_smile}"
height="20"
width="20"
border="0"
></a></td>
قم بتغيير اسم الصورة وامتدادها وعرضها وطولها وعنوانها وخصائصها بما يتناسب مع ابتساماتك لتحصل على المجموعة التي ترغب بها .
.
.
روابط ذات صلة :
1 : online rich text editor .
جزاكم ربي عنا كل خير فعلا هذه الاداة هي ما احتاجه قضيت وقت طويل ابحث عن اداة بكل هذه المواصفات المهم انها بعدين ما تعمل فترة وتظهر انها تجريبية ولا زم تدفع؟
ساحاول وساعلمك بعملها معي على الaspx
شكرا لك
شكراً لك ..
هي أداة مجانية تمامًا فلا تخف
بالنسبة لاستخدامها مع ASP.Net فالأمر كما هوَ بإضافة runat=server إلى الـ textarea وبإضافة id كي تتمكن من التعامل معها في الـ code behind .
قراءة محتويات المحرر ستكون عن طريق خاصية innerText وسيتم حفظ المحتوى على شكل أكواد HTML .
هلا إحسان ، تدوينة مميزة كعادتك ،
و اختصرت علينا مشوار برمجة محرر نصوص من الصفر .
الله يبارك فيكِ و يزيدك علماً إلى علمك
لكني جهلت : كيف أقوم بحفظ التعليق – على سبيل المثال لو استخدم كمحرر للتعليقات – في حقل في قاعدة بيانات sql server عندما نقوم بكبس زر إرسال التعليق !
هل سيكون هو نفسه كود الحفظ في الداتا و هذا فقط مظهر خارجي لمحتوى التعليق على الصفحة ؟
^_^
أهلاً فردوس ..
نعم سوف يكون نفس كود الحفظ في قاعدة البيانات وهذا مجرد مظهر خارجي
وكما أسلفت ٫ سيتم حفظ المحتوى على شكل أكواد HTML
شكرا جدا على هذا المحرر للنصوص ولكن عند التشغيل تظهر رسالة
Load jQuery first!
فما هى الخطوات التى الربط text box فى asp.net
يبدو أنك قمت بتحميل النسخة المرتبطة بمكتبة الـ jQuery
قومي بتحميل المكتبة من موقعها http://www.jquery.org
^ـ^
شئ عظيم جداً
وفعلا من افضل المحررات الي بنشوفها هيا المحررات الي بتعتمد علي تقنيه
what you say is what you get (WYSIWYG)
وان شاء الله جاري التجربة
في رعاية الله
العفو ..
الله يرعاك أخي الكريم
السلام عليكم
عندي سؤال ,, اقدر استخدمه في مدونه بولقر؟
ليس لدي معرفة بذلك سيدي الفاضل
لكن أتوقع أن ذلك ممكن جدًا ، لذلك Google it
هل يمكن إدخال بعض الخطوط العربية إلى هذه المحررات مثل
Traditional Arabic
وذلك لتحرير أكواد مواقع نشر عربية وإسلامية؟
رووووووووعه
من زمان وأنا أبحث عن أداة بهذي القوة
عملية إدارتها سهلة جدا ويمكن تخصيصها حسب مايريد المستخدم
شكرا يا أحسان
الله يعطيك العافية ، محرر مهم و شرح رائع شكرا لك
بسم الله الرحمن الرحيم
اولا :- اولا انا أستخدم asp.net ويوجد فى الاجاكسى تحرير النص
ولكن فى tiny mce أدوات كثيرة جدا تعطى مرونه فى عمل موضوع او اى شياء عند المستخدم
اقوم بوضع tiny mce على textbox لا يتم عرض الادوات
وعندما قمت DetailsView فى النموذج لعمل موضوع ووضعة فى قاعدة البيانات لم اتمكن من استخدام tiny
والسؤال كيف يتم وضع tiny mce فى asp.net
الله يعطيك العافية ومكشور على الموضوع القيم
هو محرر ممتاز وبه الكثير من الادوات المتميزة لكنى واجهت مشكلة معه ياريت لو حد يقدر يحلها
عند الكتابة بالعربية وتتوسط السطر كلمة انجليزية تتداخل الجملة مع بعضها
السلام عليكم .. جزاك الله عنا خيراً .. و أخيراً لقيت من يشرح لنا عن هذا المحرر العملاق اتوق لاستخدامه مع vb فهل ممكن ان استخدمه .. فلقد صمنت كود الاستدعاء في الـ Headinclude و استبدلت قوالب المحرر الافتراضية بمحتوى المود اعلاه .. و عند كتابتي لموضوع تجربة تظهر النتيجه عند المعاينة و لكن لا يتم الحفظ و يخبرني بان عدد الحروف اقل من 10 حروف و هي الحروف المسموحة .. هل تتوقع بان vb لم يتقبل هذا المحرر او انه يسبب تعارض او انني نسيت خطوة من احدى الخطوات ؟
الله يجزاك خير ,
ماذا عن اللغات وطريقة تغيير اللغة ؟
محمد هل تقصد تغيير واجهة التطبيق ؟
كيف احفظ في قاعده البيانات بدون مايوجهني خطاء
صراحة حولت كثير لكن لا جدوى ماقدرت احفظ ولا اعرض النص بالتنسيق المختار
فاعندما اكتب في حدث بوتن كلك
مثل
txttry.text=idTiny.text
يطلع لي خطاء كيف اعرضه بدون اخطاء
مشكور يالغالي
هل من الممكن شرح مبسط لعمل كل ايقونة في المحرر باللغة العربية
او هل بالامكان تعريبه وكيف
لك خالص التحبات
بانتظار ردك