目前所在的文章分類 ◊ 所見即所得HTML編輯器 ◊

所見即所得HTML編輯器-CKEditor(2)
作者: 丫忠
• 星期一, 三月 15th, 2010

丫忠曾在之前的文章中提到，如何在HTML中嵌入CKEditor編輯器!

現在就來針對細項的修改來做個說明：

CKEditor 的樣版修改

CKEditor 目前提供了3個樣版,Kama、Office 2003以及V2等3種樣版，至於要如何套用這3種樣版請見下面程式：

1. CKEditor 套用Kama樣版

<textarea cols=’80′ id=’editor_kama’ name=’editor_kama’ rows=’10′>
丫 忠的伺服器-CKEditor套用Kama樣版
</textarea>
<script type=’text/javascript’>
CKEDITOR.replace( ‘editor_kama’,{skin : ‘kama’});
//針對id,name為editor_kama的textarea，使用kama樣版
</script>

2. CKEditor 套用editor_office2003樣版

<textarea cols=’80′ id=’editor_office2003′ name=’editor_office2003′ rows=’10′>
丫 忠的伺服器-CKEditor套用office2003樣版
</textarea>
<script type=’text/javascript’>
CKEDITOR.replace( ‘editor_office2003′,{skin : ‘office2003′});
//針對id,name為editor_office2003的textarea，使用office2003樣版
</script>

3. CKEditor 套用V2樣版

<textarea cols=’80′ id=’editor_v2′ name=’editor_v2′ rows=’10′>
丫 忠的伺服器-CKEditor套用v2樣版
</textarea>
<script type=’text/javascript’>
CKEDITOR.replace( ‘editor_v2′,{skin : ‘v2′});
//針對id,name為editor_v2的textarea，使用v2樣版
</script>

CKEditor 的樣版底色修改

CKEditor提供了一個很簡便的方式就可以修改樣版的底色，可以依據網站的樣式自行修改CKEditor的底色來符合網站的風格，修改的方式是再簡單不過了，只需要給定幾個參數即可：

<textarea cols=’80′ id=’editor_ui_color’ name=’editor_ui_color’ rows=’10′>
丫 忠的伺服器-CKEditor套用樣版底色
</textarea>
<script type=’text/javascript’>
CKEDITOR.replace( ‘editor_ui_color‘,{
extraPlugins : ‘uicolor’,  //指定要替換底色>
uiColor: ‘#14B8C4′,  //指定的底色
});
</script>

CKEditor 的語系修改

如果您要自行指定CKEditor的語系，只須要指定language即可，詳細的語系您可以參考/ckeditor/lang/_languages.js

<textarea cols=’80′ id=’editor_language’ name=’editor_language’ rows=’10′>
丫 忠的伺服器-CKEditor語系設定
</textarea>
<script type=’text/javascript’>
CKEDITOR.replace( ‘editor_language’,{
language: ‘zh’,  //指定為正體語系,如果要簡體語系則設定’zh-cn’
});
</script>

CKEditor 的toolbar修改

我想toolbar的修改應該是最常需要修改的地方，預設CKEditor有提供兩種已經制訂好的toolbar，Full及Basic兩種，如果您使用預設這兩種toolbar就可以符合需求的話，那就可以忽略本段；但是，如果您要修改符合自己需求的話，請繼續往下看。

修改toolbar-Full：

<textarea cols=’80′ id=’toolbar_full’ name=’toolbar_full’ rows=’10′>丫 忠的伺服器-CKEditor toolbar修改-Full</textarea>

<script type=’text/javascript’>
CKEDITOR.replace( ‘toolbar_full’,{toolbar : ‘Full‘});
</script>

修改toolbar-Basic：

<textarea cols=’80′ id=’toolbar_basic’ name=’toolbar_basic’ rows=’10′>丫 忠的伺服器-CKEditor toolbar修改-Basic</textarea>

<script type=’text/javascript’>
CKEDITOR.replace( ‘toolbar_basic’,{toolbar : ‘Basic‘});
</script>

修改toolbar-自訂：

<textarea cols=’80′ id=’toolbar_mytoolbar’ name=’toolbar_mytoolbar’ rows=’10′>丫 忠的伺服器-CKEditor toolbar修改-自訂</textarea>

<script type=’text/javascript’>
CKEDITOR.replace( ‘toolbar_mytoolbar’,{
toolbar :
[
[ 'Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink' ],
[ 'UIColor' ]
]
});
</script>

上面的自訂toolbar方式，如果對於只需要在單一頁面呈現一次的使用者還算ok，但是，如果對於要將自訂CKEditor放在很多網頁的人來說，每次都要貼這個toolbar的設定，的確有一點麻煩。

好在CKEditor很貼心地提供了一種可以讓使用者自訂toolbar的群組，當設定群組後給定一個自訂的名稱，之後如果要使用相同的toolbar時，只要設定自訂的名稱就可以了，那要怎麼做呢？請見底下：

1.找到config.js這隻檔案，將你自訂的toolbar設定放在config.js裡面，如下：

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

CKEDITOR.editorConfig = function( config )
{
    // Define changes to default configuration here. For example:
    // config.language = 'fr';
    // config.uiColor = '#AADC6E';
    config.toolbar = 'MyToolbar';
 
    config.toolbar_MyToolbar =
    [
        ['NewPage','Preview'],
        ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Scayt'],
        ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
        ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
        '/',
        ['Styles','Format'],
        ['Bold','Italic','Strike'],
        ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
        ['Link','Unlink','Anchor'],
        ['Maximize','-','About']
    ];
};

2. 其中 MyToolbar 就是自訂的toolbar，將常用到的toolbar設定在config.js後，再來就是在我要嵌入頁面中指定我自訂的 toolbar 名稱即可，也就是原本只能使用預設的Full或Basic，現在也可以使用我自訂的MyToolbar名稱了，如下：

<textarea cols=’80′ id=’toolbar_MyToolbar’ name=’toolbar_MyToolbar’ rows=’10′>丫 忠的伺服器-CKEditor toolbar修改-自訂toolbar</textarea>

<script type=’text/javascript’>
CKEDITOR.replace( ‘toolbar_MyToolbar’,{toolbar : ‘MyToolbar‘});
</script>

此時你可能會需要想知道 toolbar 中每一個英文對映到的功能，丫忠就把它整理下來吧，方便有需要的人做個對照囉!

‘Source’：原始碼

‘Save’：儲存
‘NewPage’：開新檔案
‘Preview’：預覽
‘Templates’：樣版

‘Cut’：剪下
‘Copy’：複製
‘Paste’：貼上
‘PasteText’：貼為文字格式
‘PasteFromWord’：自 word 貼上
‘Print’：列印
‘SpellChecker’：拼字檢查
‘Scayt’：即時拼寫檢查

‘Undo’：復原(上一步)
‘Redo’：重複(下一步)
‘Find’：尋找
‘Replace’：取代
‘SelectAll’：全選
‘RemoveFormat’：清除格式

‘Form’：表單
‘Checkbox’：核取方塊
‘Radio’：選項按鈕
‘TextField’：文字方塊
‘Textarea’：文字區域
‘Select’：選單
‘Button’：按鈕
‘ImageButton’：影像按鈕
‘HiddenField’：隱藏欄位

‘Bold’：粗體
‘Italic’：斜體
‘Underline’：底線
‘Strike’：刪除線
‘Subscript’：下標
‘Superscript’：上標

‘NumberedList’：編號清單
‘BulletedList’：項目清單
‘Outdent’：減少縮排
‘Indent’：增加縮排
‘Blockquote’：引用文字

‘JustifyLeft’：靠左對齊
‘JustifyCenter’：置中
‘JustifyRight’：靠右對齊
‘JustifyBlock’：左右對齊

‘Link’：插入/編輯超連結
‘Unlink’：移除超連結
‘Anchor’：插入/編輯錨點

‘Image’：插入影像
‘Flash’：插入Flash
‘Table’：插入表格
‘HorizontalRule’：插入水平線
‘Smiley’：插入表情
‘SpecialChar’：插入特殊符號
‘PageBreak’：插入分頁符號

‘Styles’：樣式
‘Format’：格式
‘Font’：字體
‘FontSize’：大小

‘TextColor’：文字顏色
‘BGColor’：背景顏色

‘Maximize’：最大化
‘ShowBlocks’：顯示區塊
‘About’：關於CKEditor

文章分類: 丫忠的生活網誌, 所見即所得HTML編輯器  | 相關標籤: , ,  | 3 個人回應
所見即所得HTML編輯器-CKEditor
作者: 丫忠
• 星期二, 二月 09th, 2010

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>
文章分類: 所見即所得HTML編輯器  | 相關標籤: , ,  | 11 個人回應
所見即所得HTML編輯器-TinyMCE
作者: 丫忠
• 星期二, 二月 09th, 2010

TinyMCE功能介紹：

TinyMCE 是一款輕量級的所見即所得編輯器，支持目前流行的各種瀏覽器，由JavaScript寫成。只需要兩行嵌入碼就可以 將編輯器嵌入網頁中，支持AJAX。另一特點是加載速度非常快，如果你的web伺服器使用的語言是 PHP，那還可以進一步優化。

TinyMCE 是一個 基於LGPL license發佈的自由軟件，你可以把它用於商業應用。

將 TinyMCE 編輯器嵌入網頁中，只需要底下幾行Javascript程式碼即可嵌入,嵌入後只要html中有包含textarea的標籤就會自動嵌入TinyMCE編輯器，更祥細的功能可以下載TinyMCE後，參照 /tinymce/examples/*.html 裡面有更詳細的介紹及應用。

?View Code JAVASCRIPT
1
2
3
4
5
6
7

<script type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
	tinyMCE.init({
		mode : "textareas",
		theme : "simple"
	});
</script>

TinyMCE首頁
http://tinymce.moxiecode.com/

TinyMCE下載
http://tinymce.moxiecode.com/download.php

文章分類: 所見即所得HTML編輯器  | 相關標籤: , ,  | 留下對這篇文章的想法
所見即所得HTML編輯器-eWebEditor
作者: 丫忠
• 星期二, 二月 09th, 2010

eWebEditor 功能介紹
eWebEditor 是一款所見即所得HTML編輯器,開發人員可以利用此套件進行直覺式、簡單易用的界面建立網頁內容，eWebEditor 可以快速嵌入到目前既有的系統中，只需要一行程式碼即可嵌入，eWebEditor 可以應用於各種網頁系統中，例如：內容管理系統、郵件系統、論談系統、新聞發布系統等。

丫忠有測試了一下此HTML編輯器，在瀏覽器支援上似乎不儘理想，只支援在IE上，FireFox 及 Chrome 這兩個瀏覽器則沒有支援。且這款HTML編輯器並不是完全免費的，免費版有功能上的限制。

eWebEditor 首頁：http://www.ewebeditor.net/

文章分類: 所見即所得HTML編輯器  | 相關標籤: , ,  | 留下對這篇文章的想法