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

news2024/11/24 13:56:20

目录

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.coloradmin.cn/o/2232465.html

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

相关文章

Rust移动开发:Rust在Android端集成使用介绍

Andorid调用Rust 目前Rust在移动端上的应用&#xff0c;一般作为应用sdk的提供&#xff0c;供各端使用&#xff0c;目前飞书底层使用Rust编写通用组件。 该篇适合对Android、Rust了解&#xff0c;想看如何做整合&#xff0c;如果想要工程源码&#xff0c;可以评论或留言有解疑…

推荐一款高级的安装程序打包工具:Advanced Installer Architect

AdvanCEd Installer Architect是一款高级的安装程序打包工具&#xff0c;我们有时候可能用nsis用的多&#xff0c;Advanced Installer Architect也是一款打包工具&#xff0c;有兴趣的朋友也可以试试。有了Advanced Installer Architect你就可以创建MSI打包。 主要功能 *先进的…

关于Linux系统调试和性能优化技巧有哪些?

成长路上不孤单&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a; 【14后&#x1f60a;///C爱好者&#x1f60a;///持续分享所学&#x1f60a;///如有需要欢迎收藏转发///&#x1f60a;】 今日分享关于Linux系统调试和性能优化技巧的相关内容…

MySQL中,GROUP BY 分组函数

文章目录 示例查询&#xff1a;按性别分组统计每组信息示例查询&#xff1a;按性别分组显示详细信息示例查询&#xff1a;按性别分组并计算平均年龄,如果你还想统计每个性别的平均年龄&#xff0c;可以结合AVG()函数&#xff1a;说明 示例查询&#xff1a;按性别分组统计每组信…

Docker:容器编排 Docker Compose

Docker&#xff1a;容器编排 Docker Compose docker-composedocker-compose.ymlservicesimagecommandenvironmentnetworksvolumesportshealthcheckdepends_on 命令docker compose updocker compose down其它 docker-compose 多数情况下&#xff0c;一个服务需要依赖多个服务&a…

.net Core 使用Panda.DynamicWebApi动态构造路由

我们以前是通过创建controller来创建API&#xff0c;通过controller来显示的生成路由&#xff0c;这里我们讲解下如何不通过controller&#xff0c;构造API路由 安装 Panda.DynamicWebApi 1.2.2 1.2.2 Swashbuckle.AspNetCore 6.2.3 6.2.3添加ServiceAction…

交换机如何实现2.5G网络传输速率和网络变压器有关吗

华强盛电子导读&#xff1a;I19926430038 交换机实现2.5G网络传输速率涉及多个因素&#xff0c;其中包括硬件设计、端口支持、传输介质以及网络协议等。网络变压器在其中扮演了一个重要的角色&#xff0c;但并不是唯一的因素。 1. **硬件设计**&#xff1a;交换机需要有支持2.…

Chrome 130 版本开发者工具(DevTools)更新内容

Chrome 130 版本开发者工具&#xff08;DevTools&#xff09;更新内容 一、网络&#xff08;Network&#xff09;面板更新 1. 重新定义网络过滤器 网络面板获新增了一些过滤条件&#xff0c;这些过滤条件是根据反馈重新设计的&#xff0c;特定于类型的过滤条件保持不变&…

JAVA设计模式之【建造者模式】

1 定义 建造者模式&#xff08;Builder Pattern&#xff09;使用多个简单的对象一步一步构建成一个复杂的对象。这种类型的设计模式属于创建型模式&#xff0c;它提供了一种创建对象的最佳方式。 2 类图 产品类&#xff08;Product&#xff09;&#xff1a;表示被创建的复杂…

百度如何打造AI原生研发新范式?

&#x1f449;点击即可下载《百度AI原生研发新范式实践》资料 2024年10月23-25日&#xff0c;2024 NJSD技术盛典暨第十届NJSD软件开发者大会、第八届IAS互联网架构大会在南京召开。本届大会邀请了工业界和学术界的专家&#xff0c;优秀的工程师和产品经理&#xff0c;以及其它行…

算法|牛客网华为机试31-40C++

牛客网华为机试 上篇&#xff1a;算法|牛客网华为机试21-30C 文章目录 HJ31 单词倒排HJ32 密码截取HJ33 整数与IP地址间的转换HJ34 图片整理HJ35 蛇形矩阵HJ36 字符串加密HJ37 统计每个月兔子的总数HJ38 求小球落地5次后所经历的路程和第5次反弹的高度HJ39 判断两个IP是否属于同…

UI自动化测试 —— CSS元素定位实践!

前言 自动化测试元素定位是指在自动化测试过程中&#xff0c;通过特定的方法或策略来准确识别和定位页面上的元素&#xff0c;以便对这些元素进行进一步的操作或断言。这些元素可以是文本框、按钮、链接、图片等HTML页面上的任何可见或不可见的组件。 在自动化测试中&#xf…

【实战篇】requests库 - 有道云翻译爬虫 【附:代理IP的使用】

目录 〇、引言一、目标二、请求参数分析三、响应分析四、编写爬虫脚本【隧道代理的使用】 〇、引言 无论是学习工作、旅游出行、跨境电商、日常交流以及一些专业领域都离不开翻译工具的支持。本文就带大家通过爬虫的方式开发一款属于自己的翻译工具~ 一、目标 如下的翻译接口…

Spring框架的声明式事务

目录 一.配置文件的方式 1.配置文件 2.业务层 3.持久层 4.测试类 5.运行 6.查看数据库 7.出现异常运行 二.半注解的方式 1.配置文件 2.db.properties 3.持久层 4.业务层 5.测试类 6.运行 7.查看数据库 8.加上异常 三.纯注解的方式 1.持久层 2.业务层 3.配置…

电脑开机显示无信号然后黑屏怎么办?

当我们打开电脑时&#xff0c;遇到电脑屏幕出现了无信号并且黑屏&#xff0c;常常会让我们感到困扰。很多朋友都会遇到显示器无信号的情况&#xff0c;其实这种故障是很好解决的&#xff0c;但是电脑小白&#xff0c;并不知道电脑屏幕显示无信号然后黑屏了要怎么去修复。不用担…

Ubuntu-22.04 虚拟机安装

1. Ubuntu安装方式 1.1. 基于物理介质安装 光盘安装&#xff1a;通过将 Ubuntu 镜像刻录到光盘&#xff0c;在计算机 BIOS/UEFI 中设置光盘为第一启动项&#xff0c;然后按照安装程序的提示进行语言选择、分区、用户信息设置等操作来完成安装。这种方式需要有光盘刻录设备和空…

51c~Pytorch~合集3

我自己的原文哦~ https://blog.51cto.com/whaosoft/12320861 一、pytorch开发基础相关 首先 PyTorch 的安装可以根据官方文档进行操作&#xff1a;&#xff08;根据自己cuda版本不同 安装版本也不太一样啊 自己注意&#xff09; ​​https://pytorch.org/​​ pip install…

vue3.5+版本 defineProps响应式解构,保留数据响应式

正确写法&#xff1a;直接通过 defineProps 结构可以保留响应式 let {num:numNew} defineProps({num: {} }) console.log(具有响应式,numNew); 错误写法&#xff1a;这样会丢失响应式 const props defineProps({num: {} }) let {num:numNew} props console.log(会丢失响…

讲讲⾼并发的原则?

大家好&#xff0c;我是锋哥。今天分享关于【讲讲⾼并发的原则&#xff1f;】面试题。希望对大家有帮助&#xff1b; 讲讲⾼并发的原则&#xff1f; 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 高并发是指系统在同一时间内能够处理大量请求的能力。要有效地管理…

基于python flask的知乎问答文本分析与情感预测系统

摘要 本项目旨在构建一个基于Python Flask框架的知乎问答文本分析与情感预测系统。该系统的主要功能包括从知乎平台获取问答内容、对文本进行自然语言处理、情感分析以及结果的可视化展示。通过这个系统&#xff0c;用户可以方便地输入特定问题&#xff0c;系统将自动抓取相关…