Home Manual สอนการปรับแต่ง ECShop เปลี่ยน FCKeditor เดิมๆให้เป็น UEditor แสดงผลใน ECSHOP

เปลี่ยน FCKeditor เดิมๆให้เป็น UEditor แสดงผลใน ECSHOP

5 min read
ปิดความเห็น บน เปลี่ยน FCKeditor เดิมๆให้เป็น UEditor แสดงผลใน ECSHOP
0
763

สำหรับคนทำเว็บแล้วคงจะหลีกเลี่ยงการใช้งาน text editor ไม่ได้ คนทำเว็บเองก็ต้องใช้ text editor ในการเขียนบทความต่างๆ เพื่อโพสขึ้นไปยังเว็บของท่าน วันนี้มาแนะนำ text editor ที่มีชื่อว่า  ซึ่ง UEditor ตัวนี้เป็น text editor ทางประเทศจีนพัฒนาค่ะ มีการอัพเดทตลอดจากที่ดูการปล่อยในแต่ละรุ่นของเค้าออกมานะคะ ทางเราเลยจับมาใส่ระบบ ECSHOP ค่ะ หน้าตาสวยเลย สำหรับท่านใดเป็นนักพัฒนาเว็บไซต์อยากได้ตัว UEditor ก็ไปโหลดฟรีได้เลยค่ะที่เว็บหลักเค้า  http://ueditor.baidu.com/website/

ส่วนวิธีปรับแต่งการใช้งานใน ระบบ ECSHOP มาดูกันค่ะ ว่าปรับอย่างไร นี่เป็นหน้าตาหลังปรับแล้วจะเป็นแบบนี้นะคะ

2016-09-07_18-23-19

1. ดาวน์โหลดชุดไฟล์ Ueditor ที่เราแนบมากับบทความนี้ด้านล่างนะคะ แตกไฟล์ .rar ออกมาจะได้ชื่อแฟ้ม ueditor อัพไฟล์ขึ้น FTP โฮสติ้งที่ท่านใช้งาน ตำแหน่งที่อัพขึ้นไปอัพไว้ที่ includes  แบบนี้นะคะ /includes/ueditor

2. เปิดไฟล์ lib_main.php ตำแหน่งไฟล์อยู่ที่ /admin/includes/lib_main.php
ค้นหาโค๊ด

/** 
 * 生成编辑器 
 * @param string input_name 输入框名称 
 * @param string input_value 输入框值 
 */ 
function create_html_editor($input_name, $input_value = '') 
{ 
 global $smarty; 
 
 $editor = new FCKeditor($input_name); 
 $editor->BasePath = '../includes/fckeditor/'; 
 $editor->ToolbarSet = 'Normal'; 
 $editor->Width = '100%'; 
 $editor->Height = '320'; 
 $editor->Value = $input_value; 
 $FCKeditor = $editor->CreateHtml(); 
 $smarty->assign('FCKeditor', $FCKeditor); 
}

แทนที่ด้วยโค๊ดนี้ บันทึกจัดเก็บไฟล์อัพขึ้นตำแหน่งเดิม

 /** 
 * 生成编辑器 
 * @param string input_name 输入框名称 
 * @param string input_value 输入框值 
 */ 
 function create_html_editor($input_name, $input_value = '') 
 { 
 global $smarty; 
 $kindeditor=" 
 <script id='editor' name='$input_name' type='text/plain' style='width:1024px;height:500px;'>$input_value</script> 
 <script type='text/javascript' charset='utf-8' src='../includes/ueditor/ueditor.config.js'></script> 
 <script type='text/javascript' charset='utf-8' src='../includes/ueditor/ueditor.all.min.js'> </script> 
 <script type='text/javascript' charset='utf-8' src='../includes/ueditor/lang/en/en.js'></script> 
 <script> 
 var ue = UE.getEditor('editor'); 
 UE.getEditor('editor').focus(); 
 </script> 
 <input type=\"submit\" value=\"แก้ไข\" /> 
 "; 
 $smarty->assign('FCKeditor', $kindeditor);
 }

3. เปิดไฟล์ pageheader.htm ตำแหน่งไฟล์อยู่ที่ admin/templates/pageheader.htm
ค้นหาโค๊ด

{insert_scripts files="../js/transport.js,common.js,../js/utils.js"}

แทนที่ด้วยโค๊ดนี้ บันทึกจัดเก็บไฟล์อัพขึ้นตำแหน่งเดิม

 <script type="text/javascript" src="../includes/ueditor/fix_jquery/jquery.min.js" rel="stylesheet" /></script>  
 <script type="text/javascript" src="../includes/ueditor/fix_jquery/jquery.json-1.3.js" rel="stylesheet" /></script> 
 <script type="text/javascript" src="js/common.js" rel="stylesheet" /></script>  
 <script type="text/javascript" src="../includes/ueditor/fix_jquery/transport_json.js" rel="stylesheet" /></script> 
 {insert_scripts files="../js/utils.js"}

4. เปิดไฟล์ goods_info.htm ตำแหน่งไฟล์ /admin/templates/goods_info.htm
ค้นหาโค๊ด

document.forms['theForm'].reset();

แทนที่ด้วยโค๊ดนี้ บันทึกจัดเก็บไฟล์อัพขึ้นตำแหน่งเดิม

//document.forms['theForm'].reset();

 

อัพเดท 8/9/2016 การแสดงผลในเมนู แก้ไขฟอร์มสั่งซื้อ ถ้าไม่โหลดไปทับเดี๋ยวจะใช้งานในส่วนนี้กันไม่ได้นะคะ

2016-09-08_18-25-00

5. เปิดไฟล์ order.php  ตำแหน่งไฟล์ /admin/order.php
ค้นหาโค๊ด

 include_once(ROOT_PATH."includes/fckeditor/fckeditor.php");

 /* 编辑器 */
 $editor = new FCKeditor('FCKeditor1');
 $editor->BasePath = "../includes/fckeditor/";
 $editor->ToolbarSet = "Normal";
 $editor->Width = "95%";
 $editor->Height = "500";
 $editor->Value = $file_content;

 $fckeditor = $editor->CreateHtml();
 $smarty->assign('fckeditor', $fckeditor);

แทนที่ด้วยโค๊ดนี้ บันทึกจัดเก็บไฟล์อัพขึ้นตำแหน่งเดิม

$kindeditor=" 
<script id='editor' name='FCKeditor1' type='text/plain' style='width:1024px;height:500px;'>$file_content</script> 
<script charset='utf-8' src='../includes/ueditor/ueditor.config.js'></script> 
<script charset='utf-8' src='../includes/ueditor/ueditor.all.min.js'></script> 
<script charset='utf-8' src='../includes/ueditor/lang/en/en.js'></script> 
<script> 
 var ue = UE.getEditor('editor'); 
 </script> 
";

เป็นอันเสร็จค่ะทดสอบได้เลยใน Admin ECSHOP สำหรับท่านใดปรับแต่งโค๊ดไม่เก่งก็ดาวน์โหลดไฟล์ไปทับตำแหน่งเดิม และอัพแฟ้มชุด UEditor ที่แนบมาในบทความนี้ตามตำแหน่งที่แจ้งไปใน ข้อที่ 1 ได้เลยค่ะ

6. อัพเดทไฟล์ topic_edit.html

แก้ไข Fix 26/11/2016 ปัญหาการแสดงผลใน admin นะคะ ดาวน์โหลดและอัพทับตำแหน่งเดิมได้เลย

ท่านใดสนใจจะดาวน์โหลด UEditor ต้นฉบับก็ที่นี่เลยค่ะ http://ueditor.baidu.com/website/ เป็นของประเทศจีนะคะใช้งานได้ดีและฟรีทีเดียวเชียว หรือ จะเทสกับ Demo เค้าก็มีให้ทดสอบค่ะ http://ueditor.baidu.com/website/onlinedemo.html

Download Attachments

Load More Related Articles
Load More By Goi
Load More In สอนการปรับแต่ง ECShop
Comments are closed.