Tiny MCE ، لمحات حول محرر النصوص الأكثر شهرة

تاريخ التسجيل : 16/08/2009

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
Tiny MCE ، لمحات حول محرر النصوص الأكثر شهرة

عبارة عن محرر نصوص غني ( Rich Text Editor ( RTE معتمد على الجافاسكربت
والـ HTML ، وهو الأكثر شهرة والأقوى لتحرير النصوص عبر صفحات الويب حيث
تستخدمه الكثير من أنظمة إدارة المحتويات الشهيرة مثل WordPress .
يحتوي
على مجموعة أدوات متكاملة لتنسيق النصوص وإضافة الصور والجداول ، وتستطيع
رؤية هذه التنسيقات والإضافات مباشرة كما ستظهر في الموقع ، أو كأكواد HTML
.
مطوري الويب يستخدمون هذا المحرر في لوحة تحكم التطبيقات أو لتمكين
الأعضاء و الزوار من التفاعل مع الموقع في كتابة المواضيع أو الردود ٫ حيث
يمكنك تهيئة محرر الـ Tiny MCE لأي هدف تريده .

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
مميزات Tiny MCE :
١ : توافقه مع جميع المتصفحات .
٢ : سهولة تركيبه حتى للمبتدئين .
٣ : إمكانية استخدامه مع أيّ إطار عمل ولآي لغة برمجية .

٤ : إمكانية التلاعب بخصائصه ( شديد المرونة ) .
٥ : مجاني .

طريقة التركيب :

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] .
٢ : انسخ المجلّد tiny_mce إلى مجلد مشروعك .
٣ : أيًا كانت صفحتك : HTML – PHP – ASPX .. استدعِ من المجلد ملف tiny_mce.js في وسم <head>

1
2
3
4

3 : ضع كود استدعاء المحرر وضبط خصائصه

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

<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>

تاريخ التسجيل : 16/08/2009

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

أبرز وأهم خصائص الـTiny MCE :
١ : mode
أهم خاصية للمحرر تحدد آلية اختيار عناصر الـ HTML التي ستتحول إلى محرر غني .
textareas لتحويل جميع وسوم الـ textarea في الصفحة إلى محرر Tiny MCE
specific_textareas
لتحويل وسوم معينة إلى محرر Tiny MCE يتم حصرها عن طريق خاصية
element_selector أو حصر العناصر التي لن تُحوّل إلى محررات عن طريق خاصية
element_disselector .

1 2	mode : "specific_textareas", <pre>element_selector: "div,textaream,p"

exact لتحويل عناصر معينة إلى محرر Tiny MCE عن طريق معرفاتها (Id) باستخدام خاصية elements .

1 2	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 .
سوف تجد أن الملف يحتوي على جدول للوجوه المبتسمة بحيث تكون كل خلية فيه بهذا الشكل :

1
2
3
4
5
6
7
8

<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"

» :: تحريك النصوص بالفوتوشوب + الامج ردي::
» تعرف أكثر عن جسدك بهذا ألبرنامج الأكثر من رائع
» مقالات الفلسفة الأكثر احتمالا ورودها هذا العام باكالوريا 2011

Tiny MCE ، لمحات حول محرر النصوص الأكثر شهرة

Tiny MCE ، لمحات حول محرر النصوص الأكثر شهرة

مواضيع مماثلة

مواضيع مماثلة