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

初学者如何设置以及使用富文本编辑器[eclipse版]

news 2026/4/22 18:13:17

手把手教你设置富文本编辑器

参考来源：UEditor Docs 

初学者按我的步骤来就可以啦

一、设置ueditor编辑器

1.提取文件[文章最底部有链接提取方式]

2.解压文件并放到自己项目中，在WebContent目录下：

3. 修改jar包位置路径

到-->

注意：此时json还在报错，这个不用管，是因为json注释的原因。

右键，打开Properties：

如果想要使得json中注释不为乱码：修改encoding为utf-8形式并应用。

4.新建一个html页面

复制以下代码：

<!DOCTYPE HTML>
<html lang="en-US"><head><meta charset="UTF-8"><title>ueditor demo</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>

由于我的项目跟解压包里的js未在一个路径内如下图：

所以 根据需要修改src：

    <!-- 配置文件 --><script type="text/javascript" src="utf8-jsp/utf8-jsp/ueditor.config.js"></script><!-- 编辑器源码文件 --><script type="text/javascript" src="utf8-jsp/utf8-jsp/ueditor.all.js"></script>

最后直接运行就可：

5.注意事项：

发现图片上传上去后无法加载出来，

 需要设置一下config.json文件中的在"imageUrlPrefix": ""

填上：/*其中*需要用你设置该编辑器的母文件名代替。比如我的utf8-jsp在qcby2母文件下，则输入：

    "imageUrlPrefix": "/qcby2", /* 图片访问路径前缀 */

最后上传图片成功：

使用utf8-jsp.rar包的提取链接：
https://pan.baidu.com/s/1oiYEMfdV9Tnx2sY6dkPHuQ?pwd=rt71 提取码: rt71 
 

二、编辑器原理

1.先在html里设置一个按钮获取我在编辑器里设置文字、图像样式的信息，完整代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="js/jquery.js"></script>
</head>
<body><!-- 加载编辑器的容器 --><script id="container" name="content" type="text/plain">这里写你的初始化内容</script><input type="button" value='获取信息' class='btn'><div class='aaa'></div><!-- 配置文件 --><script type="text/javascript" src="utf8-jsp/ueditor.config.js"></script><!-- 编辑器源码文件 --><script type="text/javascript" src="utf8-jsp/ueditor.all.js"></script><!-- 实例化编辑器 --><script type="text/javascript">var ue = UE.getEditor('container');$(".btn").click(function(){console.log(ue.getContent())$(".aaa").html(ue.getContent())})</script>
</body>
</html>

然后运行，打开检查，其中：

 在控制台中的就是左侧信息形式的标签，通过$(".aaa").html(ue.getContent())可以再次展示到html中。

三、使用编辑器

1.编辑器常在文字添加时候使用，以我的项目为例：

可以发现在后台添加内容时，无法实现对文字格式的设置，只能输入纯文本无法添加样式。

2. （1）html：此时只要将以下代码复制到对应的add.html所需位置中

            <!-- 加载编辑器的容器 --><script id="container" name="content" type="text/plain"></script><!-- 配置文件 --><script type="text/javascript" src="utf8-jsp/ueditor.config.js"></script><!-- 编辑器源码文件 --><script type="text/javascript" src="utf8-jsp/ueditor.all.js"></script>

（2）js：对应js文件中加入以下代码即可

var ue = UE.getEditor('container');

加修改content原来接受输入的那一部分 

最后就实现啦~

[剩下的就该把对应数据信息存入到后端数据库中就可以了] 

3.接入后端[Java]

4.测试

输入添加信息

查看数据库

 可知内容上已经设置了。

——end——

相关文章：

初学者如何设置以及使用富文本编辑器[eclipse版]

手把手教你设置富文本编辑器 参考来源&#xff1a;UEditor Docs 初学者按我的步骤来就可以啦 一、设置ueditor编辑器 1.提取文件[文章最底部有链接提取方式] 2.解压文件并放到自己项目中&#xff0c;在WebContent目录下&#xff1a; 3. 修改jar包位置路径 到--> 注意&a…...

编程日记 2025/2/23 21:30:51

在 Java 中解析 JSON 数据

例子解析以下JSON数据 {"code":0,"msg":"成功","data": [{ "host":"1068222.com", "port":"", "m_token":"490e20e70e7de5f21a24b14c12a393f6", "categ…...

编程日记 2025/2/23 21:29:47

Python爬虫实战：从零到一构建数据采集系统

文章目录 前言一、准备工作1.1 环境配置1.2 选择目标网站 二、爬虫实现步骤2.1 获取网页内容2.2 解析HTML2.3 数据保存 三、完整代码示例四、优化与扩展4.1 反爬应对策略4.2 动态页面处理4.3 数据可视化扩展 五、注意事项六、总结互动环节 前言 在大数据时代&#xff0c;数据采…...

编程日记 2025/2/23 21:28:42

SpringCloud系列教程：微服务的未来（二十五）-基于注解的声明队列交换机、消息转换器、业务改造

前言 在现代分布式系统中&#xff0c;消息队列是实现服务解耦和异步处理的关键组件。Spring框架提供了强大的支持&#xff0c;使得与消息队列&#xff08;如RabbitMQ、Kafka等&#xff09;的集成变得更加便捷和灵活。本文将深入探讨如何利用Spring的注解驱动方式来配置和管理队…...

编程日记 2025/2/23 21:27:39

Opengl常用缓冲对象功能介绍及使用示例（C++实现）

本文整理了常用的opengl缓冲区对象并安排了使用示例 名称英文全称作用简述顶点数组对象Vertex Array Object (VAO)管理 VBO 和 EBO 的配置&#xff0c;存储顶点属性设置&#xff0c;简化渲染流程&#xff0c;避免重复设置状态顶点缓冲区对象Vertex Buffer Object (VBO)存储顶点…...

编程日记 2025/2/23 21:24:34

docker独立部署milvus向量数据库

milvus镜像&#xff1a;国外封锁&#xff0c;国内源也不好用。基本上所有源都不能用 首先想到阿里云服务&#xff0c;但是阿里云国外服务器便宜的300~400呢。 基于成本考虑终于装上心心念念的milvus(*^▽^*) 安装 Milvus 安装 Milvus 独立版 wget https://raw.githubuserco…...

编程日记 2025/2/23 21:21:32

【JT/T 808协议】808 协议开发笔记 ② ( 终端注册 | 终端注册应答 | 字符编码转换网站 )

文章目录 一、消息头 数据1、消息头拼接2、消息 ID 字段3、消息体属性 字段4、终端手机号 字段5、终端流水号 字段 二、消息体 数据三、校验码计算四、最终计算结果五、终端注册应答1、分解终端应答数据2、终端应答 消息体 数据 六、字符编码转换网站 一、消息头 数据 1、消息头…...

编程日记 2025/2/23 21:15:24

github配置sshkey

使用命令生成sshkey ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" 依此会要求输入以下信息&#xff0c;可以使用默认值 设置保存密钥的路径 设置SSH密钥密码&#xff08;备注&#xff1a;空内容表示不设置SSH密钥密码&#xff09; 再次确认SSH密钥密…...

编程日记 2025/2/23 21:13:20

Java数据结构第十二期：走进二叉树的奇妙世界(一)

专栏&#xff1a;数据结构(Java版) 个人主页&#xff1a;手握风云 目录 一、树型结构 1.1. 树的定义 1.2. 树的基本概念 1.3. 树的表示形式 二、二叉树 2.1. 概念 2.2. 两种特殊的二叉树 2.3. 二叉树的性质 2.4. 二叉树的存储 三、二叉树的基本操作 一、树型结构 1.…...

编程日记 2025/2/23 21:11:18

Web的增删改查

准备环境 1. 添加web 点击项目右键——>选择**添加框架**选择**web应用程序** 2.创建lib目录 在web应用程序的**WEB-INF目录下**创建lib目录添加jar包(5个)解压&#xff1a;右键——>选择**添加库** 3.创建Dao层 在src目录下创建包com.zmq在该包下创建dao层添加工具…...

编程日记 2025/2/23 21:06:11

Java 前后端时间格式转换

在 Web 开发里&#xff0c;时间格式处理既常见又关键。由于前端和后端对时间的表示、处理方式存在差异&#xff0c;熟练掌握时间格式的转换方法就显得尤为重要。这篇文章会深入探讨 Java 前后端时间格式转换的相关知识&#xff0c;特别是 Java 时间转换的多种方式&#xff0c;其…...

编程日记 2025/2/23 21:02:01

【用deepseek和chatgpt做算法竞赛】——还得DeepSeek来 -Minimum Cost Trees_5

往期 【用deepseek和chatgpt做算法竞赛】——华为算法精英实战营第十九期-Minimum Cost Trees_0&#xff1a;介绍了题目和背景【用deepseek和chatgpt做算法竞赛】——华为算法精英实战营第十九期-Minimum Cost Trees_1&#xff1a;题目输入的格式说明&#xff0c;选择了邻接表…...

编程日记 2025/2/23 20:59:59

C++ 互斥锁的使用

mutex std::mutex 是C标准库中用于线程同步的互斥锁机制&#xff0c;主要用于保护共享资源&#xff0c;避免多个线程同时访问导致的竞态条件。 它提供了以下功能&#xff1a; 加锁&#xff08;lock&#xff09;&#xff1a;阻塞当前线程&#xff0c;直到获取锁。 解锁&#…...

编程日记 2025/2/23 20:41:32

【Elasticsearch】Retrieve inner hits获取嵌套查询的具体的嵌套文档来源，以及父子文档的来源

Retrieve inner hits 是 Elasticsearch 中的一个功能&#xff0c;用于在嵌套查询或父子查询中&#xff0c;返回导致主文档匹配的具体嵌套对象或子/父文档的详细信息&#xff0c;帮助用户更直观地理解查询结果的来源。 在 Elasticsearch 中&#xff0c;Retrieve inner hits是一…...

编程日记 2025/2/23 20:40:31

C语言中的typedef关键字详解

C语言中的typedef关键字详解 在C语言编程中&#xff0c;typedef 关键字是一个非常实用的特性&#xff0c;它可以帮助我们创建新的类型名&#xff0c;从而简化代码&#xff0c;提高可读性。本文将详细解析typedef的使用方法、场景以及注意事项。 1. typedef简介 typedef 是Ty…...

编程日记 2025/2/23 20:33:16

怎麼利用靜態ISP住宅代理在指紋流覽器中管理社媒帳號？

靜態ISP住宅代理是一種基於真實住宅IP的代理服務。這類代理IP通常由互聯網服務提供商&#xff08;ISP&#xff09;分配&#xff0c;具有非常高的真實性&#xff0c;與普通數據中心代理相比&#xff0c;更不容易被平臺檢測到為“虛假IP”或“代理IP”&#xff0c;靜態ISP住宅代理…...

编程日记 2025/2/23 20:31:12

【多语言生态篇一】【DeepSeek×Java：Spring Boot微服务集成全栈指南 】

（手把手带你从零实现AI能力调用，万字长文预警，建议收藏实操） 一、环境准备：别输在起跑线上 1.1 硬件软件全家桶 JDK版本：必须 ≥17（Spring Boot 3.2+强制要求，低版本直接报错）IDE推荐：IntelliJ IDEA终极版（社区版缺Spring AI插件支持）构建工具：Maven 3.9+ / Grad…...

编程日记 2025/2/23 20:25:58

IOS UITextField 无法隐藏键盘问题

设置UITextField 键盘按钮返回键为“完成”&#xff0c;即return key 设置done .m代码设置代理 //设置代理协议 UITextFieldDelegate&#xff0c; self.mobileTextField.delegate self; ///点击完成键隐藏键盘 - (BOOL)textFieldShouldReturn:(UITextField *)textField{//取…...

编程日记 2025/2/23 20:21:52

einops测试

文章目录 1. einops2. code3. pytorch 1. einops einops 主要是通过爱因斯坦标记法来处理张量矩阵的库&#xff0c;让矩阵处理上非常简单。 conda : conda install conda-forge::einopspython: 2. code import torch import torch.nn as nn import torch.nn.functional as…...

编程日记 2025/2/23 20:19:43

25轻化工程研究生复试面试问题汇总 轻化工程专业知识问题很全！ 轻化工程复试全流程攻略 轻化工程考研复试真题汇总

轻化工程复试心里没谱&#xff1f;学姐带你玩转面试准备&#xff01; 是不是总觉得老师会问些刁钻问题&#xff1f;别焦虑&#xff01;其实轻化工程复试套路就那些&#xff0c;看完这篇攻略直接掌握复试通关密码&#xff01;文中有重点面试题可直接背~ 目录 一、这些行为赶紧避…...

编程日记 2025/2/23 20:17:37

当你的代码卡住了：聊聊Python里的“假同步真异步”

小李今天差点把电脑砸了。他写了一个爬虫&#xff0c;要从一万个网站上抓数据。代码很简单&#xff1a;请求网址、解析内容、存进数据库。跑了十分钟&#xff0c;才抓了三百个。他打开任务管理器一看&#xff0c;CPU占用率才5%&#xff0c;网络流量几乎为零。“我这电脑是i9啊&…...

编程新知 2026/4/22 18:05:26

量子纠错技术：虚拟量子重复码的创新与应用

1. 量子纠错基础与核心挑战 量子纠错&#xff08;QEC&#xff09;是量子计算得以实现的关键技术支柱。与传统经典比特不同&#xff0c;量子比特&#xff08;qubit&#xff09;面临着更为复杂的错误模式&#xff1a;除了比特翻转&#xff08;bit-flip&#xff09;这类经典错误外…...

编程新知 2026/4/22 17:15:00

在银河麒麟V10+FT2000服务器上，我踩过的那些软件安装的坑（附完整避坑指南）

银河麒麟V10FT2000服务器软件安装避坑实战指南 第一次在银河麒麟V10操作系统上部署服务时&#xff0c;我盯着那个不断闪烁的光标&#xff0c;意识到国产化平台的软件生态与x86体系存在诸多微妙差异。FT2000处理器的架构特性、操作系统的权限管理机制、软件包的依赖关系——每一…...

编程新知 2026/4/22 16:47:28

CatBoost在房价预测中的优势与实践

1. CatBoost简介与房价预测背景CatBoost作为梯度提升决策树&#xff08;GBDT&#xff09;家族的重要成员&#xff0c;由Yandex团队于2017年推出。与其他提升算法相比&#xff0c;它最显著的特点是对类别型特征的原生支持。在房价预测这类典型场景中&#xff0c;我们经常会遇到大…...

编程新知 2026/4/22 16:35:12

TwitchDropsMiner：解放双手，轻松获取游戏奖励的智能助手

TwitchDropsMiner&#xff1a;解放双手&#xff0c;轻松获取游戏奖励的智能助手 【免费下载链接】TwitchDropsMiner An app that allows you to AFK mine timed Twitch drops, with automatic drop claiming and channel switching. 项目地址: https://gitcode.com/GitHub_Tr…...

编程新知 2026/4/22 16:17:15

Docker存储安全红线：7类未授权挂载风险场景曝光，CVE-2023-XXXX复现与零信任加固方案（含OCI合规检查表）

第一章&#xff1a;Docker存储安全红线&#xff1a;核心概念与威胁全景Docker 存储机制是容器运行时数据持久化与隔离的关键载体&#xff0c;其安全性直接影响镜像完整性、容器间数据隔离及宿主机系统防护能力。理解存储驱动&#xff08;如 overlay2、aufs&#xff09;、卷&…...

编程新知 2026/4/22 16:04:55

别再复制粘贴了！用STM32CubeMX LL库玩转按键、LED和蜂鸣器，这才是高效开发

STM32CubeMX LL库实战&#xff1a;解锁寄存器级高效开发的5个关键策略 当你第一次在STM32项目中使用HAL库时&#xff0c;可能会被它的易用性所吸引——简单的API调用就能完成复杂的外设配置。但当你深入项目开发&#xff0c;特别是对性能有严格要求时&#xff0c;HAL库的抽象层…...

编程新知 2026/4/22 15:51:24

基于深度学习的yolo11的SAR图像车辆检测 sar图像识别

文章目录一个用于车辆检测的SAR图像数据集引言数据下载基本信息统计信息推理代码注释格式文件结构一个用于车辆检测的SAR图像数据集 引言 是一个专为车辆检测设计的合成孔径雷达&#xff08;SAR&#xff09;图像数据集。它使用了Ka、Ku和X波段的数据&#xff0c;旨在提供多样化…...

编程新知 2026/4/22 15:21:08

TwitchDropsMiner完整指南：零带宽自动获取游戏掉落奖励的终极方案

TwitchDropsMiner完整指南&#xff1a;零带宽自动获取游戏掉落奖励的终极方案 【免费下载链接】TwitchDropsMiner An app that allows you to AFK mine timed Twitch drops, with automatic drop claiming and channel switching. 项目地址: https://gitcode.com/GitHub_Tren…...

编程新知 2026/4/22 15:05:34

数据科学实战：从算法到工程落地的全流程指南

1. 数据科学从业者的实战路径我刚入行时以为掌握几个算法就能胜任数据科学工作&#xff0c;直到第一次参与真实项目才意识到这个领域的复杂性远超想象。数据科学、人工智能和大数据这三个紧密关联的领域&#xff0c;本质上是用数据解决商业问题的系统工程&#xff0c;需要技术栈…...

编程新知 2026/4/22 14:57:26