富文本编辑器——wangeditor使用

最新推荐文章于 2025-06-18 15:15:22 发布
原创 最新推荐文章于 2025-06-18 15:15:22 发布 · 1.8k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

在项目中替换表单为富文本编辑器，初学者选择了wangeditor。本文详述从下载到页面引用，再到实例化和表单集成的全过程，并提供jsp后台方法示例。注意样式冲突时可通过搜索解决。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

最近在该系统bug，用户希望把一个表单换成富文本编辑器，奈何自己是小白，第一次上手，所以做起来有点困难，一开始使用百度的ueditor，但是，保存的时候一直提示file is not present，在网上找方法也解决不了，后来放弃了，选择wangeditor,

下面是步骤：

1、下载 

官网：wangEditor.github.io；

2、把下载的压缩包放在项目的static下面：


3、就是页面使用了

①、首先引入css和js文件：

最低0.47元/天 解锁文章

200万优质内容无限畅学
富文本编辑器wangeditor的使用方法
小柠檬爱编程
05-25 889
附上富文本文档：https://www.kancloud.cn/wangfupeng/wangeditor3/335774 首先引入富文本： import E from "wangeditor"; js mounted() { var editor = new E(this.$refs.editor); editor.customConfig.onchange = html => { this.ruleForm.intro = html; }; edit
vue 富文本编辑器 —— wangEditor
且听风吟的博客
08-26 2336
富文本编辑器wangEditor百度UEditorbootstrap-wysiwygckeditor ckeditorKindeditorTinymcevue-quill-editor 很多项目中都需要用到富文本编辑器，目前也有很多种类的富文本编辑器。我就查了一下资料，了解了一些目前常用的富文本编辑器 wangEditor http://www.wangeditor.com/index.html 国产，基于javascript和css开发的web富文本编辑器，开源免费，上传图片可以控制尺寸。重点在于它轻量，
wangEditor 富文本详解
weixin_64684095的博客
05-07 5985
可自定义编辑器、工具栏的尺寸、边框、z-index 等样式。<template>-- 边框 -->-- 工具栏 -->-- 编译器 --></div></style>如果想要“全屏”功能，则要求工具栏、编辑器 DOM 节点必须是同一层级，同时父级盒子设置 z-index: 999。<template>-- 工具栏 -->-- 编译器 --><Editor /></div></style>如果服务端的返回体，不满足所需格式，可以使用自定义插入。// res 即服务端的返回结果。
vue3引入wangeditor编辑器，只需两步
最新发布
2401_89067148的博客
06-18 535
富文本编辑器主要用于论坛、博客等场景中，用来实现更加丰富的图文展示效果。本文章使用Vue2、Vue3和WangEditor实现这一功能。更多详细配置可到WangEditor官网进行查看。
wangeditor的使用
smallico的博客
11-30 237
1.安装 npm install --save wangeditor 2.页面中使用 <template> <div id="wangeditor"> <div ref="editorElem" style="text-align:left;"></div> </div> </template> <sc...
富文本编辑器wangEditor的使用（即学即用）
热门推荐
kid00712138的博客
01-14 1万+
富文本编辑器wangEditor
vue3项目中使用富文本框——wangeditor
Yugoup的博客
02-02 716
wangeditor的使用
打造Flutter高性能富文本编辑器——协议篇
闲鱼技术的博客
05-18 2807
闲鱼作为一个二手闲置交易平台，卖家发布商品产出优质的供给尤为重要；商品发布器希望拥有富文本编辑能力，让用户简单便捷的方式产出更加优质的内容；Flutter本身没有富文本编辑器的能力的，只有最基础的文本编辑器TextField；对于更加复杂的场景，比如支持自定义表情、主题、有序段落等能力，目前flutter组件是无法满足我们的业务诉求，另外在交互体验上与Native仍然存在...
富文本编辑器组件——设计新闻管理功能
欢迎来到我的博客
08-05 648
在开发新闻管理功能时，需要创建一个新闻管理页面、配置路由，以及在新闻管理界面中使用 WangEditor 进行富文本编辑。下面是具体的步骤和代码示例。
wangEditor基本使用
dxl的博客
08-11 616
wangEditor基本使用与上传图片
wangEditor使用手册
07-04
wangEditor使用手册，挺好用的一款富文本编辑器，自己用了
wangEditor各种使用实例
01-22
wangEditor的各种实例，包含本地、网络上传；菜单改变等各功能。
富文本编辑器~wangEditor
红尘炼炼心的博客
03-13 515
百度编辑器操作相对复杂，其他编辑器功能不够齐全，多次使用发现还是wangEditor编辑器简单易用，功能也比较合适。
wangeditor -- 富文本编辑工具
i_Satan的博客
04-05 3234
在线文档 https://www.wangeditor.com/doc/ 参考文章 感谢@Yan_an_n 这个作者 安装 npm install wangeditor 使用 注意:尽量将实例的创建和挂载放在 mounted 生命周期中; 该报错说明,实例需要挂载的dom元素还没有生成; //方式一: 使用id命名容器 <div id="editor"></div> //方式二:获取dom元素 <div ref="editor">&l
wangEditor富文本编辑器的使用（一）——基本介绍
weixin_44867717的博客
10-21 1314
wangEditor富文本编辑器的使用（一）——基本介绍 1、介绍 wangEditor-Typescript 开发的 Web 富文本编辑器。 兼容常见的 PC 浏览器：Chrome，Firefox，Safar，Edge，QQ 浏览器，IE11。 不支持移动端。 官网 http://www.wangeditor.com/ V4 文档 http://www.wangeditor.com/doc/ 源码 https://github.com/wangeditor-team/wangEditor 2、使用手册
富文本编辑器wangEditor的基本使用
weixin_47683973的博客
10-11 2015
这里面我是没有全局注入，因为富文本编辑器用的地方也不多，没必要全局注入，有需要的便宜也可以自行封装，上面是简单的封装标题的一些小功能，这里面Boot.registerMenu(insertField1Conf)是单独引入，官网上面也有多个引入的方法，可以去官网直接cv,然后效果图如下。，如果要更深层的去使用，可以去看里面的高级功能，好的。不多说了，开始使用，项目还是老套的vue2,先去使用npm去下载编辑器。官网上面是有教怎么使用的，如果用的是js就是我写的这种，ts的话官网也有，记得看清楚，否则会报错。
vue wangeditor 富文本编辑器的使用
细节怪的博客
02-17 7392
文章编辑，内容中可配置图片、视频上传、文章标题与内容分离；首行缩进2个字符；
wangEditor-next 使用教程
gitblog_00021的博客
04-10 835
wangEditor-next 使用教程 1. 项目介绍 wangEditor-next 是一款基于 slate.js 的开源富文本编辑器，支持 Vue2、Vue3、React 等前端框架。它具有简单易用、高度可定制、轻量级等特点，是开发富文本编辑功能的首选工具。 2. 项目快速启动 以下是基于 Vue3 的快速启动步骤： 首先，通过 npm 安装编辑器： npm install @wangedi...
微信小程序富文本编辑器应用详解
通过上述知识点的学习，我们可以了解到微信小程序富文本编辑器的开发涉及了微信小程序基础、富文本编辑器的基本概念、第三方库的使用、实现方法及技术细节，以及对特定开源项目的源代码分析。这些内容涵盖了从基本的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值