FCKeditor Tool ช่วยเขียน HTML แบบ WYSIWYG

หัวข้อ บทความ แทก HTML | JavaScript

หลายๆท่านคงมีโอกาสได้ใช้หรือคงผ่านตามาบ้างแล้วสำหรับตัวช่วยเขียน HTML ตัวนี้วันนี้ผมขออธิบาย
การใช้งานแบบละเอียดยิบให้ฟัง จริงๆแล้วผมว่าจะเขียนบทความเจ้า FCKeditor นี่หลายครั้งแล้วแต่รอจน
มันออก Version เต็มก่อนดีกว่า หุหุ เขียนทีเดียวจะได้ใช้งานได้นานๆ

FCKeditor คืออะไร

มันคือเครื่องมือที่ช่วยตอบคำถามให้กับลูกค้าเคยไหมครับที่ลูกค้ามักให้เราทำหน้า Admin Control ต่างๆ
เพื่อเพิ่มลด ข่าวสาร ต่างๆ และที่สำคัญคือ เค้ามักจะทำถามว่า

ช่องเนื้อหาเนี่ยสามารถให้มันยืดหยุ่นได้ไหม ให้ใส่ตัวหนา ตัวเอียง สี หรือใส่รูปเข้ามา

หุหุ ง่ายที่สุดก็ให้ลูกค้าแหล่ะใส่เป็น HTML เข้ามา

ก็แน่นอนลูกค้าที่ไหนจะมาศึกษาพวก HTML เหล่านี้เต็มที่ที่สุด ลูกค้าก็คงใช้พวก Word เป็น

นี่แหล่ะครับคือสิ่งที่ FCKeditor เข้ามาตอบโจทย์นี้ FCKeditor ก็คือ Tool ที่สามารถเปลี่ยนช่อง Textarea ให้กลายเป็น
ช่องกรอกข้อมูลแบบ Word ได้ สามารถใส่ตัวหนาตัวเอียง สี รูป ตาราง Flash link ได้ตามใจที่คุณต้องการ

Download และติดตั้ง

ไปหา Download มาได้เลยที่ http://www.fckeditor.net ล่าสุด Version 2 ออกเรียบร้อยแล้ว

การติดตั้ง

ผมอ้างอิงจาก Version 2 นะครับเพราะเท่าที่ตามๆมา พอ Version เปลี่ยนการติดตั้งก็เปลี่ยนไปบ้างเล็กน้อย

Download มาแล้วแตก Zip ออกแล้วเปลี่ยนชื่อ Folder ให้เป็น FCKeditor
เข้าไปที่ FCKeditor/fckconfig.js และทำการ Config โดยให้เลือกภาษา Server Side ที่คุณใช้ ไม่ว่าจะ ASP.Net, ColdFusion, Perl, PHP
อย่างผมใช้ PHP ผมก็จะ Config ให้เป็นดังนี้

FCKConfig.LinkBrowser = true ;
FCKConfig.LinkBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Connector=connectors/php/connector.php' ;
FCKConfig.LinkBrowserWindowWidth = screen.width * 0.7 ; // 70%
FCKConfig.LinkBrowserWindowHeight = screen.height * 0.7 ; // 70%
FCKConfig.ImageBrowser = true ;
FCKConfig.ImageBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Type=Image&Connector=connectors/php/connector.php' ;
FCKConfig.ImageBrowserWindowWidth = screen.width * 0.7 ; // 70% ;
FCKConfig.ImageBrowserWindowHeight = screen.height * 0.7 ; // 70% ;

FCKConfig.FlashBrowser = true ;
FCKConfig.FlashBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/php/connector.php' ;
FCKConfig.FlashBrowserWindowWidth = screen.width * 0.7 ; //70% ;
FCKConfig.FlashBrowserWindowHeight = screen.height * 0.7 ; //70% ;

FCKConfig.LinkUpload = true ;
FCKConfig.LinkUploadURL = FCKConfig.BasePath + 'filemanager/upload/php/upload.php' ;
FCKConfig.LinkUploadAllowedExtensions = "" ; // empty for all
FCKConfig.LinkUploadDeniedExtensions = ".(php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgi)$" ; // empty for no one

FCKConfig.ImageUpload = true ;
FCKConfig.ImageUploadURL = FCKConfig.BasePath + 'filemanager/upload/php/upload.php?Type=Image' ;
FCKConfig.ImageUploadAllowedExtensions = ".(jpg|gif|jpeg|png)$" ; // empty for all
FCKConfig.ImageUploadDeniedExtensions = "" ; // empty for no one

FCKConfig.FlashUpload = true ;
FCKConfig.FlashUploadURL = FCKConfig.BasePath + 'filemanager/upload/php/upload.php?Type=Flash' ;
FCKConfig.FlashUploadAllowedExtensions = ".(swf|fla)$" ; // empty for all
FCKConfig.FlashUploadDeniedExtensions = "" ;
คือเลือกทุกอย่างที่ใช้ PHP นั้นแหล่ะ
เข้าไปแก้ไข FCKeditor/editor/filemanager/browser/default/connectors/php/config.php เพิ่มเติม

แก้
$Config['Enabled'] = false ;
ให้เป็น
$Config['Enabled'] = true ;

$Config['UserFilesPath'] = '/UserFiles/' ;

สำหรับ UserFilesPath เป็น Folder ที่ใช้เก็บรูปหรือ File ต่างๆที่ถูก Upload ผ่าน FCKeditor เข้ามา สามารถเปลี่ยนได้ตามต้องการ

เรียบร้อยแล้ว Folder ต่างๆก็จะมีแบบนี้ลองตั้ง Server ใช้งานดูเลย

เริ่มต้นตัวอย่างใช้งาน
FCKedior มีตัวอย่างให้ศึกษาเยอะเลยอยู่ใน /FCKeditor/_samples/default.html

ซึ่งแน่นอนว่าส่วนใหญ่แล้วคงไม่อ่านกันอยู่ดี -__- เอาล่ะผมมาสรุปให้ฟังละกัน

การทำช่องสำหรับเพิ่มข้อมูล

เป็นกรณีสำหรับเพิ่มข้อมูลทำช่องให้กรอกเพิ่มข่าวสารต่างๆ ผมจะใช้ Code ประมาณนี้

<HTML>
<HEAD>
<TITLE>TEST</TITLE>
<meta http-equiv="content-type" content="text/html; charset=windows-874">
<script type="text/javascript" src="FCKeditor/fckeditor.js"></script>
</HEAD>
<BODY>
<form>
<script type="text/javascript">

</script>
</form>
</BODY>
</HTML>

อธิบาย

<script type="text/javascript" src="FCKeditor/fckeditor.js"></script>

อันนี้กำหนดไว้เรียกใช้ FCKeditor

var oFCKeditor = new FCKeditor('TEXTCONTENT');

กำหนดเปิด FCKeditor โดย TEXTCONTENT คือชื่อตัวแปรที่จะส่งเข้าไปให้ CGI เรียกรับ

oFCKeditor.BasePath = '/FCKeditor/';

กำหนดว่า Path ที่เราเรียกใช้ FCKeditor อยู่ที่ใด

oFCKeditor.Width = '95%';
oFCKeditor.Height = '400';

กว้าง ยาว

oFCKeditor.Value = '' ;

เป็นข้อมูลเดิมกรณีที่จะนำข้อมูลเก่ามาแก้ไข เดี๋ยวอธิบายเพิ่มเติมครับ

พอเปิด test.html ขึ้นมาก็จะได้ Form ใช้งานแบบนี้แหล่ะครับ

การทำช่องสำหรับแก้ไขข้อมูล

เป็นกรณีสำหรับดึงข้อมูลเก่ามาแก้ไข เช่น หน้าข่าวสารต่างๆ
<?
$TEXTCONTENT = "<b>ข้อมูล HTML ที่ได้มาจากฐานข้อมูล<hr><hr><font color=\"red\">ทดสอบๆ</font></b>";
$TEXTCONTENT = eregi_replace("\n", '', $TEXTCONTENT);
$TEXTCONTENT = eregi_replace("\r", '', $TEXTCONTENT);
$TEXTCONTENT = addslashes($TEXTCONTENT);
?>
<HTML>
<HEAD>
<TITLE>TEST</TITLE>
<meta http-equiv="content-type" content="text/html; charset=windows-874">
<script type="text/javascript" src="FCKeditor/fckeditor.js"></script>
</HEAD>
<BODY>
<form>
<script type="text/javascript">

</script>
</form>
</BODY>
</HTML>

อธิบาย

อธิบายสิ่งที่แตกต่างจากหน้าปกติก็คือการนำข้อมูลเดิมออกมาแก้ไขนำมาใส่ในช่อง Value
โดยก่อนที่จะนำมาใส่ต้องลบเครื่องหมายลงบรรทัดไม่ว่าจะเป็น \n หรือ \r และทำการเพิ่ม slash เข้าไปด้วย

แค่นี้ก็จะมีข้อมูลให้แก้ไขแล้ว

ได้ข้อมูลมาแก้ไขแล้ว

การสร้างเมนูหลายๆแบบให้เลือกใช้

บางครั้งช่องเครื่องมือต่างๆอาจจะไม่จำเป็นต้องเยอะแยะแบบที่เห็นเราสามารถกำหนดได้เองโดยมีวิธีการแบบนี้

เข้าไปที่ FCKeditor/fckconfig.js แก้ไขกลุ่ม FCKConfig.ToolbarSets โดยเลือกเฉพาะปุ่มที่เราต้องการ
ตัวอย่างผมเพิ่ม ToolbarSet แบบที่ตัวเองต้องการเข้าไป

FCKConfig.ToolbarSets["SCRIPTDD"] = [
['Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink','-','About'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','Rule','Smiley','SpecialChar','UniversalKey']
] ;

เสร็จแล้วก็เพิ่มระบุไปว่าต้องการให้ ToolbarSet นี้

<script type="text/javascript">

</script>

ก็จะได้ Toolbar ที่ต้องการออกมา

สรุปครับ
บทความนี้ออกจะแข็งๆหน่อย ^^ ไม่ได้เขียนบทความซะนานอีกอย่างเจ้า FCKeditor นี้ส่วนตัวใช้มาจนปรุแล้วเลยไม่รู้จะเอาอะไรมาโม้
ใครลองเอาไปดัดแปลงใช้ก็ลองดูฮะลูกค้าชอบใจแน่นอน

รูปคุณ Read (11,841) Comments (50) 2005-09-17 22:46:12

ความคิดเห็น

คือผมก็กำลังใช้ FCK อยู่เหมือนกันครับแต่มีปัญหาตรงที่เราจะกำหนด path สำหรับเก็บรูปภาพ ไฟล์ Flash ได้ไงครับ

รูปคุณ อานนท์ โดยคุณ อานนท์ 2007-05-09 21:27:21

อยากถามว่าตัวนี้ FCKeditor เป็น open source รึเปล่าครับ ผู้รู้ช่วยตอบจะขอบพระคุณเป็นอย่างสูง

รูปคุณ pitupoom โดยคุณ pitupoom 2007-05-11 11:41:34

<?php
/*
* FCKeditor - The text editor for internet
* Copyright (C) 2003-2005 Frederico Caldeira Knabben
*
* Licensed under the terms of the GNU Lesser General Public License:
* http://www.opensource.org/licenses/lgpl-license.php
*
* For further information visit:
* http://www.fckeditor.net/
*
* File Name: sample02.php
* Sample page.
*
* File Authors:
* Frederico Caldeira Knabben (fredck@fckeditor.net)
*/

include("../../fckeditor.php") ;
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<body bgcolor="#FFFFFF">
<form name="form1" method="post" action="save_data.php">
<p>id
<input type="text" name="id">
<br>
password
<input type="password" name="pass">
<br>
date
<input type="text" name="date">
<br>
name
<input type="text" name="name">
<br>
surname
<input type="text" name="surname">
<br>
email
<input type="text" name="email">
<br>
tel
<input type="text" name="tel">
<br>
address
<textarea name="address" cols="35" rows="4"></textarea>
</p>
<p>
<input type="submit" name="Submit" value="บันทึกข้อมูล">
<input type="reset" name="Submit2" value="Clear">
</p>
</form>
</body>
</html>
-------------------------------------จะต้องเขียนยังงัยเพื่อที่จะใช้ FCK แทน textarea[address]--------------------
ขอบคุณมากเลยถ้าให้คำแนะนำครับ

รูปคุณ อยากใช้ โดยคุณ อยากใช้ 2007-05-17 16:19:09

เรียน คุณ อยากใช้

Download Version ล่าสุดจาก Web แล้วลองเข้าไปดู File ตัวอย่างใน Folder
_samples\php ดูนะครับ

ที่คุณถามมา sample01.php น่าจะตรงกับคำตอบครับ

รูปคุณ 9AuM โดยคุณ 9AuM 2007-05-17 20:23:22

วิธี submit ไปแสดงผลทำอย่างไรครับ

รูปคุณ thanasap โดยคุณ thanasap 2007-05-18 00:01:56

ผมส่งค่าจาก ฟอร์ม ไป เพื่อที่จะบันทึก น่ะครับ มี id , detail ตัวโค๊ตน่ะครับ
----------------------------------------------------------------------------------------
<?php
include("FCKeditor/fckeditor.php") ;
?>
<html>
<head>
<title>FCKeditor - Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<form action="save_data.php" method="post">
<?php
$oFCKeditor = new FCKeditor('detail') ;
$oFCKeditor->BasePath = '/FCKeditor/';
$oFCKeditor->Value = 'Default text in editor';
$oFCKeditor->Create() ;
?>
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>

--------ฟอร์มที่รับค่าเพื่อบันทึกน่ะครับ----------------------------------------
<html>
<body>
<?
$host="localhost";
$username="root";
$password="99999";
$db="ole_db";
$tb="customer";
$connect= mysql_connect( $host,$username,$password) or die ("ติดต่อกับฐานข้อมูล Mysql ไม่ได้ ");
mysql_query("SET character_set_results=tis620");
mysql_query("SET collation_connection = tis620_thai_ci");
mysql_query("SET NAMES 'tis620'");

mysql_select_db($db) or die("เลือกฐานข้อมูลไม่ได้");

$sql="select * from $tb where id=$id";

$db_query=mysql_db_query($db,$sql);

mysql_query("INSERT INTO $tb (id, detail) values('$id', '$detail')") or die ("Add ข้อมูลลง Table ไม่ได้ ");
echo "Add ข้อมูลลง Table เสร็จเรียบร้อยแล้ว ";

mysql_close($connect);
?>
</body>
</html>
----------------------------แต่การบันทึก ดันบันทึกแค่ id ส่วน detail ไม่บันทึก ผมต้องทำงัยดีครับ คุณ 9AuM ช่วยผมทีครับ ติดนิดเดียวจริงๆ
ขอบคุณครับ

รูปคุณ อยากใช้ โดยคุณ อยากใช้ 2007-05-18 10:59:05

ผมพิมพ์ผิดครับ ขอโทษด้วย
<html>
<body>
<?
$host="localhost";
$username="root";
$password="3147573";
$db="ole_db";
$tb="customer";
$connect= mysql_connect( $host,$username,$password) or die ("ติดต่อกับฐานข้อมูล Mysql ไม่ได้ ");
mysql_query("SET character_set_results=tis620");
mysql_query("SET collation_connection = tis620_thai_ci");
mysql_query("SET NAMES 'tis620'");

mysql_select_db($db) or die("เลือกฐานข้อมูลไม่ได้");

$sql="select * from $tb where id=$id";

$db_query=mysql_db_query($db,$sql);

mysql_query("INSERT INTO $tb (id, detail) values('$id', '$detail')") or die ("Add ข้อมูลลง Table ไม่ได้ ");
echo "Add ข้อมูลลง Table เสร็จเรียบร้อยแล้ว ";

mysql_close($connect);
?>
</body>
</html>

รูปคุณ อยากใช้ โดยคุณ อยากใช้ 2007-05-18 11:02:40

submit ไปแล้วรูปไม่ไปด้วยครับไปแต่ข้อความ

รูปคุณ thana โดยคุณ thana 2007-05-18 19:46:50

ทำได้แล้วครับ

รูปคุณ thana โดยคุณ thana 2007-05-19 09:33:37

การดึงข้อมูลจากฐานข้อมูลมาทำการแก้ไข จะต้องทำงัยครับ
งง เลย แต่การเพิ่มทำได้แล้ว ถ้ามีใครช่วยได้ ตอบผมทีน่ะครับ
ขอบคุณครับ *00*

รูปคุณ biggolo โดยคุณ biggolo 2007-05-21 14:07:06

พอเอาลง Server แล้ว Upload รูปไม่ได้ครับ เราตต้องไปดูตรงส่วนใหน? แตตอนที่ลองบน Localhost มัน Upload ได้ปกติ ครับแน่ะนำที

รูปคุณ BB โดยคุณ BB 2007-05-29 06:40:46

ทำได้แล้วครับ

รูปคุณ biggolo โดยคุณ biggolo 2007-05-30 13:32:28

แล้วจะทำกับ asp.net ละครับ

รูปคุณ Curly โดยคุณ Curly 2007-05-30 17:02:13

งมอยู่ตั้งนาน ได้แล้วครับขอบคุณมาก
ไม่ยากเลย ขออภัยด้วยครับที่ถามบ่อยไป
แต่ต้องชมว่าชี้ทางให้ผม ได้เห็นวิธีที่ดี
--------------------------ขอบคุณมากครับพี่คนหล่อ---------------------

รูปคุณ biggolo โดยคุณ biggolo 2007-06-02 17:12:50

ยังหาทางใช้กับ asp.net ไม่ได้เลยครับ เอาให้มันออกเป็นหน้าตาได้แล้ว แต่มันแบบแปลกๆ ใครช่วยทีครับ

รูปคุณ Curly โดยคุณ Curly 2007-06-04 17:40:01

asp.net มันต้องทำอะไรเพิ่มเติมไหมอะครับ upload รูปไม่ได้ งมมาหลายวันแล้ว T_T ขอบคุณครับ

รูปคุณ Curly โดยคุณ Curly 2007-06-05 16:15:25

การดึงข้อมูลจากฐานข้อมูลมาทำการแก้ไข จะต้องทำงัยครับ
คุณbiggolo ทำได้แล้วช่วยบอกผมด้วยครับ ขอขอบคุณล่วงหน้า
thanasap@hotmail.com

รูปคุณ thanate โดยคุณ thanate 2007-06-05 18:21:49

ไม่มีใครทำกับ asp.net เลยเหรอครับ T_T

รูปคุณ Curly โดยคุณ Curly 2007-06-06 15:57:59

นำมาใช้แล้วค่ะ แต่ไม่ต้องการ ให้มีการ ก๊อบปี้ / วาง ไม่ทราบว่าต้องไปแก้ script ตรงไหน ยังไงบ้างคะ รบกวนผู้รู้ช่วยตอบด้วยค่ะ จะเปงพระคุณมากค่ะ ขอบคุณล่วงหน้านะคะ :)

รูปคุณ dragonfly โดยคุณ dragonfly 2007-06-07 19:22:25

ผมเคยเอาส่วนที่ fckeditor.js มาแก้ใหม่มันไม่เปลี่ยนให้เหมือนกัน ก็ยัง งง? อยู่ ไม่ทราบว่าเข้าไปแก้ดูหรือยัง ครับตรง
FCKconfig.Toolbarsets["Modify"] =[ //ของเดิม ["Default"]
[ ส่วนนี้เราก็เลือกเอาว่าจะ เอาอะไร?มาใช้บ้าง Copy จาก Default มาแก้ก้ได้ครับ ]
];

และตรง file fckeditor.php บรรทัด
$this->toolbarSet='Modify';

//ไม่แน่ใจว่าทำผิดตรงใหนน่ะ เพราะของยังไม่เป็นไปตามที่ต้องการ...แต่ผมยังไม่ได้ทำต่อครับ ตอนนี้กำลังจะทำให้มันดึงข้อมูลเก่ามาแก้ใข ครับ ผล ยังไม่ได้เหมือนกัน...อิ อิ+++ มั่วต่อปายยย

ท่านใดมีวิธี โปรดแน่นำด้วย คราบบบ

รูปคุณ BB โดยคุณ BB 2007-06-08 15:34:45

ส่วนเรื่องดึงข้อมูลจาก ฐานข้อมูล มาแก้ใขนั้น ถ้าเป็น TEXTAREA ของผมดึงมาแก้ได้ แต่ยังหาวิธีให้มัน เข้า FCKeditor ยังบ่ได่ ครับ...กำลังมั่ว อยู่ครับ

รูปคุณ BB โดยคุณ BB 2007-06-08 15:41:04

ไม่ทราบว่าถ้าเราทำจาก asp.net เราสามารถเปลี่ยนconnector เป็น php หรือ asp ได้ไหมครับ แต่ว่าหน้า page ของผมเป็น aspx นะครับ ผมมีปัญหาเรื่อง
พอดีมีปัญหาเรื่องการ upload file ต่างๆ จะเห็นได้ว่า สามารถทำได้ 2 ทางคือ จากการ browse server , upload จาก tab

ซึ่งจะเห็นได้ว่า การ upload จาก tab upload นั้นสามารถดัก file ที่ upload ด้วยนามสกุล จากที่ config ไว้ใน fckconfig.js

แต่ว่าการ upload จากการกด browse server นั้นไม่ได้ดัก file ตามที่ config ใน fckconfig.js

และอีกอย่างคือ การ upload จาก tab upload นั้นจะไปอยู่ที่ Userfile แต่ว่าถ้า upload จากการ browse server จะอยู่ใน Userfile/image ซึ่งจะมองไม่เห็นกัน
ปัญหาของผมก็คือ ตอนแรกผมปิด tab upload เพื่อให้ user upload จาก browse server แล้วสามารถหาเจอ นำมาใช้ได้อีกหากต้องการใช้ file เดิม แต่ว่า function ของตรงปุ่ม browse server นั้นไม่มีการดัก นามสกุล ของ file ที่ upload ตาม config ใน fckconfig.js ซึ่งผมเองก็ได้พยายามเอา function ดักนามสกุลมาใช้แต่ก็ไม่สามารถทำได้ เลยแก้ปัญหาด้วยการ เปิด tab upload ปิด function upload ในปุ่ม browse server แล้วแก้ User File Path เป็น /UserFiles/Image เพื่อให้เวลา upload จาก tab upload นั้น file จะไปอยู่ใน /UserFiles/Image

แต่ปัญหาอีกอย่างที่เกิดขึ้นก็คือ ตอนผมกดปุ่ม Browse server นั้นมันดันสร้าง folder ชื่อ Image ขึ้นมาอีกเป็น /UserFiles/Image/Image ทีนี้ผมเลยจนปัญญาในการแก้ปัญหา จึงรบกวนผู้รู้ช่วยหาทางแก้ไขให้ผมทีครับ
ขอบคุณครับ

รูปคุณ Curly โดยคุณ Curly 2007-06-22 08:47:42

ซึ่งแน่นอนว่าส่วนใหญ่แล้วคงไม่อ่านกันอยู่ดี -__- เอาล่ะผมมาสรุปให้ฟังละกัน

ูู^^
อันนี้เหมือนรู้เรย

รูปคุณ x โดยคุณ x 2007-06-25 11:21:33

สำหรับ asp.net (vb) ประมาณนี้

copy FredCK.FCKeditorV2.dll ไว้ใน bin
<%@ Register TagPrefix="editor" Namespace="FredCK.FCKeditorV2" Assembly="FredCK.FCKeditorV2" %>

Sub mysubmit_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles mysubmit.Click
my_value=my_txt.value
end sub

ส่วนของ form
<form id="Form1" runat="server">
<editor:FCKeditor ID="my_txt" runat="server" AutoDetectLanguage="true" BasePath="editor_tools/" Height="500px" Width="95%"></editor:FCKeditor>
<asp:Button ID="mysubmit" runat="server" Text="submit" asp:Button>
</form>

รูปคุณ ผ่านมา โดยคุณ ผ่านมา 2007-07-13 16:10:52

เขียนเรียกมาแสดงไม่ได้ครับ เขียนบันทึกได้แต่ text รูปไม่มาน่ะครับ
ใครทำได้ ขอโค๊ดตัวอย่างแสดงหน้า หน่อยครับ
ส่งมาเมลนี้น่ะครับ room_tong@hotmail.com

ขอบคุณล่วงหน้าทุกท่านครับ

รูปคุณ ต้อง โดยคุณ ต้อง 2007-08-20 04:32:46

fck การดึงข้อมูลเก่าขี้นมาแก้ไข แต่ทำได้บรรทัดเดียว
ถ้ามีการปัดบรรทัดลงมาเมื่อต้องการพิมพ์ข้อความจำนวนมาก
fck จะทำงานไม่ได้ ลองไปดูใน ฐานข้อมูล ถ้ามีแท็ก<p></p>หรือ<br>จะ
ดึงข้อมูลไม่ได้ ลองดูซิครับ ผมก็กำลังหาคำตอบอยู่เหมือนกัน

รูปคุณ choma โดยคุณ choma 2007-09-18 11:27:26

เขียนบน jsp ได้หรือเปล่าครับ และ ถ้าจะเก็บ File Tempate นั้น บนเครื่อง Client เอง จะทำอย่างไร และ Open File จะทำอย่างไรครับ ช่วยทีนะครับ จนปัญญาแล้วครับ

รูปคุณ Ultraman โดยคุณ Ultraman 2007-09-20 16:59:50

ผมทำตามขั้นตอนทุกอย่างแล้ว ครับลองสร้าง test.html ก็ไม่มี editor ขึ้นมาโชว์ครับ ใช้งานไม่ได้ หรือว่ามันคนละเวอร์ชั่น ครับ ผมโหลด 2.5 มาใช้ เพราะว่าตัวอย่างที่สอนใช้ 2.0 ช่วยแนะนำหน่อย ครับ ใช้งานกับ PHP ครับ ใครมี เวอร์ชั่ว 2.0 ช่วยส่งให้หน่อยนะ ครับ ทางอีเมล์ zipzap_2006@hotmail.com ส่งลิงค์มาก็ได้ ครับ ขอบคุณมาก ครับ

รูปคุณ tommy โดยคุณ tommy 2007-10-24 15:29:13

มีวิธีเพิ่ม font บ้างไหม ครับ
ผมลองพิมพ์ชื่อ font เข้าไปใน fckeditor.js ตามแบบที่มันมีอยุ่ แต่ไม่แสดงผล font ตัวใหม่ที่เพิ่มเข้าไป

รูปคุณ ชัย โดยคุณ ชัย 2007-10-28 18:47:49

ดูที่ fckeditor.js นั้นแหล่ะครับ ที่

FCKConfig.FontNames = 'Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;

เพิ่มเติม font ที่อยากได้ตามสะดวก

เสร็จแล้ว clear cache ซักทีก่อนเปิด Reload ครับ

จะเห็น font เพิ่มเข้ามาในเมนูเอง

รูปคุณ 9AuM โดยคุณ 9AuM 2007-10-29 14:37:02

ถ้าใน tool ของรูปภาพ เราไม่ต้องการเปิด mode ให้เค้า upload รูป คือทำได้แค่ post เป็น url จะสามารถปิด function upload รูปได้หรือปล่าวคับ

รูปคุณ วัชรินทร์ โดยคุณ วัชรินทร์ 2007-11-07 15:48:18

ตอบคุณ วัชรินทร์ ถ้าจะเอาแบบนั้นก็ดูที่ fckeditor.js ครับ

หาบรรทัด

FCKConfig.LinkUpload = true ;
FCKConfig.ImageUpload = true ;
FCKConfig.FlashUpload = true ;

เปลี่ยนให้เป็น false ให้หมด

FCKConfig.LinkUpload = false ;
FCKConfig.ImageUpload = false ;
FCKConfig.FlashUpload = false ;

แค่นี้ก็จะไม่มีปุ่มให้ upload แล้วครับ

รูปคุณ 9AuM โดยคุณ 9AuM 2007-11-07 17:56:43

ขอบคุณมากคร้าบ....

รูปคุณ วัชรินทร์ โดยคุณ วัชรินทร์ 2007-11-07 18:39:35

หลังจากที่ผมทำตามถึงขั้นตอน "การทำช่องสำหรับเพิ่มข้อมูล" มันขึ้น Page แจ้งแบบข้างล่างนี้มาน่ะครับ

---------------------------------------------------------------------------------------------------
Not Found

The requested URL /FCKeditor/editor/fckeditor.html was not found on this server.
--------------------------------------
Apache/2.2.4 (Win32) PHP/5.2.3 Server at localhost Port 80
---------------------------------------------------------------------------------------------------

อยากทราบว่าเป็นที่อะไรเหรอครับ เป็นที่ AppServ หรือป่าวครับ (ตอนนี้ใช้ AppServ 2.5.9) หรือว่าเป็นที่ Script (ปัจจุบัน 2.4.3)

รูปคุณ Holy โดยคุณ Holy 2007-11-10 16:16:17

โทษที พิมพ์ตก เดี๋ยวอ่านแล้วงง

หลังจากที่ผมทำตามถึงขั้นตอน "การทำช่องสำหรับเพิ่มข้อมูล" เมื่อผมเปิดหน้า Page มันขึ้นมา มันจะมีข้อความแจ้งดังข้างล่างนี้น่ะครับ (ไม่ใช่หน้า Page มีปัญหาแต่เป็นเฉพาะตรงส่วนที่ดึงส่วนของ FCKeditor มาใช้ เพราะผมลองเอาเฉพาะตรง Script ใน form ออก.. มันเป็นหน้าโล่งๆเลย ต่อให้ใส่ข้อความลงไปก็จะแสดงผลผิดพลาดเฉพาะตรงส่วนนี้น่ะ)

---------------------------------------------------------------------------------------------------
Not Found

The requested URL /FCKeditor/editor/fckeditor.html was not found on this server.
--------------------------------------
Apache/2.2.4 (Win32) PHP/5.2.3 Server at localhost Port 80
---------------------------------------------------------------------------------------------------

อยากทราบว่าเป็นที่อะไรเหรอครับ เป็นที่ AppServ หรือป่าวครับ (ตอนนี้ใช้ AppServ 2.5.9) หรือว่าเป็นที่ Script (ปัจจุบัน 2.4.3)

รูปคุณ Holy โดยคุณ Holy 2007-11-10 16:20:58

ตรงจะสร้างเมนูขึ้นมาไหมนะคับ

oFCKeditor.ToolbarSet = 'SCRIPTDD';

พอใส่แล้วมันแจ้งว่าไม่ได้มีการติดตั้ง SCRIPTDD นะคับ
ทั้งที่เข้าไปเข้าไปที่ FCKeditor/fckconfig.js

แล้วก็สร้างขึ้นมาแล้ว
ทำไมจึงเป็นแบบนี้คับ

รูปคุณ นายยอด โดยคุณ นายยอด 2007-12-04 17:08:02

เรียนคุณ Holy

Error ที่คุณแจ้งมา มันฟ้องว่า Not Found

แปลว่า มันไม่มี ไม่เจอ path ดังกล่าว

ให้ผมเดาได้สถานเดียวคือ เรื่อง path

/FCKeditor/editor/fckeditor.html

Folder FCKeditor ต้องสำคัญเรื่องตัวใหญ่ตัวเล็กด้วยนะครับ ห้ามตัวเล็กทั้งหมด
ลองเช็คดูก่อนนะครับ

ของ นายยอด คิดว่า Clear Cache ก็น่าจะเจอแล้วครับ

รูปคุณ 9AuM โดยคุณ 9AuM 2007-12-04 17:31:32

ช่วยด้วยค่ะ การอัพโหลดรูปภาพ ทำที่ localhost ทำได้ปกติค่ะ แต่พอเอาขึ้น server มีปัญหาค่ะ รูปภาพอัพไม่ได้ อยากทราบว่าจะต้องกำหนด path อย่างไรถึงจะถูกต้องคะ รวมถึงเวลาที่ดึงรูปภาพมาแสดงที่หน้า preview และหน้า Editor ทำอย่างไรให้ดึงรูปมาได้อย่างถูกต้อง และแสดงลิงค์ได้ถูกต้องค่ะ รบกวนด้วยค่ะ แก้ปัญหานี้มานานแล้วค่ะ ยังหาทางแก้ไม่ได้เลย

makoto_pb@hotmail.com

ปล. หามีข้อมูลอื่นที่เกี่ยวกับ FCKeditor เพิ่มเติม โดยเฉพาะเกี่ยวกับเรื่อง Image รบกวนส่งข้อมูลให้ด้วยนะคะ

ขอบคุณค่ะ

รูปคุณ pui โดยคุณ pui 2007-12-19 16:33:01

$Config['UserFilesPath'] = '/UserFiles/' ;
upload รูปไม่ได้ ต้องแก้ Path ยังไง งง! http://localhot/project/imageload/
ทำยังไงค่ะ รบกวนช่วยด้วยค่ะ

รูปคุณ som โดยคุณ som 2008-01-22 19:11:24

เรียนคุณ Holy

พึ่งทำตะกี้ เป็น เหมือนกัน แก้ตรงนี้ครับ

oFCKeditor.BasePath = 'FCKeditor/'; สังเกตไหมครับอะไรที่หายไป อิอิ

แค่นี้แหละ ผมทำได้เยย!!!!!!!!!!!!~

รูปคุณ หมูน้อยพึ่งทำตะกี้ เป็น โดยคุณ หมูน้อยพึ่งทำตะกี้ เป็น 2008-02-04 22:48:36

ใครที่ไม่รู้ว่าจะเอาไฟล์ html หรือไฟล์ต่างๆ มาแก้ ดูตามนี่ครับ
สำหรับอยู่ที่ฟังชั่นนี่ครับ implode(); (รวมสตริง)
<?

include("FCKeditor/fckeditor.php") ;

$f= fopen("../test.html","r");
while ($data = fgets($f,1024)) {
$TEXTCONTENT = "$data";
#$TEXTCONTENT = eregi_replace("\n", '', $TEXTCONTENT);
#$TEXTCONTENT = eregi_replace("\r", '', $TEXTCONTENT);
#$TEXTCONTENT = addslashes($TEXTCONTENT);
$text[]=$TEXTCONTENT;
}
$text2= implode($text);
echo "<form method=\"post\" action=\"../formhtml_take.php\">";
$FCKeditor = new FCKeditor('dataform') ;
$FCKeditor->Width = '800';
$FCKeditor->Height = '500';
$FCKeditor->BasePath = 'FCKeditor/';
$FCKeditor->Value = $text2;
$FCKeditor->Create() ;
echo "<input type=\"submit\" value=\"ºÑ¹·Ö¡\">";
echo "</form>";
?>

รูปคุณ หมูน้อย โดยคุณ หมูน้อย 2008-02-07 14:40:49

ใช้เทคนิค AJAX กับ FCKeditor ได้ไหมครับ

ขอบคุณมากครับ

รูปคุณ หลง โดยคุณ หลง 2008-02-08 21:50:39

จะย่อมบอก ถ้าบอกชื่อจริง คุณหลง

รูปคุณ +++55555 โดยคุณ +++55555 2008-02-11 21:39:50

ผมใช้งานได้สบาย ปกติทุกอย่าง ใช้ 2.5 อยู่

ท่านที่ upload file ใน localhost ได้แต่ เอาขึ้น server แล้ว ไม่ได้ ส่วนใหญ่จะเกิดจาก โฟลเดอร์ ที่จะเก็บภาพ ตั้งค่าเป็น อ่านอย่างเดียว เราต้องเข้าไปเปิด mode ให้โฟลเดอร์นั้น สามารถเขียนไฟล์ลงไปได้ก่อนครับ

ส่วนท่านที่แก้ไขค่าต่างๆ แล้วมันไม่ทำงาน เป็นเพราะ บราว์เซอร์ มันยังจำค่าเก่าอยู่ แก้ไขง่ายๆ แค่ปิด บราวเซอร์ตัวนั้น แล้วเปิด บราวเซอร์ตัวใหม่ขึ้นมา

ตอนนี้ผมทำ blog ให้ user ใช้อยู่ อยากจะเปลี่ยนการ upload file ให้เข้าไปอยู่ใน blog ของ user แต่ละคนเลย ยังทำไม่ได้ ต้องรวมไฟล์อยู่ที่เดียวกันหมดคือ userfiles มี link สอนวิธีทำนะ แต่มันยัง errer อยู่ ไอ้ตัวเราเองก็ไม่ได้เรียนเขียนโปรแกรมมาด้วยสิ คงต้องงมกันต่อไป ใครเอาไปทำได้แล้ว ช่วยเอามาแนะนำกันหน่อยนะครับ วิธีการ ที่ url ด้านล่างนี่เลย....

http://www.aiwmedia.com/fckeditor.asp

งมกันต่อไป อิอิ

รูปคุณ anavin โดยคุณ anavin 2008-02-28 02:33:56

$Config['UserFilesPath'] = '/UserFiles/' ;
upload รูปไม่ได้ ต้องแก้ Path ยังไง งง! http://localhot/project/imageload/
ทำยังไงค่ะ รบกวนช่วยด้วยค๊าบบ

รูปคุณ งงค๊าบ โดยคุณ งงค๊าบ 2008-03-21 00:09:20

ทำให้มันใส่ได้สองช่อง ทำงัยครับ คือมี สอง TextArea น่ะครับ

รูปคุณ สราวุธ โดยคุณ สราวุธ 2008-04-02 00:11:13

มันขึ้นแบบนี้อะคับ
Unknown error creating folder

มันเป็นอะไรคับ
แก้ยังไงคับ

รูปคุณ ต้อม โดยคุณ ต้อม 2008-04-22 16:09:53

ใส่รูปแล้วมัน เป็นอย่างนี้นะค่ะ มันไม่แสดงรูปนะ Are you sure you want to continue without including an Image Description? Without it the image not be accessible to some users with disabillties, or to those using a text browser, or browsing the Web with images turned off.

รูปคุณ jane โดยคุณ jane 2008-07-23 09:54:04

รบกวนถาม ค่ะ ทำตามไกด์ข้างบนนี้ ใช้เวอร์ชั่น 2.6.3b

1. เวลา add smiley เข้าไปแล้ว ดึงกลับมาแสดงผล มันจะไม่เห็นรูป โดยจะขึ้นเป็นกากบาท\"\" เข้าไปดูใน table เก็บดังนี้ค่ะ

<img alt=\"\" src=\"http://www.xxx.com/fckeditor/editor/images/smiley/msn/broken_heart.gif\" /><br />

ทำไมมันต้องมี alt ติดมาด้วยคะ

2. add table เข้าไปแล้ว เวลาแสดงผลมันจะหล่นไปอยู่ด้านล่างเลย ดูใน table แล้ว มันใส่ cellspacing=\"\"\\"\\\\"1\\\\"\\"\"\" cellpadding=\"\"\\"\\\\"1\\\\"\\"\"\" border=\"\"\\"\\\\"1\\\\"\\"\"\"><br />
เข้าไปบานตะเกียง

จะแก้ได้ไหมคะ รบกวนด้วยค่ะ

รูปคุณ อิสริยา โดยคุณ อิสริยา 2008-07-30 02:46:14

ช่วยด้วยคะ จะแทรกรูป โดยกดปุ่ม เปิดหน้าต่างจัดการไฟล์อัพโหลด แล้วมันขึ้น error ว่า the server didn't send back a proper XML response. Please contact your system administrator.
XML request error: Not Found (404) ต้องแก้ยังไงถึงจะแทรกรูปได้คะ

รูปคุณ ไวทยา โดยคุณ ไวทยา 2008-08-15 03:12:19

Scriptdd.com

บทความบ้าบ่นของคนทำเว็บ ปี 6

FCKeditor Tool ช่วยเขียน HTML แบบ WYSIWYG

ความคิดเห็น

ร่วมแสดงความคิดเห็น

เข้าระบบ

บทความล่าสุด

Tags

เพื่อนบ้าน

สถิติส่วนตัว