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

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>

5）

页面中这么使用

这里写你的初始化内容

var ue = UE.getEditor('container');

</script>

效果图

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();

});

富文本编辑器在Java中使用相关推荐

html富文本编辑器插件_vue中使用vuequilleditor富文本编辑器
点击上方"小姚同学技术栈"快速关注我哟! vue-quill-editor是一个基于quill.适用于vue的富文本编辑器开源项目,支持服务端渲染和单页应用.目前项目热度还算可以, ...
wangeditor富文本编辑器使用过程中遇到的问题以及解决办法
背景我的项目之前用的富文本编辑器是quill,之前其实考虑用过wangeditor,但是当时wangeditor V3的英文支持不友好,而我们业务是面向海外的,所以综合考虑下来用了quill. 最近 ...
layui富文本编辑器上传图片java,layui富文本编辑器+文件上传
(1)layui官网下载最新的样式压缩包,项目static目录下; (2)编辑器页面: 导入css样式: 导入js: 封面图: 选择文件内容: ${pd.NEIRONG} js: (3)shangc ...
TinyMCE富文本编辑器在Vue中的使用
✍️ 作者简介: 一个每天中午去打篮球和锻炼的前端开发.
富文本编辑器中空格转化为a_如何对富文本编辑器（FCK Html Editor）的工具栏进行扩展？...
我们在项目开发过程中,会经常使用到富文本编辑器.GeneXus内置的富文本编辑器FCK Html Editor使用起来非常方便,只要将页面变量的控件类型(Control Type)选择为FCK Htm ...
Vue中使用vue-quil-editor富文本编辑器+el-upload实现带图片上传到SpringBoot后台接口
场景系统中经常会用到富文本编辑器,比如新增通知和公告功能,并且需要添加上传图片. vue-quill-editor官网: https://www.npmjs.com/package/vue-quil ...
django项目中使用KindEditor富文本编辑器
先从官网下载插件,放在static文件下前端引入学习python中有什么不懂的地方,小编这里推荐加小编的python学习群:895,817, 687 有任何不懂的都可以在里面交流,还有很好的视频教 ...
wangeditor ajax,laravel 中 wangEditor 富文本编辑器使用指南
在本课程中,老师使用的富文本编辑器是 2.0 的版本,且输入区域使用的 textarea,但是在新的 3.0 版本中(新版本富文本编辑器只需要引用一个js文件即可),开发者不建议使用 textarea ...
JavaWeb富文本编辑器与文件上传
目录一.富文本编辑器 1.下载富文本编辑器 2.富文本编辑器的应用二.文件上传文件上传必须要注意的规则: 文件上传案例文件夹的访问一.富文本编辑器富文本编辑器在项目中很常见,它可以将文本, ...
tui-editor富文本编辑器组件
tui-editor富文本编辑器记录项目中使用富文本编辑器安装 npm init & npm install --save tui-editor 创建组件文档 tuieditor 在 de ...

富文本编辑器在Java中使用

富文本编辑器在Java中使用相关推荐

最新文章

热门文章