วิธีการติดตั้ง TinyMCE ให้กับ magento

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 ซึ่งถ้าทำตามผมได้อย่างถูกต้อง สามารถนำไปใช้งานได้แน่นอนครับ

บทความแนะนำ

รวมวิธีการใช้ Wordpress, Joomla, Drupal, Magento และ SEO

Knowledge Base by howhost.com

วิธีการติดตั้ง TinyMCE ให้กับ magento