CKEditor介紹

CKEditor 之前的名稱為 FCKEditor,目前版本為V3.1版本,CKEditor是一款 Open Source的所見即所得編輯,其特性:程式碼不會太大,不用額外修改就可以支援中文, 也可以和PHP、ASP、ASP.NET…等程式語言結合。
丫忠強力推薦此HTML編輯器,一直以來丫忠都是用此編輯器,會推薦的原因如下:

  • 瀏覽器支援度夠高
  • 支援正體中文
  • 介面看起來較friendly,面版色系較多

丫忠講的那麼好,CKEditor是真的那麼好用嗎?重點還是因人而異啦,就讓丫忠來貼一下CKEditor功能特性的畫面吧!


CKEditor執行的介面(圖1)


CKEditor 提供多種色系可以選擇(圖2)


CKEditor 提供Office 2003的樣版(圖3)

CKEditor首頁
http://ckeditor.com/

CKEditor-demo頁面
http://ckeditor.com/demo

CKEditor-下載頁面
http://ckeditor.com/download

CKEditor 安裝的方式

有兩種方式可以很快地加入CKEditor

1.By Class的方式,在<textarea>標籤中加入 class=’ckeditor’ 後,CKEditor 會自動將textarea替換成編輯器.

?View Code JAVASCRIPT
1
<textarea id="editor12" class="ckeditor" cols="80" rows="10" name="editor12"></textarea>

2.By ID的方式,指定<textarea>標籤中ID的名稱來嵌入.

?View Code JAVASCRIPT
1
2
3
4
5
6
7
<!-- 嵌入第1個編輯器 -->
<textarea id="editor1" cols="80" rows="10" name="editor1"></textarea>
<script type="text/javascript"><!--mce:0--></script>
 
<!-- 嵌入第2個編輯器 -->
<textarea id="editor2" cols="80" rows="10" name="editor2"></textarea>
<script type="text/javascript"><!--mce:1--></script>

以上兩種方式皆可以嵌入CKEditor,另外,別忘了在之前加入CKEditor的核心檔案

?View Code JAVASCRIPT
1
<script src="../ckeditor.js" type="text/javascript"><!--mce:2--></script>

本文相關的文章

  1. 所見即所得HTML編輯器-CKEditor(2)
  2. 所見即所得HTML編輯器-TinyMCE
  3. 所見即所得HTML編輯器-eWebEditor
  1. admin says:

    sorry,丫忠無法了解【有支援CSS】的意思?
    一般丫忠會用的的地方通常是將textarea替換成HTML編輯器,之後PHP會去接收HTML編輯器傳過來的值,所以並不會去修改到CSS的地方,除非您對於官網內建的樣板很不喜歡,才會去修改到CSS的部份。所以不知道您說的意思是指修改CSS的部份嗎?

  2. 訪客 says:

    請問一下,我用Ckeditor連續改變某段文字大小三次 ,該段文字就會消失,並且會發生錯誤,請問一下問題是出在哪裡??

    另外,從WORD編輯文字在貼上CKeditor,會是導致錯誤的原因嗎??

  3. 五金产品 says:

    博客文章写的不错啊,再多些几篇都快成业余作者了,模板挺漂亮很醒目 O(∩_∩)O哈哈~希望你

    再接再厉啊 2010年一定要努力 努力!回踩谢谢~~~~五金产品(www.cn-products.com)

  4. 山东seo says:

    博客文章写的不错啊,再多些几篇都快成业余作者了,模板挺漂亮很醒目 O(∩_∩)O哈哈~希望你再接再厉啊 2010年一定要努力 努力!回踩谢谢~~山东seo(www.xinheng99.com)

  5. 济南网站优化 says:

    博客写的还行啊,模板不错啊,博客一定要经常的更新文章啊,要不没人来看你了啊O(∩_∩)O哈哈~加油啊 2010年我们一去努力 回踩啊 谢谢 济南网站优化(www.xinheng99.com)

Leave a Reply

你的電子郵件位址並不會被公開。

*


You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>