富文本编辑器在Java中使用

阅读更多

富文本编辑器在Java中使用

一、ckeditor

1）

下载ckeditor_3.6.2.zip和ckeditor-java-core-3.5.3.zip两个压缩文件

下载地址:http://ckeditor.com

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文件

5）

新建一个textarea html对象

<textarea id="editor1" name="editor1">初始化文字textarea>

用ckeditor替换html area

或者

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文件

 

 

 

 

 

5）

页面中这么使用

6)

效果图

 

7）

设置和读取编辑器的内容

var ue = UE.getContent();

//对编辑器的操作最好在编辑器ready之后再做

ue.ready(function() {

    //设置编辑器的内容

    ue.setContent('hello');

    //获取html内容，返回:

hello

    var html = ue.getContent();

    //获取纯文本内容，返回: hello

    var txt = ue.getContentTxt();

});