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

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

snappy — Fri, 03 Jul 2009 20:09:35 +0000

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

จากนั้นมาต่อด้วยแก้ไข 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 = '
                serialize($this->getHtmlAttributes()).' >'.$this->getEscapedValue().'
        
        ';

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

Component : JCE editor ตัวช่วยเขียนบทความให้ง่ายขึ้น

snappy — Wed, 20 May 2009 10:45:20 +0000

JCE editor เป็น editor ที่จะมาช่วยเสริมในการเขียนบทความหรือเนื้อหาให้กับเรา มีฟังชั่นในการทำงานมากกว่า Tiny MCE ที่เราใช้กันอยู่ปกติ ซึ่งฮาวโฮสแนะนำครับว่าควรมีติดไว้อย่างยิ่งสำหรับ JCE editor ตัวนี้ห้ามพลาด!!!

ให้เราทำการดาวโหลด 3 ตัวนี้ หลังจากนั้นติดตั้งทั้ง 3 ตัวเลย

จากนั้นไปที่เมนู 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 ชุดใหม่

[Plugin] TinyMCEComments ทำให้ comment มี WYSIWYG

admin — Fri, 01 May 2009 06:26:39 +0000

TinyMCEComments เป็นตัวเสริมไว้สำหรับผู้ที่จะมา comment ในบล็อกของเรา เป็นเครื่องมือ WYSIWYG Editor ในส่วนของการแสดงความเห็น ว่างั้นไป ช่วยให้คนที่จะมาแสดงความคิดเห็นเรานั้นมีใส่ลูกเล่นไรได้บาง เช่น ตัวหนา ตัวเอียง ใส่ลิงค์ เป็นต้น สามารถ dowload มาติดตั้งได้ที่ http://wordpress.org/extend/plugins/tinymcecomments/ หลังจากติดตั้งแล้วใส่ส่วนของการปรับแต่งจะอยู่ที่ Settings > MCEComment

[Plugin] TinyMCE Advanced เสริม WYSIWYG Editer ให้กับ wordpress

admin — Tue, 28 Apr 2009 15:13:04 +0000

TinyMCE Advanced เป็นตัวเสริมที่จะทำให้เวลาเราเขียนเนื้อหาหรือบทความสามารถใส่ลูกเล่นเพิ่มเติมได้อีก เช่นพวก emoticon ต่างๆ เป็นต้น น่าใช้งานมากครับทำให้สะดวกเวลาเขียนเนื้อหาขึ้นเป็นกอง ควรติดตั้งไว้เป็นอย่างยิ่ง สามารถโหลดมาติดตั้งได้ที่ http://wordpress.org/extend/plugins/tinymce-advanced/

ในส่วนของการปรับแต่งนั้นให้ไปที่ Settings > TinyMCE Advanced ถ้าเราอยากใช้ไอคอนตัวไหนก็สามารถลากขึ้นมาวางไว้ด้านบนเพื่อใช้งานได้เลยครับ