Detail of Using Text Editor in Drupal 7

ဒီ post က Absolute Beginner များကို ရည်ရွယ်ပါတယ်။ အခုကျွန်တော်ရေးထားတာက အသေးစိတ်နေတော့ တစ်ဆင့်ချင်း လိုက်လုပ်ရမှာ မကြိုက်သူတွေက ဒီမှာ ရေးထားတာလည်းရှိပါတယ်။Drupal 7 မှာ Beginner တော်တော်များများ Text Editor ထည့်ရတဲ့ အခက်အခဲကို ကြုံဖူးမယ်ထင်ပါတယ်။ သုံးလည်းသုံးချင်၊ module သွင်းပြန်တော့လည်းမရ၊ ရပြန်တော့လည်း ပုံတင်မရ၊ ပုံတင်လို့ရပြန်တော့လည်း page ပေါ်မှာ ပုံမပေါ်နဲ့ လုံးလည်ချာလည်လိုက်တဲ့ ပြဿနာတစ်ခုပါ။ ကျွန်တော်လည်း အဲဒီ Text Editor ပြဿနာကြုံဖူးပါတယ်။ ကဲ … စလိုက်ကြစို့။

၁။ သွင်းရမည့် Module များ

•  Wysiwyg
•  Libraries
•  Media 
•  Media Browser Plus
•  Ctools 

အဲဒါတွေကိုသွင်းပြီးသွားရင် Check မှာ Enable လုပ်ပေးရပါမယ်။

၂။ Enable လုပ်ပေးရမယ့် Module Name များ

•  Wysiwyg မှာက Wysiwyg ကို Enable လုပ်ပါ 
•  Libraries မှာက Libraries 
•  Media မှာက File entity, Media, Media Browser Plus
•  Chaos Tools Suite မှာက Chaos Tools 

Module တွေလည်း သွင်းပြီးသွားပြီ၊ လိုအပ်တာတွေလည်း Enable လုပ်ပြီးသွားပြီ။ Editor သုံးလို့ရပြီလားဆိုတော့ မရသေးဘူးဗျ။ Wysiwyg က သူ့ဟာသူ အလုပ်မလုပ်နိုင်ဘူး။ Third Party Editor Libraries တွေနဲ့မှတွဲပြီး အလုပ်လုပ်တာ။ Third Party Editor တွေအများကြီးရှိတဲ့အထဲက ကျွန်တော်ကတော့ TinyMCE ကို သုံးတယ်။

၃။ Install TinyMCE

•  “ ../sites/all/ ” အောက်မှာ libraries ဆိုတဲ့ folder တစ်ခုဆောက်ပါ။
•  TinyMCE ကို ဒီကနေ download ဆွဲပါ။ 
•  ပြီးရင် ခုနကဆောက်ထားတဲ့ libraries ဆိုတဲ့ folder အောက်မှာ zip ဖြည်ပြီးထည့်လိုက်ပါ။ ဖြည်လိုက်တဲ့ folder မှာ “tinymce_3.4.8” (version နံပါတ်အပြောင်းအလဲရှိနိုင်ပါသည်) ဆိုပြီးတွေ့ပါမယ်
•  အဲဒီ folder ထဲမှာ tinymce ကိုတွေ့ပါမယ်။ သူ့ကို cut နဲ့ ဒီ path လမ်းကြောင်းအတိုင်း move လုပ်လိုက်ပါ “../sites/all/libraries/tinymce” ဆိုပြီး ဖြစ်ရပါမယ်
•  အခုဆိုရင် “tinymce_3.4.8” folder အောက်မှာ ဘာမှမရှိတော့တဲ့အတွက် ဖျက်လိုက်ပါ။

 သွင်းစရာရှိတာတွေကတော့ သွင်းလို့ကုန်ပါပြီ။ သုံးလို့တော့ မရသေးဘူး။ နည်းနည်းပဲ ကျန်ပါတော့တယ်။

Figure: 1 – Tinymce ထည့်ရမည့် path လမ်းကြောင်း

၄။ Change Editor

အခုက လိုအပ်တဲ့ Module တွေရယ် Editor ရယ်ကို သွင်းပဲသွင်းရသေးတယ်။ အဲဒီသွင်းလိုက်တဲ့ TinyMCE ကို သုံးတော့ဟေ့လို့ မပြောရသေးဘူး။ ဘယ်လိုပြောမလဲ။

• Configuration ကိုသွားပါ
• Content Authoring အောက်မှာ “Wysiwyg profiles” ကိုနှိပ်ပါ။
• Input Format | Editor | Operation ဆိုတဲ့ Menu တွေအောက်မှာ Filtered HTML, Full HTML, Plain text ရယ်ကိုတွေ့ပါမယ်
• Editor အောက်မှာ No Editor ဆိုပြီး Default အတိုင်းဖြစ်နေပါမယ်။ combo box လေးကိုနှိပ်လိုက်ပါ။ 
• အဲဒီမှာ TinyMCE ကိုရွေးပြီး Save လုပ်လိုက်ပါ။

အခုဆိုရင် Content ထည့်တဲ့အခါ Editor လေးနဲ့ ထည့်လို့ရပါပြီ။ ဒါပေမယ့် Content ထည့်တဲ့အခါ သာမန် Default အတိုင်းလိုပဲဖြစ်နေတာကို တွေ့ရပါလိမ့်မယ်။ အဲဒီလိုမဖြစ်အောင် ကိုယ်သုံးချင်တဲ့ buttons တွေ plugins တွေကို သတ်မှတ်ပေးဖို့လိုပါတယ်။
 

Figure: 2 – TinyMCE Editor ကို ရွေးချယ်ပုံ 

၅။ Editor တွင် Buttons များနှင့် Plugins များထည့်သွင်းခြင်း

• Configuration ကိုသွားပါ
• Content Authoring အောက်မှာ “Wysiwyg profiles” ကိုနှိပ်ပါ။
• Editor သုံးမည့် Input Format ဧ။် Operation ကို Edit လုပ်ပါ။
• "Buttons And Plugins" Accordion တွင် အသုံးပြုလိုသည့် buttons နှင့် plugins များကိုရွေးပါ
• ပုံများထည့်သွင်းလိုပါက "Media browser" ကို မဖြစ်မနေ check လုပ်ပါ (Media နှင့် Media Browser Plus module များထည့်သွင်းထားသဖြင့်ပေါ်နေခြင်းဖြစ်သည်)

Figure: 3 – အသုံးပြုမည့် buttons နှင့် plugins များ ရွေးချယ်ခြင်း

Figure: 4 – Add Media Button နှင့် Content တွင် ပုံထည့်ခြင်း

အပေါ်မှာ ပြသလို Editor ထဲမှာတော့ပေါ်လိမ့်မယ်။ ဒါပေမယ့် publish လုပ်တဲ့အခါ ပုံမပေါ်ဘဲ coding တွေပဲပေါ်နေလိမ့်မယ်။

Figure: 5 – Page ပေါ်တွင် ပုံမပေါ်ဘဲ code များပေါ်နေခြင်း

 အဲဒီပြဿနာပြီးရင်တော့ Editor က သုံးလို့ရပါပြီ။ နောက်ဆုံးအဆင့် Page ပေါ်မှာ ပုံပေါ်အောင်လုပ်မယ်။

၆။ Page ပေါ်တွင် ပုံပေါ်အောင်ပြုလုပ်ခြင်း

• Configuration ကိုသွားပါ
• Content Authoring အောက်မှာ "Text Formats" ကိုနှိပ်ပါ။
• Editor နဲ့သုံးမယ်လို့ သတ်မှတ်ထားတဲ့ Text Format တစ်ခု (ဥပမာ- Filtered HTML) ရဲ့ Operation ကို Configure လုပ်ပါ
• Enabled filters မှာ "Converts Media tags to Markup" ကို check လုပ်ပေးလိုက်ပါ
• Save Configuration ကို နှိပ်ပါ။

Figure: 6 – Page တွင် ပုံပေါ်စေရန် Media Tages များကို Markup ပြောင်းခြင်း

 
Figure: 7 – Markup ပြောင်းပြီးနောက် Page ပေါ်တွင် ပုံပေါ်လာပုံ

Content တွေ ထည့်ကြည့်ပါ။ ပုံထည့်ကြည့်ပါ။ အဆင်ပြေသွားပါပြီ။ ကျွန်တော်ကတော့ TinyMCE Editor နဲ့သုံးသွားတာပါ။ တစ်ခြား Editor တွေလည်း အများကြီး ရှိပါတယ်။ ပွင့်ပွင့်လင်းလင်းပြောရရင် ကျွန်တော်တစ်ကယ်တမ်း အလုပ်မှာ အသုံးပြုတဲ့ Text Editor က CKEditor ပါ။ ဒါပေမယ့် ဒီ Tutorial ကို ရေးတဲ့အချိန်မှာ drupal version 7.7 နဲ့စမ်းတာ။ CKEditor က error တက်နေတယ် :D ။ ဒါကြောင့် ကျွန်တော်လည်း TinyMCE ပြောင်းသုံးလိုက်တာပါ။ ကျန်တဲ့ drupal 7.0 နဲ့ 7.12 တွေမှာတော့ TinyMCE ကော CKEditor ပါ စမ်းသုံးကြည့်တာရတယ်ခင်ဗျ။ ဒီ Tutorial ဖတ်ပြီး သူငယ်ချင်းတွေကော Editor ပြဿနာ ဘယ်လိုဖြေရှင်းခဲ့လဲဆိုတာ ပြောပေးနိုင်ပါတယ်ခင်ဗျာ။ နောက်ပြီး ဘယ် Editor တွေ ကြိုက်လည်း ဆိုတာလည်း ဆွေးနွေးပေးလို့ရပါတယ်။ အားလုံးကို ကျေးဇူးတင်ပါတယ်ခင်ဗျာ။