前端富文本框（前端富文本编辑）



目录

1.富文本编辑器的优点

2.文件的准备

3.文件的导入

导入到项目：

导入到html文件：

​编辑

4.富文本编辑器的使用

1.富文本编辑器的优点

        我们从前端写入数据库时，文字的样式具有局限性，不能存在换行，更改字体颜色、样式等十分不便。这时我们就可以引入富文本编辑器来实现这些功能。它的优点有：

1. 内容丰富与格式多样：富文本编辑器支持多种文本样式和多媒体内容，使文档更加生动和富有表现力。
2. 直观易用与高效创作：提供直观界面，降低创作难度，提高内容编辑和创作的效率。
3. 兼容性强与易分享：遵循标准规范，支持多种格式导出，便于在不同平台和设备上共享内容。

2.文件的准备

UEditor是由百度web前端研发部开发的一款所见即所得的开源富文本编辑器。具有轻量级、可定制、用户体验优秀等特点。他有以下强大的功能

• 文本格式化：支持文字加粗、斜体、下划线、颜色调整等基本的文本格式化操作。
• 段落设置：可以设置段落的首行缩进、对齐方式、标题等级等。
• 多媒体内容插入：支持插入图片、视频、音乐等多媒体内容，并提供了相应的管理功能，方便用户直接插入和管理已上传的媒体文件。
• 表格编辑：支持插入表格、调整表格属性（如边框、单元格属性）、合并单元格等操作。
• 代码编辑：支持代码块、代码语言选择等功能，方便用户进行代码编辑和展示。
• 撤销和重做：支持撤销和重做操作，方便用户进行文本编辑时的错误修正

下载地址：GitHub - fex-team/ueditor: rich text 富文本编辑器

解压完成后，准备完毕！

3.文件的导入

导入到项目：

将解压得到的utf8-jsp文件夹放在 WebContent目录下，如图

注意：导入时有可能会报错，我们需要手动将编码改为utf-8 ,右键报错文件->Properties->

注释报错时可以忽略 

我们会发现在jsp目录下有一个lib目录，我们需要把该lib下面的文件，手动转移到WEB-INF下的lib目录中

至此导入成功！

导入到html文件：

这段代码就是富文本编辑器的引入，注意src中传入相对地址

贴例子——这是我的引用 ：

4.富文本编辑器的使用

我们在JavaScript中将他实例化

获取编辑器器内部内容

 设置编辑器内部内容

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdkf/45835.html