后端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);
    		});

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

基于springboot+小程序的汽车销售管理系统(汽车4)

&#x1f449;文末查看项目功能视频演示获取源码sql脚本视频导入教程视频 1、项目介绍 ​ 1、管理员实现了首页、个人中心、管理员管理、基础数据管理、论坛管理、公告信息管理、汽车管理、用户管理、轮播图信息等。 ​ 2、用户实现了注册、登录、首页、汽车类型、论坛、购物…

江协科技STM32学习- P29 实验- 串口收发HEX数据包/文本数据包

&#x1f680;write in front&#x1f680; &#x1f50e;大家好&#xff0c;我是黄桃罐头&#xff0c;希望你看完之后&#xff0c;能对你有所帮助&#xff0c;不足请指正&#xff01;共同学习交流 &#x1f381;欢迎各位→点赞&#x1f44d; 收藏⭐️ 留言&#x1f4dd;​…

Quartz的使用

1.准备工作 建立Maven工程 2.引入Quartz的jar包 <dependencies><dependency><groupId>org.quartz-scheduler</groupId><artifactId>quartz</artifactId><version>2.3.0</version></dependency></dependencies>3…

黑马官网最新2024前端就业课V8.5笔记---CSS篇(2)

盒子模型 画盒子 目标:使用合适的选择器画盒子 新属性 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"vi…

单片机串口接收状态机STM32

单片机串口接收状态机stm32 前言 项目的芯片stm32转国产&#xff0c;国产芯片的串口DMA接收功能测试不通过&#xff0c;所以要由原本很容易配置的串口空闲中断触发DMA接收数据的方式转为串口逐字节接收的状态机接收数据 两种方式各有优劣&#xff0c;不过我的芯片已经主频跑…

Android Studio 安装过程

以前用 Eclipse 开发&#xff0c;最近尝试 Android Studio 开发&#xff0c;发现 Android Studio 比 Eclipse 速度快多了&#xff0c;下面是安装 Android Studio 过程日志。 Gradle 下载地址&#xff1a;https://services.gradle.org/distributions/ https://developer.andro…

github.io出现的问题及解决方案

1. 你的连接不是专用连接 放假回家后打开自己的博客&#xff0c;发现无法打开博客&#xff0c;一开始以为是调样式时不小心搞坏了&#xff0c;打开别人的githunb.io博客发现都会出问题&#xff0c;并且用手机不连接wifi可以正常打开 解决办法&#xff1a; 方法一&#xff1a; …

商场应急管理措施和预案|基于springboot+vue的大型商场应急预案管理系统(源码+数据库+文档)

商场应急管理系统 目录 基于springbootvue的大型商场应急预案管理系统 一、前言 二、系统设计 三、系统功能设计 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&#xff1a; 博主介绍&#xff1a;✌️大厂码农|毕设布道师&…

【ACM出版,EI稳定检索】2024年人工智能、数字媒体技术与交互设计国际学术会议(ICADI 2024,11月29-12月1日)

2024年人工智能、数字媒体技术与交互设计国际学术会议&#xff08;ICADI 2024) 2024 International Conference on Artificial Intelligence, Digital Media Technology and Interaction Design 官方信息 会议官网&#xff1a;www.icadi.net 2024 International Conference o…

【Linux】命令行参数 | 环境变量

&#x1fa90;&#x1fa90;&#x1fa90;欢迎来到程序员餐厅&#x1f4ab;&#x1f4ab;&#x1f4ab; 主厨&#xff1a;邪王真眼 主厨的主页&#xff1a;Chef‘s blog 所属专栏&#xff1a;青果大战linux 总有光环在陨落&#xff0c;总有新星在闪烁 前几天在搞硬件&…

Stable diffusion 3.5本地运行环境配置记录

1.环境配置 创建虚环境 conda create -n sd3.5 python3.10Pytorch(>2.0) conda install pytorch2.2.2 torchvision0.17.2 torchaudio2.2.2 pytorch-cuda12.1 -c pytorch -c nvidiaJupyter能使用Anaconda虚环境 conda install ipykernel python -m ipykernel install --user …

CODESYS可视化星三角降压启动程序控制电气动画图

#一个用CODESYS可视化做的星三角降压启动程序控制电气动画图# 前言: 关于星三角降压启动控制,作为电气行业入门的必备知识点,涉及到电机本身特性导致的电压,电流(转矩),功率和转速等一系列的关系和变化,以及星型和三角形的绕组方式。本篇我们使用CODESYS结合程序和可视…

安装fpm,解决*.deb=> *.rpm

要从生成 .deb 包转换为 .rpm 包&#xff0c;可以按照以下步骤修改打包脚本 1. 使用 fpm 工具 fpm 是一个强大的跨平台打包工具&#xff0c;可以将 .deb 包重新打包成 .rpm&#xff0c;也可以直接从源文件打包成 .rpm。 安装 fpm sudo apt-get install ruby-dev sudo gem in…

C#的Event事件示例小白级剖析

1、委托Delegate 首先说一下delegate委托&#xff0c;委托是将方法作为参数进行传递。 // 定义了一个委托类型public delegate void MyDelegate(int num);// 定义了一个啥也不干的委托实例public MyDelegate m_delegate _ > {};// 定义了一个和委托相同格式的方法public …

力扣排序350题 两个元组的交集2

题目&#xff1a; 给你两个整数数组 nums1 和 nums2 &#xff0c;请你以数组形式返回两 数组的交集。返回结果中每个元素出现的次数&#xff0c;应与元素在两个 数组中都出现的次数一致&#xff08;如果出现次数不一致&#xff0c;则考虑取 较小值&#xff09;。可以不考虑输出…

善用Git LFS来降低模型文件对磁盘的占用

将讲一个实际的例子&#xff1a;对于模型文件&#xff0c;动辄就是好几个G&#xff0c;而有的仓库更是高达几十G&#xff0c;拉一个仓库到本地&#xff0c;稍不注意直接磁盘拉满都有可能。 比如&#xff1a;meta-llama-3.1-8b-instruct&#xff0c;拉到本地后发现居然占用了60G…

CentOS 磁盘扩容

1. 查看要扩展的磁盘 df -h这个就是要扩展的磁盘空间&#xff0c;记住名称&#xff0c;后面会用到 2. 查看所有磁盘信息 fdisk -llsblk可以发现&#xff0c;500G 的硬盘已经安装到服务器但是没被使用&#xff0c;此时需要操作这块硬盘 3. 创建分区 fdisk /dev/vdb根据流程…

js中怎么把excel和pdf文件转换成图片打包下载

index.html <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>文件转图片工具</title><!-- 本…

【JavaEE初阶 — 多线程】Thread类的方法&线程生命周期

目录 1. start() (1) start() 的性质 (2) start() 和 Thread类 的关系 2. 终止一个线程 (1)通过共享的标记结束线程 1. 通过共享的标记结束线程 2. 关于 lamda 表达式的“变量捕获” (2) 调用interrupt()方法 1. isInterrupted() 2. currentThread() …

Metasploit渗透测试之在云服务器中使用MSF

概述 随着云计算的发展&#xff0c;对基于云的应用程序、服务和基础设施的测试也在不断增加。在对云部署进行渗透测试时&#xff0c;最大的问题之一是共享所有权。过去&#xff0c;在进行渗透测试时&#xff0c;企业会拥有网络上的所有组件&#xff0c;我们可以对它们进行全部…