# This sets the Visual Editor as default #
add_filter( 'wp_default_editor', create_function('', 'return "tinymce";') );

# This sets the HTML Editor as default #
add_filter( 'wp_default_editor', create_function('', 'return "html";') );

โดยถ้าต้องการใช้งานในส่วนของ Visual Editor ก็ใส่เฉพาะคำสั่งตัวแรก แต่ถ้าต้องการใช้งานในส่วนของ HTML Editor ก็ใส่คำสั่งตัวสองครับ

Thank : http://wp-snippets.com/set-default-editor/

วิธีติดตั้งก็ง่ายๆให้เราโหลด JoomlaCK Editor มาทำการติดตั้งตามปกติ จากนั้นไปที่ Extensions > Plugins manager เพื่อการใช้งานของ JoomlaCK Editor

จากนั้นไปที่ Site > Global Configuration ไปเปลี่ยน Default WYSIWYG Editor ให้เป็นของ JoomlaCK

จากนั้นเราก็จะได้ Ckeditor มาใช้งานแล้วครับ

download : http://extensions.joomla.org/extensions/edition/editors/90

วิธีติดตั้ง CKeditor ใน drupal นั้นไม่อยากเท่าไรเราต้องใช้งานร่วมกับ module Wysiwyg โดยให้เราทำการติดตั้งโมดูล Wysiwyg กันก่อนจากนั้นเปิดใช้งาน

จากนั้โหลด CKeditor มาทำการแตกไฟล์ออกมา จากนั้นทำการสร้างโฟลเดอร์ชื่อว่า libraries ไว้ที่ sites/all/ และนำโฟลเดอร์ของ CKEeditor ที่แตกออกมาได้ใส่เข้าไปใน sites/all/libraries ก็จะเป็นsites/all/libraries

แล้วทำการโหลดไฟล์มาจาก http://drupal.org/node/462146#comment-2005574 เมื่อแตกออกมาข้างในจะมีสองไฟล์คือ ckeditor.inc กับ ckeditor-3.0.js ให้นำ ckeditor.inc ไปใส่ไว้ที่ sites/all/modules/wysiwyg/editors และ ckeditor-3.0.js ใส่ไว้ที่ sites/all/modules/wysiwyg/editors/js

จากนั้นกลับไปที่เมนู Site configuration > Wysiwyg เราจะพบกับ CKeditor ที่เพิ่มเข้ามา

เลื่อนขึ้นมาด้านบนปรับการใช้งานของ input format ให้ใช้งานกับ CKeditor และทำการ Save

สามารถ edite CKeitor ในการใช้งานของแต่ละ Input format ได้

ลองไปใช้งานกันดูน่ะครับกับ CKeditor ใน drupal แล้วคุณจะชอบมันเหมือนผม…

ขั้นตอนการติดตั้ง
1. ให้แตกไฟล์ module FCKeditor ไว้ที่ sites/all/modules
2. จากนั้นโหลดไฟล์เพิ่มมาจาก http://www.fckeditor.net/download และแตกไฟล์ไว้ที่ sites/all/modules/fckeditor/fckeditor
3. enable module fckeditor บน drupal ของเรา
4. กำหนดสิทธิ์การใช้งาน fckeditor ใน Administer >> User Management >> Permissions

5. เราสามารถปรับแต่งการใช้งานของ fckeditor ได้ที่ Administer >> Site configuration >> FCKeditor

เพียงเท่านี้เราก็จะได้ fckeditor มาใช้งานแล้วครับ

อันนี้หน้าตา FCKeditor

อันนี้หน้าตา Tiny MCE

อะไรจะง่ายแบบนี้ ^ ^

TinyMCE คือ WYSIWYG Editor ซึ่งมันก็คือตัวช่วยในการเขียนเนื้อหาที่ถูกนำไปใช้งานกับหลายๆ cms ด้วยกัน ซึ่งมันมีประโยชน์เหมือนกับการเขียนบน word อะไรยังงั้นเลย ก็ตามชื่ออะครับ WYSIWYG (What You See Is What You Get) เห็นอะไรได้อย่างงั้น ซึ่งถ้าใครใช้งาน magento อยู่ก็คงรู้ดีว่ามันมีแต่ช่อง Text area ให้มาเปล่าๆ ให้เราใส่ code หรือเขียนข้อความลงไปเอง ซึ่งถ้าไม่มีพื้นฐาน HTML ก็คงจะรำบากกันหน่อย แต่ TinyMCE ช่วยท่านได้ครับ

วิธีการติดตั้ง Tiny MCE บน magento คงจะไม่ง่ายเหมือนบน CMS ตัวอื่นหรอกครับแต่ก็ไม่ยากจนเกินไป เรามาเริ่มทำกันเลยดีกว่า ก่อนอื่นให้ดาวโหลดตัว Tiny MCE มาก่อน http://tinymce.moxiecode.com/download.php เลือกตัว Main package น่ะครับ จากนั้นให้ทำการแตกไฟล์ออกมาจะได้ folder ชื่อ tinymce ให้เราทำการอัพไฟล์ขึ้นไปวางไว้ที่ /js/tiny_mce (folder นี้ให้สร้างเอง)/tinymce (folder นี้คือตัวที่เราอัพโหลดขึ้นมา)

จากนั้นให้ทำการเพิ่ม script ด้านล่างลงไป ที่บรรทัด 54 (บรรทัด 49 ในเวอร์ชั่น 1.1.1) ในไฟล์ app/design/adminhtml/defaut/default/template/catalog/product/edit.phtml

<script language="javascript" type="text/javascript" src="<?php echo $this->getJsUrl('tiny_mce/tinymce/jscripts/tiny_mce/tiny_mce.js') ?>"></script>
<script language="javascript" type="text/javascript">
Event.observe(window, 'load', function() {
    tinyMCE.init({
        mode : "exact",
        theme : "advanced",
        strict_loading_mode : true,
        elements : "description,short_description",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_path_location : "bottom",
        extended_valid_elements : "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",
        theme_advanced_resize_horizontal : "true",
        theme_advanced_resizing : "true",
        apply_source_formatting : "true",
        convert_urls : "false",
        force_br_newlines : "true",
        doctype : '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">'
    });
});

</script>

จากนั้นมาต่อด้วยแก้ไข function getElementHtml() ที่บรรทัด 51 จากไฟล์ lib/Varien/Data/Form/Element/Editor.php ให้ทำการ upadate น่ะครับหรือทับ code ตัวเก่าของมันทิ้งไปเลย

public function getElementHtml()
    {
        if( $this->getWysiwyg() === true )
        {
            $element = ($this->getState() == 'html') ? '' : $this->getHtmlId();

            $html = '
                <textarea name="'.$this->getName().'" title="'.$this->getTitle().'" id="'.$this->getHtmlId().'" class="textarea '.$this->getClass().'" '.$this->serialize($this->getHtmlAttributes()).' >'.$this->getEscapedValue().'</textarea>
        <script language="javascript" type="text/javascript" src="/js/tiny_mce/tiny_mce.js"></script>
        <script language="javascript" type="text/javascript">
        Event.observe(window, "load", function() {
            tinyMCE.init({
                mode : "exact",
                theme : "advanced",
                strict_loading_mode : true,
                elements : "'.$this->getHtmlId().'",
                theme_advanced_toolbar_location : "top",
                theme_advanced_toolbar_align : "left",
                theme_advanced_path_location : "bottom",
                extended_valid_elements : "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",
                theme_advanced_resize_horizontal : "true",
                theme_advanced_resizing : "true",
                apply_source_formatting : "true",
                convert_urls : "false",
                force_br_newlines : "true",
                doctype : "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">"
            });
        });

        </script>';

            $html.= $this->getAfterElementHtml();
            return $html;
        }
        else
        {
            return parent::getElementHtml();
        }
    }

ต่อมาให้แก้ไขไฟล์จากบรรทัดที่ 101 /magento/app/code/core/Mage/Adminhtml/Block/Cms/Page/Edit/Tab/Main.php จากเดิม

$fieldset->addField('content', 'editor', array(
            'name'      => 'content',
            'label'     => Mage::helper('cms')->__('Content'),
            'title'     => Mage::helper('cms')->__('Content'),
            'style'     => 'height:36em;',
            'wysiwyg'   => false,
            'required'  => true,
        ));

เป็น

 $fieldset->addField('content', 'editor', array(
            'name'      => 'content',
            'label'     => Mage::helper('cms')->__('Content'),
            'title'     => Mage::helper('cms')->__('Content'),
            'style'     => 'width:98%; height:600px;',
            'wysiwyg'   => true,
            'required'  => true,
        ));

จากนั้นลองเข้าหน้า admin ของ magento ดูครับแล้วไปที่ Catalog >> Manage Product แล้วทำการสร้างสินค้าดูครับ

แต่ในส่วนที่แก้ไขยังคงใช้ tinymce ได้เพียงแค่หน้าสร้างสินค้าเท่านั้นถ้าเราต้องการใช้งานในส่วนอื่นๆเพิ่มเติมต้องติดตั้ง Extension ที่ชื่อว่า Fontis WYSIWYG Editor ครับ เมื่อทำการติดตั้งแล้วให้เรามาแก้ไขค่ามันที่เมนู System >> Configuration >>Admin แล้วดูที่แท็บ WYSIWYG Editor ให้เลือก Editor Type เ็ป็น Tiny MCE ตามรูป หลังจากนั้นเราก็จะสามารถใช้งานในส่วนของ

• Product Description
• Product Short Description
• CMS Page Content
• Static Block Content
• Category Description
• Newsletter Template

อ้างอิง : http://www.magentocommerce.com/wiki/wysiwyg/a_how-to#introduction
ปล. code ที่ผมนำมาอาจจะไม่เหมือนในเว็บไซต์อ้างอิง เพราะผมได้ทำการแก้ไขในส่วนของ path ที่ลิงค์ไปยัง tiny_mce.js ซึ่งถ้าทำตามผมได้อย่างถูกต้อง สามารถนำไปใช้งานได้แน่นอนครับ

โดยรูปแบบสิทธิ์ของสมาชิกบล็อกมีอยู่ด้วยกัน 5 รูปแบบ

• Administrator สมาชิกรูปแบบนี้มีสิทธิ์ปรับเปลี่ยนทุกอย่างในบล็อกของเราได้
• Editor สมาชิกในรูปแบบนี้สามารถดู , แก้ไข , ลบ , และเผยแพร่โพสต์ได้ ทั้งโพสต์ของคนอื่นและของตัวเอง พูดง่ายๆ ก็เหมือนกับ Moderator
• Author สมาชิกซึ่งมีหน้าที่เป็นนักเขียนโพสต์ สามารถโพสต์อะไรก็ได้ตามใจ และเผยแพร่ได้ทันทีโดยไม่ต้องรอตรวจสอบจากเรา หรือ admin คนอื่น รวมถึงการมีสิทธิ์แก้ไขโพสต์ของตัวเองได้ แต่ไม่สามารถไปแก้ไขโพสต์คนอื่น
• Contributor สมาชิกที่มีรูปแบบนี้มีหน้าที่คล้ายกับนักเขียน คือเขียนเรื่องและแก้ไขได้แต่โพสต์ของตัวเอง ไม่สามารถเผยแพร่ออกไปได้ ต้องให้ Editor ตรวจสอบก่อน
• Subscriber สมาชิกนี้สามารถทำได้แค่ออกความคิดเห็นหรือเขียน comment ได้

• com_jce_156.zip
• plg_jce_152.zip
• plg_jceutilities_217.zip

จากนั้นไปที่เมนู Component > JCE Administrator > Control Panel

จากนั้นคลิกที่ Icon Install เพื่อจะทำการติดตั้ง plugin ของ component jce editor

โหดลไฟล์ JCE_Plugin.zip จากนั้นทำการแตกซิบออกมาแล้วจะพบ 3 ไฟล์อยู่ในนั้นให้ทำการติดตั้ง

• jce_filemanager_150.zip
• jce_mediamanager_150.zip
• jce_imgmanager_ext_150.zip

เมื่อติดตั้งเสร็จให้เราไป ตั้งค่าคอนฟิกหลัก และปรับ Editor เป็น JCE โดยไปที่ดมนู Site > Global Configuration

จากนั้นกูที่ Site Settings ให้ทำการปรับ Default WYSIWYG Editor เป็น Editor – JCE 1.5.2 จากนั้น Save

Tiny MCE อันของเดิม

JCE Editor ชุดใหม่