在線編輯器也稱之為所見即所得編輯器，是一種常見的html源碼編輯器。

所見即所得：用戶在輸入的時候，不論是格式和是樣式都能被系統原封不動的保存，最后在查看的時候，可以按照用戶輸入的原來的結構進行輸出。

市面上比較常見的在線編輯器有很多，FCKeditor（在線編輯器+Ajax瀏覽器端服務器文件管理器，免費的），Ckeditor(Content and Knowledge，在線編輯器與服務器端文件管理器分離，在線編輯器免費，服務器端文件管理器收費（CKfinder）)，百度旗下Ueditor，Kindeditor

在線編輯器就是所見即所得。

作用

1. 方便操作，提高用戶體驗
2. 簡化操作
3. 提高內容的兼容性

Ckeditor的歷史比較悠久，被國內外web項目廣泛的應用。

基本所有的在在線編輯器都差不多，無外乎就是插件的多少（功能），操作手冊

為什么要使用Ckeditor？

1. 被廣泛應用
2. Ckeditor非常成熟（市場或者產品）
3. Ckeditor兼容性比較好（所有的在線編輯器都是js編寫的）

將獲取到的Ckeditor解壓后放到對應的項目位置就可以使用。

1. 獲取Ckeditor編輯器。http://www.ckeditor.com

basic：基本，功能較少

standard：標準，常用功能都有

full：完整，擁有全部功能

下載下來：

2 解壓到指定目錄

3 將Ckeditor文件夾放到需要使用的項目位置

Ckeditor目錄結構

當前能夠編輯html源碼的表單元素：textarea

因此，在線編輯器的使用都是要基于textarea元素

1 加載Ckeditor的js文件。/ckeditor/ckeditor.js

2 界面中必須要有一個textarea元素。

3 將textarea替換成對應的Ckeditor編輯器

a) 最簡方式：在textarea標簽中增加一個class屬性，值為Ckeditor

textarea元素必須要有id或者name屬性其中一個

b) 標準方式：使用Ckeditor提供的類CKEDITOR，以及其替換方法replace

myck1可以是id的值，也可以是name屬性的值

c) 高級方式：使用jQuery進行textarea替換

要先加載jQuery.js

加載CKEDITOR對jQuery提供的接口文件jquery.js。/ckeditor/adapters/jquery.js

使用jQuery語法，替換textarea元素

Ckeditor提供了三種配置方式

1. 修改系統提供的配置文件config.js

修改配置文件

效果

特點：項目中所有的Ckeditor都會受config.js的影響。

2 自定義配置文件，形式與系統配置文件config.js一致

新建一個用戶配置文件，配置文件的格式與config.js格式完全一致

修改配置選項

在需要使用客戶化的配置文件的Ckeditor實例中加載客戶化的配置文件。

注意：

使用基礎版的方式加載Ckeditor，沒有辦法進行客戶化配置文件使用

只有標準版和jquery版可以使用

特點：只有加載了客戶化配置文件的Ckeditor實例會受影響，其他的不受影響。（該方式使用的比較多）