javascript
CKEditor的安装与基本使用(JSP)
文章分類:Web前端
一、下載CKEditor
?? ? ? 1. 直接下載地址,當前最新版本為3.5:
?? ? ??http://download.cksource.com/CKEditor/CKEditor/CKEditor%203.5/ckeditor_3.5.zip
?? ? ? 2. 或者可直接到官方網站下載:
?? ? ??http://ckeditor.com/download
?
二、安裝CKEditor
?? ? ? 解壓ckeditor_3.5.zip,得到ckeditor文件夾,將ckeditor整個文件夾復制到項目工程的根目錄下,即WebRoot下
?
三、驗證CKEditor是否安裝成功
?? ? ? 部署運行項目,訪問: http://localhost/項目名稱/ckeditor/_samples/index.html
?? ? ? 則可出現?“CKEditor Samples List”?的Demo頁面,說明CKeditor已安裝成功
?
四、應用CKEditor
?? ? ? 1. 導入JS文件
?? ? ? ? ? ?<script type="text/javascript" src="<%=request.getContextPath()%>/ckeditor/ckeditor.js"></script>
?
?? ? ? 2. 創建和使用CKEditor
?
Java代碼???
?? ? ? ?說明:
?? ? ? ? 1) textarea屬性值 name="content": 名字可隨意定義,但必須與下面的CKEDITOR.replace('content');匹配
?
?? ? ? ? 2)?CKEDITOR.replace('content');是最基本的寫法,表示使用CKEditor的JavaScript API創建的編輯器實例,
替換上面的textarea。
若要為CKEditor增加一些屬性設置,則其屬性必須寫在{}花括號內,
如上{toolbar:'Full',?skin?:?'kama'},
具體的屬性網上很多文章均可搜索到,這里不累述了。
?
?? ? ? ?3) 上面的textarea后面的“CKEDITOR.replace('content');”腳本也可以寫在<head></head>標簽內
?
Java代碼???
?
五、獲取編輯器里的數據
?? ? ?有時在提交表單時,需要判斷下編輯器里的內容是否為空,這時可使用CKEditor的JavaScript API:
?? ? ?CKEDITOR.instances.content.getData()???? ?
?
Java代碼???? ? ??注意:如果你在編輯器里打了一堆的空格,內容是不為空的,因為編輯器會把你打的空格都轉換成
?
至此,CKEdiotr編輯器即可在頁面上顯示與使用。
?
補充說明:如果你的項目中使用struts2等框架,也可根據上面textarea的屬性name="content"來獲取編輯器里的內容,最好使用BLOB來存儲。
總結
以上是生活随笔為你收集整理的CKEditor的安装与基本使用(JSP)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: JSP传递值给servlet的方式
- 下一篇: Servlet跳转到jsp页面的几种方法