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

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

news 2026/4/1 19:32:12

目录

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

探秘书匠策AI：毕业论文写作的“智慧引擎”

在学术探索的征途中&#xff0c;毕业论文如同一座巍峨的山峰&#xff0c;让无数学生既敬畏又向往。它不仅是对所学知识的综合检验&#xff0c;更是学术生涯的重要里程碑。然而&#xff0c;面对这座大山&#xff0c;许多人常常感到力不从心&#xff0c;选题迷茫、文献难觅、结构…...

编程新知 2026/4/1 18:56:55

OpenTiny NEXT 前端智能化系列直播征文开启，带你系统学习 AI 前端与 WebAgent

&#x1f525;个人主页&#xff1a;杨利杰YJlio❄️个人专栏&#xff1a;《Sysinternals实战教程》《Windows PowerShell 实战》《WINDOWS教程》《IOS教程》《微信助手》《锤子助手》 《Python》 《Kali Linux》《那些年未解决的Windows疑难杂症》&#x1f31f; 让复杂的事情更…...

编程新知 2026/4/1 18:40:33

JS 缓存函数（缓存函数计算结果、缓存异步函数的执行结果以及带过期时间）

JS 缓存函数 一、普通函数结果缓存&#xff08;同步缓存&#xff09; 实现一个通用缓存高阶函数&#xff0c;核心逻辑&#xff1a;第一次执行计算并缓存结果&#xff0c;后续相同参数直接读取缓存&#xff0c;不再重复执行。 实现代码 // 缓存高阶函数&#xff1a;接收一个函数…...

编程新知 2026/4/1 18:27:48

Claude Code自动模式上线：AI开始自己改代码了

导读最近 Claude Code 推出了一个关键更新&#xff1a;自动决策模式&#xff08;Auto Mode&#xff09;正式上线。这次不是模型升级&#xff0c;而是权限变化&#xff1a;AI可以自行决定是否修改代码可以直接写入文件不再需要开发者逐步确认每一步操作目前已经在企业版和API用户…...

编程新知 2026/4/1 17:55:43

iOSDeviceSupport：解决设备调试兼容性问题的高效管理工具

iOSDeviceSupport&#xff1a;解决设备调试兼容性问题的高效管理工具 【免费下载链接】iOSDeviceSupport All versions of iOS Device Support 项目地址: https://gitcode.com/gh_mirrors/ios/iOSDeviceSupport 问题场景&#xff1a;当新系统遇见旧Xcode "连接失败…...

编程新知 2026/4/1 16:14:39

MoveIt2新手必看：如何正确选择安装分支（main vs. tutorials）及使用vcs管理多仓库

MoveIt2分支选择与多仓库管理实战指南 当你在ROS2生态中开始使用MoveIt2时&#xff0c;第一个拦路虎往往不是算法理解或代码编写&#xff0c;而是如何正确搭建开发环境。MoveIt2作为由数十个独立Git仓库组成的复杂项目&#xff0c;其分支管理和版本协同问题困扰着许多中级开发者…...

编程新知 2026/4/1 14:03:45

微信聊天记录的数字档案馆：WeChatMsg实现数据永久保存与深度分析

微信聊天记录的数字档案馆&#xff1a;WeChatMsg实现数据永久保存与深度分析 【免费下载链接】WeChatMsg 提取微信聊天记录&#xff0c;将其导出成HTML、Word、CSV文档永久保存&#xff0c;对聊天记录进行分析生成年度聊天报告 项目地址: https://gitcode.com/GitHub_Trendin…...

编程新知 2026/4/1 13:24:57

BGE Reranker-v2-m3在VSCode插件开发中的应用

BGE Reranker-v2-m3在VSCode插件开发中的应用 1. 引言 作为一名长期使用VSCode进行开发的程序员&#xff0c;我经常遇到这样的困扰&#xff1a;在庞大的代码库中搜索特定功能或文档时&#xff0c;传统的文本搜索往往返回大量不相关的结果&#xff0c;需要花费大量时间手动筛选…...

编程新知 2026/4/1 12:38:20

COMSOL数据可视化避坑指南：如何用SciPy的griddata处理不规则网格数据？

COMSOL数据可视化避坑指南&#xff1a;如何用SciPy的griddata处理不规则网格数据&#xff1f; 当你从COMSOL导出电场、温度场或其他物理场数据时&#xff0c;是否遇到过这样的困扰&#xff1a;明明在COMSOL中看起来光滑连续的场分布&#xff0c;导出到MATLAB或Python中绘制时却…...

编程新知 2026/4/1 12:28:17

掌握 Skills 技术引爆 Agent 开发！像装 App 一样让 AI 变“超人”！

本文介绍了 AI Skills 的概念&#xff0c;将其描述为可像人类一样动态加载和使用的“能力模块”&#xff0c;用于解决传统 Agent 开发的痛点&#xff0c;如重复造轮子、能力边界模糊和难以规模化。文章详细阐述了 Skills 的核心特征&#xff08;模块化、可组合、热插拔、标准化…...

编程新知 2026/4/1 11:45:45