富文本编辑器java后端(富文本编辑器的内容怎么存储)

2022-07-30 09:00:08 浏览数 (1)

大家好,又见面了,我是你们的朋友全栈君。

富文本编辑器在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文件

<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

ueditorjsplib路径下有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下;

把ueditorjsplib文件夹下的五个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();

});

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/129753.html原文链接:https://javaforall.cn

0 人点赞