当前位置： 首页 > news >正文

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

news 2025/11/9 6:45:47

目录

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

相关文章：

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

目录 1.富文本编辑器的优点 2.文件的准备 3.文件的导入 导入到项目&#xff1a; 导入到html文件&#xff1a; ​编辑 4.富文本编辑器的使用 1.富文本编辑器的优点 我们从前端写入数据库时&#xff0c;文字的样式具有局限性&#xff0c;不能存在换行&#xff0c;更改字体…...

编程日记 2024/11/5 9:12:07

thinkphp6 redis 哈希存储方式以及操作函数（笔记）

逻辑&#xff1a;如果redis里没有指定表数据就进行存储再输出&#xff0c;如果有就直接输出&#xff0c;代码优化后几万条数据从数据库入redis也是三四秒的时间&#xff0c;数据以json方式存储&#xff1a;key用于数据ID 跟数据库数据ID同步&#xff0c;value用于存储整个字段包…...

编程日记 2024/11/5 9:10:04

「Mac畅玩鸿蒙与硬件28」UI互动应用篇5 - 滑动选择器实现

本篇将带你实现一个滑动选择器应用&#xff0c;用户可以通过滑动条选择不同的数值&#xff0c;并实时查看选定的值和提示。这是一个学习如何使用 Slider 组件、状态管理和动态文本更新的良好实践。 关键词 UI互动应用Slider 组件状态管理动态数值更新用户交互 一、功能说明 在…...

编程日记 2024/11/5 9:08:00

【嵌入式】STM32中的SPI通信

SPI是由摩托罗拉公司开发的一种通用数据总线&#xff0c;其中由四根通信线&#xff0c;支持总线挂载多设备&#xff08;一主多从&#xff09;&#xff0c;是一种同步全双工的协议。主要是实现主控芯片和外挂芯片之间的交流。这样可以使得STM32可以访问并控制各种外部芯片。本文…...

编程日记 2024/11/5 9:06:59

后端：Spring、Spring Boot-配置、定义bean

文章目录 1. 什么是Bean&#xff0c;如何配置2. 如何配置bean2.1 使用注解Bean2.2 使用注解Import 1. 什么是Bean&#xff0c;如何配置 被spring容器所管理的对象被称为bean&#xff0c;管理方式可以有纯xml文件方式、注解方式进行管理(比如注解Component)。 在Spring Boot中&…...

编程日记 2024/11/5 9:04:57

【Git】Git 远程仓库命令详解

目录 引言1. Git Fetch、Git Pull 和 Git Push 简介1.1 概念总结1.2 图示概念 2. 分支的概念2.1 分支定义2.2 分支的特点2.3 分支示例2.4 基本操作命令2.5 分支的使用场景 3. Git Fetch 用法3.1 基本命令3.2 获取特定分支3.3 查看更新内容3.4 使用示例3.5 适用场景 4. Git Pull…...

编程日记 2024/11/5 9:03:56

html简易流程图

效果图 使用htmlcssjs&#xff0c;无图片&#xff0c;没用Canvas demo: <!DOCTYPE html> <html> <head><link href"draw.css" rel"stylesheet" /><script src"draw.js" type"text/javascript"></…...

编程日记 2024/11/5 9:02:55

Java 入门

目录 Java简介 Java JDK开发环境配置 第一个Java程序 Java标识符与关键字 Java注释 Java常量 Java变量的定义和使用 Java简介 Java简介&#xff1a; Java是由Sun Microsystems公司于1995年推出的一门面向对象的高级程序设计语言&#xff0c;可以运行于多个平台&#xff0c;其…...

编程日记 2024/11/5 9:01:54

JVM基本结构和垃圾回收机制

一、JVM基本结构 Java虚拟机&#xff08;JVM, Java Virtual Machine&#xff09;是Java程序执行的环境&#xff0c;其基本结构可以分为以下几个主要部分&#xff1a; 类加载器子系统&#xff08;Class Loader Subsystem&#xff09;&#xff1a; 负责加载Java类文件到内存中。…...

编程日记 2024/11/5 8:57:48

CentOS 7 安装 ntp，自动校准系统时间

1、安装 ntp yum install ntp 安装好后&#xff0c;ntp 会自动注册成为服务&#xff0c;服务名称为 ntpd 2、查看当前 ntpd 服务的状态 systemctl status ntpd 3、启动 ntpd 服务、查看 ntpd 服务的状态 systemctl start ntpdsystemctl status ntpd 4、设置 ntpd 服务开机启…...

编程日记 2024/11/5 8:55:46

Spring Boot 配置文件启动加载顺序

前言 Spring Boot的启动加载顺序是一个涉及多个步骤和组件的过程。Spring Boot通过一系列默认设置简化了应用程序的配置&#xff0c;使得开发者能够快速地搭建和部署应用。为了实现这一目标&#xff0c;Spring Boot采用了一种分层和优先级机制来加载配置文件。 一、Spring Bo…...

编程日记 2024/11/5 8:54:45

webrtc agc2实现原理

WebRTC的AGC2&#xff08;自适应增益控制器&#xff09;是一种用于音频处理的算法&#xff0c;可以根据输入信号的强度自动调整增益&#xff0c;使输出信号的音量保持稳定。其详细原理如下&#xff1a; 噪声估计 首先&#xff0c;AGC2需要对输入信号中的噪声进行估计&#xff…...

编程日记 2024/11/5 8:52:42

2024.11.03 周报

一 实时超分音频同步问题: 处理方向&#xff1a; 按照胡学长的办法尝试: 前面处理视频, 将视频中音频提取出来, 将音频每隔 1-2 秒保存为一段 (这样将音频缓存在内存中) , 然后依次播放, 但是音频是44.1KHz采样率&#xff0c;每秒44100次的频率. 每次间隔中程序处理的极短时间…...

编程日记 2024/11/5 8:50:40

Oceanbase学习之一迁移mysql数据到oceanbase

一、数据库环境 #mysql环境 root192.168.150.162 20:28: [(none)]> select version(); ---------- | version() | ---------- | 8.0.26 | ---------- 1 row in set (0.00 sec) root192.168.150.162 20:28: [(none)]> show variables like ‘%char%’; ---…...

编程日记 2024/11/5 8:49:38

Milvus - GPU 索引类型及其应用场景

1. 背景概述 Milvus 是一款高效的矢量数据库管理系统&#xff0c;支持在高并发和高调用场景下加速相似度搜索。Milvus 的 GPU 支持由 NvidiaRAPIDS 团队提供&#xff0c;可以借助各种 GPU 索引类型来优化性能。本篇将重点解析 Milvus 支持的 GPU 索引类型、适用场景及各自的性…...

编程日记 2024/11/5 8:48:36

Webserver(2.8)守护进程

目录 守护进程案例 守护进程案例 每隔2s获取系统时间&#xff0c;将这个时间写入到磁盘文件中 #include<stdio.h> #include<sys/stat.h> #include<sys/types.h> #include<unistd.h> #include<fcntl.h> #include<sys/time.h> #include<…...

编程日记 2024/11/5 8:43:29

HarmonyOS :

HarmonyOS 移动应用开发 什么是HarmonyOS&#xff1f;&#xff1a; 官方解释&#xff1a;HarmonyOS是一款面向万物互联时代的、全新的分布式操作系统。 鸿蒙操作系统在传统的单设备系统能力的基础上&#xff0c;提出了基于同一套系统能力、适配多种终端形态的分布式理念&#…...

编程日记 2024/11/5 8:38:25

C# EF 使用

WPF EF MySQL - - -版本.NET Framework4.7.2EntityFramework6.5.1MySql.Data.EntityFramework9.1.0 创建数据库 ccApp.config <connectionStrings><add name"MyDbContext" providerName"MySql.Data.MySqlClient" connectionString"server…...

编程日记 2024/11/5 8:36:23

简介Voronoi图Voronoi Diagrams

这是计算机的经典算法。 问题引入 倘若一张大白纸上有很多三角点&#xff0c;掉进去一个五星点&#xff0c;问&#xff0c;哪个三角离着五星最近&#xff1f;简单&#xff0c;算距离呗&#xff0c;这个五星到其他所有三角点的距离&#xff0c;找到最小的那个就行。 若掉进去…...

编程日记 2024/11/5 8:30:11

硬件测试工程师之EMC项目-辐射抗扰度试验（RS）测试标准解析思维导图

1&#xff1a;链接上一篇文章 硬件测试工程师之EMC项目-电磁干扰-谐波测试标准解析 2&#xff1a;总结思维导图并进行深入解析EMC-辐射抗扰度测试项目 附上相关报告文档以及图片解析。 3:以下为思维导图大致展示&#xff0c;后续可可方便观看。如有需要也可以下载。 本期先…...

编程日记 2024/11/5 8:28:09

springboot 百货中心供应链管理系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;百货中心供应链管理系统被用户普遍使用&#xff0c;为方…...

编程新知 2025/11/7 14:02:25

【HarmonyOS 5.0】DevEco Testing：鸿蒙应用质量保障的终极武器

——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的​​一体化测试平台​​&#xff0c;覆盖应用全生命周期测试需求&#xff0c;主要提供五大核心能力&#xff1a; ​​测试类型​​​​检测目标​​​​关键指标​​功能体验基…...

编程新知 2025/11/7 20:35:59

Qt Widget类解析与代码注释

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码&#xff0c;写上注释 当然可以&#xff01;这段代码是 Qt …...

编程新知 2025/11/1 0:38:44

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案，答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年，()预言了电磁波的存在，并指出…...

编程新知 2025/10/18 21:05:27

Python爬虫（一）：爬虫伪装

一、网站防爬机制概述 在当今互联网环境中&#xff0c;具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类&#xff1a; 身份验证机制&#xff1a;直接将未经授权的爬虫阻挡在外反爬技术体系&#xff1a;通过各种技术手段增加爬虫获取数据的难度…...

编程新知 2025/11/8 7:45:18

IT供电系统绝缘监测及故障定位解决方案

随着新能源的快速发展&#xff0c;光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域&#xff0c;IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选&#xff0c;但在长期运行中&#xff0c;例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...

编程新知 2025/11/8 10:15:29

使用LangGraph和LangSmith构建多智能体人工智能系统

现在&#xff0c;通过组合几个较小的子智能体来创建一个强大的人工智能智能体正成为一种趋势。但这也带来了一些挑战&#xff0c;比如减少幻觉、管理对话流程、在测试期间留意智能体的工作方式、允许人工介入以及评估其性能。你需要进行大量的反复试验。 在这篇博客〔原作者&a…...

编程新知 2025/11/8 2:57:48

JavaScript 数据类型详解

JavaScript 数据类型详解 JavaScript 数据类型分为 原始类型&#xff08;Primitive&#xff09; 和 对象类型&#xff08;Object&#xff09; 两大类&#xff0c;共 8 种&#xff08;ES11&#xff09;&#xff1a; 一、原始类型&#xff08;7种&#xff09; 1. undefined 定…...

编程新知 2025/10/30 21:24:32

快刀集(1): 一刀斩断视频片头广告

一刀流&#xff1a;用一个简单脚本&#xff0c;秒杀视频片头广告&#xff0c;还你清爽观影体验。 1. 引子 作为一个爱生活、爱学习、爱收藏高清资源的老码农&#xff0c;平时写代码之余看看电影、补补片&#xff0c;是再正常不过的事。 电影嘛&#xff0c;要沉浸&#xff0c;…...

编程新知 2025/9/3 5:42:53

（一）单例模式

一、前言 单例模式属于六大创建型模式，即在软件设计过程中，主要关注创建对象的结果，并不关心创建对象的过程及细节。创建型设计模式将类对象的实例化过程进行抽象化接口设计，从而隐藏了类对象的实例是如何被创建的，封装了软件系统使用的具体对象类型。 六大创建型模式包括…...

编程新知 2025/11/8 9:15:01