wangEditor - 富文本编辑器

最新推荐文章于 2024-08-07 15:32:26 发布
最新推荐文章于 2024-08-07 15:32:26 发布
阅读量254 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38822390/article/details/90289639
版权
本文介绍了wangEditor，一个简洁且配置简单的富文本编辑器，适合用于后台编辑文章和图片并展示在前端。它支持IE10+浏览器，并提供了详细的官方文档和源码。使用示例展示了一段前端代码和服务器代码，强调了wangEditor的易用性和高效性，适合快速上手。
摘要由CSDN通过智能技术生成

#####业务需求：

通过后台编辑文章和图片，上传到前端界面，展示新闻消息模块。这个时候，需要一款简洁的编辑器，百度编辑器是最常用的一种，但是功能太过于复杂，而wangEditor - 轻量级web富文本编辑器，配置方便，使用简单。支持 IE10+ 浏览器，值得拥有。

图片.png

wangEditor —— 轻量级 web 富文本编辑器，配置方便，使用简单。支持 IE10+ 浏览器。

####使用示例：
前端代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title><
最低0.47元/天 解锁文章
编程微刊
关注
wangeditor
10-25
使用jsp+servlet实现上传功能，并且解决Tomcat重启后，图片被删除的问题
wangEditor - 轻量级web富文本编辑器（可带图片上传）
祈澈菇凉
07-27 1153
业务需求： 通过后台编辑文章和图片，上传到前端界面，展示新闻消息模块。这个时候，需要一款简洁的编辑器，百度编辑器是最常用的一种，但是功能太过于复杂，而wangEditor - 轻量级web富文本编辑器，配置方便，使用简单。支持 IE10+ 浏览器，值得拥有。 图片.png wangEditor —— 轻量级 web 富文本编辑器，配置方便，使用...
WangEditor自定义新元素，并解决自定义元素中换行无法消除样式的问题
最新发布
weixin_45012973的博客
08-07 1031
基于WangEditor提供的API自定义新元素，并编写插件解决一些问题
wangEditor-基于javascript和css开发的 Web富文本编辑器， 轻量、简洁、易用、开源免费(1)...
weixin_34376986的博客
08-18 298
wangEditor-基于javascript和css开发的 Web富文本编辑器， 轻量、简洁、易用、开源免费 wangEditor基本配置 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF...
wangEditor
04-02
很好用的富文本编辑器wangEditor,设置内容、获取内容、上传图片、使用 AMD 加载、使用 textarea、onblur、onfocus、onchange、获取 JSON、配置表情、多语言、CSS-Reset
使用wangEditor实现富文本编辑（后端为Java）
热门推荐
皮蛋瘦肉的博客
05-17 2万+
　　富文本编辑器，Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器，所见即所得的文本编辑器． CSDN的markdown编辑器便是一种富文本编辑器． 　　蓝莓商城商品详情这一部分的编辑需要使用富文本编辑器．本来想使用百度的ueditor的，但是弄了好久依然还是有问题．所以就放弃了．ueditor配置确实比较复杂，官方的文档也没有很好的说清楚，错误提示不够明了，出错时未提...
wangeditor-antd:基于ant-design风格重构的wangeditor富文本编辑器
05-01
基于ant-design风格重构的wangeditor富文本编辑器,主要趋于样式重构，javascript部分未修改。 更新日志 计划跟新适配Vue3 风格统一为 ant-design-vue 2.0风格 修改部分说明 重构图标 重构下拉样式 重构input输入框 ...
wangEditor-editor-code:wangEditor富文本编辑器源代码编辑插件
03-23
wangEditor是一款广受欢迎的开源富文本编辑器，其设计简洁、功能强大，适用于网页和Web应用中的文本编辑场景。"wangEditor-editor-code"是该编辑器的一个特定插件，主要功能是提供源代码编辑的支持。这个插件允许...
wangEditor-plugin:富文本编辑器wangEditor【全屏】【源码】插件
03-23
富文本编辑器wangEditor【全屏】【源码】插件 使用方法： 依赖jquery，须先约会jquery ♡wangEditor-plugin.css和wangEditor-plugin.js两个文件 在wangEditor的create方法调用后，再调用插件的初始化方法，如： var...
HTML前端wangEditor富文本编辑器demo（jQuery）
02-14
wangEditor就是这样一个强大的富文本编辑器，它专为JavaScript和jQuery设计，同时也能很好地融入Vue等现代前端框架。本示例是一个基于jQuery的wangEditor应用，具有丰富的功能，包括图片可拖拽调整大小，以及方便地...
wangEditor-轻量级web富文本编辑器-兼容pc 移动等多平台
01-10
量级 web 富文本编辑器，配置方便，使用简单。支持 IE10+ 浏览器。
wangEditor 编辑器
05-08
wangEditor —— 轻量级 web 富文本编辑器，配置方便，使用简单。支持 IE10+ 浏览器。
wangEditor编辑器
02-20
基于javascript和css开发的 Web富文本编辑器， 轻量、简洁、易用、开源免费 与国产编辑器 百度ueditor 和 kindeditor 相比，它轻量、易用、UI设计精致漂亮。 与国外编辑器 bootstrap-wysiwyg 和 simditor 相比，它文档易读、交流方便，更接地气。 它还会根据使用者的反馈不断完善，未来将支持移动版。
html网页富文本编辑器插件wangEditor富文本编辑器下载
11-02
html网页富文本编辑器插件wangEditor富文本编辑器下载
wangEditor V4
01-11
wangEditor V4版本JS文件，可以复制到项目中引用。
vue 富文本编辑器使用quill（可上传图片）
Min_nna的博客
04-08 198
//命令（下载依赖） npm install vue-quill-editor -–save npm install quill --save //页面 <quill-editor ref="text" v-model="dataForm.content" class="myQuillEditor" :options="editorOption"/> //引入 import Quill from "quill"; import { quillEditor } from "vue-quil
edit(带图片上传)富文本编辑器
cwhatiscs的专栏
04-29 462
插件描述：由trumbowyg改编的edit插件，首先是中文版，其次增加了图片更改大小等一系列优化，十分方便 加载样式以及js 1 2 3 4 <scriptsrc="assets/jquery.min.js"></script> <scriptsrc="assets/trumbowyg....
wangeditor — 轻量级富文本编辑器
leyu_miss的博客
09-28 623
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码
springboot整合wangEditor富文本编辑器
05-23
要在Spring Boot中整合WangEditor富文本编辑器，可以按照以下步骤进行操作： 1. 在pom.xml文件中添加以下依赖： ```xml <!--wangEditor富文本编辑器--> <dependency> <groupId>com.github.wangfengtao</groupId> <artifactId>wangeditor-spring-boot-starter</artifactId> <version>1.4.4</version> </dependency> ``` 2. 创建一个Controller，并添加一个返回WangEditor的接口： ```java @RestController @RequestMapping("/editor") public class EditorController { @GetMapping("/wangeditor") public ModelAndView wangeditor() { return new ModelAndView("editor"); } } ``` 其中，`editor`是一个HTML模板文件，用于展示WangEditor富文本编辑器。 3. 在`resources/templates`目录下创建`editor.html`文件，代码如下： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>WangEditor富文本编辑器</title> <!-- 引入wangEditor的CSS文件 --> <link rel="stylesheet" type="text/css" href="/webjars/wangeditor/4.5.1/css/wangEditor.min.css"/> </head> <body> <textarea id="editor" name="content"></textarea> <!-- 引入wangEditor的JS文件 --> <script type="text/javascript" src="/webjars/wangeditor/4.5.1/js/wangEditor.min.js"></script> <script type="text/javascript"> // 创建富文本编辑器 var editor = new wangEditor('#editor'); editor.create(); </script> </body> </html> ``` 4. 启动应用程序，并在浏览器中访问`http://localhost:8080/editor/wangeditor`，即可看到WangEditor富文本编辑器。 以上就是在Spring Boot中整合WangEditor富文本编辑器的步骤。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值