富文字編輯器在Java中使用
一、ckeditor
1)
下載ckeditor_3.6.2.zip和ckeditor-java-core-3.5.3.zip兩個壓縮檔案
2)
解壓縮檔案ckeditor_3.6.2.zip和ckeditor-java-core-3.5.3.zip兩個檔案,
在ckeditor_3.6.2檔案中有ckeditor資料夾;
ckeditor-java-core-3.5.3中有ckeditor-java-core-3.5.3.jar、 ckeditor-java-core-3.5.3-javadoc.jar和ckeditor-java-core-3.5.3-sources.jar三個jar包
3)
把ckeditor_3.6.2資料夾下的ckeditor整個複製到工程WebRoot下;
把ckeditor-java-core-3.5.3資料夾下的三個jar包複製到WebRoot—>WEB-INF—>lib資料夾下
4)
要使用就必須在jsp檔案中先引入ckeditor.js檔案
<scripttype="text/javascript"src="ckeditor/ckeditor.js"></script>
5)
新建一個textarea html物件
<
textarea
id
=
"editor1"
name
=
"editor1"
>初始化文字</
textarea
>
用ckeditor替換html area
<script type=
"text/javascript"
>
CKEDITOR.replace(
'editor1'
);
</script>或者
<ckeditor:replace replace="editor1" basePath="/ckeditor/" />
6)
效果圖
二、ueditor
1)
下載ueditor
下載地址:http://ueditor.baidu.com/website/download.html
2)
解壓縮檔案,並把資料夾名改為ueditor
ueditor\jsp\lib路徑下有commons-codec-1.9.jar、commons-fileupload-1.3.1.jar、commons-io-2.4.jar、json.jar、ueditor-1.1.2.jar五個jar包
3)
把整個ueditor資料夾複製到工程WebRoot下;
把ueditor\jsp\lib資料夾下的五個jar包複製到WebRoot—>WEB-INF—>lib資料夾下
4)
在jsp檔案中先引入ueditor.config.js、ueditor.all.js檔案
</script>
<!-- 配置檔案 -->
<script type="text/javascript" src="ueditor.config.js"></script>
<!-- 編輯器原始碼檔案 -->
<script type="text/javascript" src="ueditor.all.js"></script>
5)
頁面中這麼使用
<!-- 載入編輯器的容器 -->
<script id="container" name="content" type="text/plain">
這裡寫你的初始化內容
<!-- 例項化編輯器 -->
<script type="text/javascript">
var ue = UE.getEditor('container');
</script>
6)
效果圖
7)
設定和讀取編輯器的內容
var ue = UE.getContent();
//對編輯器的操作最好在編輯器ready之後再做
ue.ready(function() {
//設定編輯器的內容
ue.setContent('hello');
//獲取html內容,返回: <p>hello</p>
var html = ue.getContent();
//獲取純文字內容,返回: hello
var txt = ue.getContentTxt();
});