目录
1.富文本编辑器的优点
2.文件的准备
3.文件的导入
导入到项目:
导入到html文件:
编辑
4.富文本编辑器的使用
1.富文本编辑器的优点
我们从前端写入数据库时,文字的样式具有局限性,不能存在换行,更改字体颜色、样式等十分不便。这时我们就可以引入富文本编辑器来实现这些功能。它的优点有:
-
内容丰富与格式多样:富文本编辑器支持多种文本样式和多媒体内容,使文档更加生动和富有表现力。
-
直观易用与高效创作:提供直观界面,降低创作难度,提高内容编辑和创作的效率。
-
兼容性强与易分享:遵循标准规范,支持多种格式导出,便于在不同平台和设备上共享内容。
2.文件的准备
UEditor是由百度web前端研发部开发的一款所见即所得的开源富文本编辑器。具有轻量级、可定制、用户体验优秀等特点。他有以下强大的功能
- 文本格式化:支持文字加粗、斜体、下划线、颜色调整等基本的文本格式化操作。
- 段落设置:可以设置段落的首行缩进、对齐方式、标题等级等。
- 多媒体内容插入:支持插入图片、视频、音乐等多媒体内容,并提供了相应的管理功能,方便用户直接插入和管理已上传的媒体文件。
- 表格编辑:支持插入表格、调整表格属性(如边框、单元格属性)、合并单元格等操作。
- 代码编辑:支持代码块、代码语言选择等功能,方便用户进行代码编辑和展示。
- 撤销和重做:支持撤销和重做操作,方便用户进行文本编辑时的错误修正
下载地址:GitHub - fex-team/ueditor: rich text 富文本编辑器
解压完成后,准备完毕!
3.文件的导入
导入到项目:
将解压得到的utf8-jsp文件夹放在 WebContent目录下,如图
注意:导入时有可能会报错,我们需要手动将编码改为utf-8 ,右键报错文件->Properties->
注释报错时可以忽略
我们会发现在jsp目录下有一个lib目录,我们需要把该lib下面的文件,手动转移到WEB-INF下的lib目录中
至此导入成功!
导入到html文件:
这段代码就是富文本编辑器的引入,注意src中传入相对地址
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 加载编辑器的容器 -->
<script id="container" name="content" type="text/plain">
</script>
<!-- 配置文件 -->
<script type="text/javascript" src="ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="ueditor.all.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
var ue = UE.getEditor('container');
</script>
</body>
</html>
贴例子——这是我的引用 :
4.富文本编辑器的使用
我们在JavaScript中将他实例化
//实例化
var ue = UE.getEditor('container');
获取编辑器器内部内容
ue.ready(function() {
//获取html内容(带标签)
var html = ue.getContent();
//获取纯文本内容
var txt = ue.getContentTxt();
});
设置编辑器内部内容
ue.ready(function() {
//设置编辑器的内容
ue.setContent(obj.content);
});