后端eclipse——文字样式:UEditor富文本编辑器引入

目录

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中传入相对地址

<!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);});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/7963.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

SpringBoot框架下的资产管理自动化

2相关技术 2.1 MYSQL数据库 MySQL是一个真正的多用户、多线程SQL数据库服务器。 是基于SQL的客户/服务器模式的关系数据库管理系统&#xff0c;它的有点有有功能强大、使用简单、管理方便、安全可靠性高、运行速度快、多线程、跨平台性、完全网络化、稳定性等&#xff0c;非常…

焕然一新!TinyVue 组件库 UI 大升级,更符合现代的审美!

本文由体验技术团队Kagol原创。 自从 TinyVue 组件库去年开源以来&#xff0c;一直有小伙伴反馈我们的 UI 不够美观&#xff0c;风格陈旧&#xff0c;不太满足现阶段审美。 “TinyVue 给我的感觉就是一个没啥审美能力、但是很努力的老程序员开发的” 看到这个评价&#xff0c;…

C语言实践:实现插入排序

开篇 本篇文章的题目来源是《编程珠玑》第11章【排序】的第一个小节。不知不觉&#xff0c;已经看到第11章了呀。 主体 想到排序&#xff0c;想必大家第一时间&#xff0c;想到的都会是下面的这种方式。 for i [1, n]for (j i; j > 0 && x[j-1] > x[j]; j--)s…

idea | 搭建 SpringBoot 项目之配置 Maven

目录 1 配置 Maven1.1 打开 settings.xml 文件1.2 配置本地仓库路径1.3 配置中央仓库路径1.4 配置 JDK 版本1.5 重新下载项目依赖 2 配置 idea2.1 在启动页打开设置2.2 配置 Java Compiler2.3 配置 File Encodings2.4 配置 Maven2.5 配置 Auto Import2.6 配置 Cod…

Ubuntu学习笔记 - Day2

文章目录 学习目标&#xff1a;学习内容&#xff1a;学习笔记&#xff1a;Linux系统启动过程内核引导运行init运行级别系统初始化建立终端用户登录系统 Ubuntu关机关机流程相关命令 Linux系统目录结构查看目录目录结构 文件基本属性读写权限命令 下载文件的方法安装wget工具下载…

30-手动准备地图包

map包遵循特定的文件夹结构&#xff0c;并且必须包含描述该结构的.json文件。我们的自动地图导入过程自动创建这个.json文件&#xff0c;但您也可以选择自己准备它。包括您自己的.json文件将覆盖传递给make import命令的任何参数。 标准地图 为标准地图创建文件夹结构 1.…

「Qt Widget中文示例指南」如何创建一个窗口标志?(一)

Qt 是目前最先进、最完整的跨平台C开发工具。它不仅完全实现了一次编写&#xff0c;所有平台无差别运行&#xff0c;更提供了几乎所有开发过程中需要用到的工具。如今&#xff0c;Qt已被运用于超过70个行业、数千家企业&#xff0c;支持数百万设备及应用。 窗口标志要么是类型…

【GeoJSON在线编辑平台】(1)创建地图+要素绘制+折点编辑+拖拽移动

前言 简单实现一下地图加载、要素绘制、折点编辑和拖拽移动。打算统一都写到一个类里面。 为了快速实现&#xff0c;直接去参考了官方案例。 创建地图 pnpm install ol加载地图 在这里&#xff0c;我们创建一个 mapView.js 的文件专门用来放地图和视图相关的方法&#xff0…

从0开始linux(23)——文件(4)磁盘定址方式

欢迎来到博主的专栏&#xff1a;从0开始Linux 博主ID&#xff1a;代码小豪 文章目录 CHS寻址模式LBA寻址 前面我们介绍了文件管理系统&#xff0c;我们说&#xff0c;当我们使用系统调用open时&#xff0c;操作系统会将磁盘当中的文件加载到内存当中&#xff0c;创建一个struct…

wireshark工具使用

复制数据 1.右键展开整帧数据 2.复制“所有可见项目” mark标记数据 标记&#xff1a; 跳转&#xff1a; 保存成文件&#xff1a; 文件–>导出特定分组—>Marked packets only

固定宽度--文字多少不一样--需要文字充满整个宽度

固定宽度–文字多少不一样–需要文字充满整个宽度 1.场景–登陆页面 这样显示显然不太行 那我们想要是这种情况吗–用户名和密码都充满真个宽度的div 2.代码实现—其中一个重要属性最为关键 text-align-last: justify css <style>.user{width:60px;background-colo…

艾体宝产品丨加速开发!Redis Copilot智能助手上线

我们最近发布了 Redis Copilot&#xff0c;旨在帮助开发者更加高效地使用 Redis 构建应用。提升应用性能&#xff0c;简化构建过程是我们不懈的追求。Redis Copilot 正是为此而生的人工智能助手&#xff0c;助力开发者迅速掌握 Redis 的使用技巧。现在您可以在 Redis Insight 中…

4种鼓励创业创新的方法

随着市场趋于饱和&#xff0c;许多企业&#xff0c;尤其是初创企业&#xff0c;很难在竞争中保持领先地位。技术为企业彻底改变其营销和管理策略铺平了道路。另一个经过实践检验的成功渗透特定市场的方法是在办公室内部激发创新&#xff0c;从员工到品牌皆如此。 那么究竟如何…

Spark的yarn集群环境搭建

一.为什么要搭建yarn集群 为什么要将Spark的程序运行在YARN上&#xff0c;不运行在自带的 Standalone集群上&#xff1f; 1、统一化资源管理 Standalone是Spark专用的资源管理集群&#xff0c;只能用于运行 Spark程序 YARN是功能的分布式资源管理平台&#xff0c;可以运行各种分…

【react使用AES对称加密的实现】

react使用AES对称加密的实现 前言使用CryptoJS库密钥存放加密方法解密方法结语 前言 项目中要求敏感信息怕被抓包泄密必须进行加密传输处理&#xff0c;普通的md5加密虽然能解决传输问题&#xff0c;但是项目中有权限的用户是需要查看数据进行查询的&#xff0c;所以就不能直接…

登录功能设计(php+mysql)

一 登录功能 1. 创建一个登录页面&#xff08;login.php&#xff09;&#xff0c;包含一个表单&#xff0c;用户输入用户名和密码。 2. 在表单的提交事件中&#xff0c;使用PHP代码处理用户输入的用户名和密码。 3. 首先&#xff0c;连接MySQL数据库。然后&a…

ReactPress 是什么?

ReactPress Github项目地址&#xff1a;https://github.com/fecommunity/reactpress 欢迎Star。 ReactPress 是什么&#xff1f; ReactPress 是使用React开发的开源发布平台&#xff0c;用户可以在支持React和MySQL数据库的服务器上架设属于自己的博客、网站。也可以把 ReactP…

ai外呼机器人的作用有哪些?

ai外呼机器人具有极高的工作效率。日拨打成千上万通不是问题&#xff0c;同时&#xff0c;机器人还可以快速筛选潜在客户&#xff0c;将更多精力集中在有价值的客户身上&#xff0c;进一步提升营销效果。183-3601-7550 ai外呼机器人的作用&#xff1a; 1、搭建系统&#xff0c…

福禄克DTX,DSX系列内置标准以及生成的测试报告如何解读?

今日,接到一些朋友的询问?虽然使用了很长一段时间的FLUKE DSX-5000或者DSX-8000,但是对于测试标准和测试生成的报告一知半解,借此咱们一块屡屡清楚。 1,经常有的朋友拿到设备后,第一时间就问,咱们福禄克内置的标准的多少?我线的参数(被测的铜缆)达到多少db,才能算过…

我与Linux的爱恋:磁盘的存储管理

​ ​ &#x1f525;个人主页&#xff1a;guoguoqiang. &#x1f525;专栏&#xff1a;Linux的学习 文章目录 磁盘的存储管理 磁盘的存储管理 在我们日常生活中&#xff0c;我们要打开很多文件(要打开这个文件需要先找到这个文件->要在磁盘中先找到->通过文件路径文件…