vue中正确使用富文本编辑器wangeditor和使用wangeditor遇到的坑

最新推荐文章于 2024-09-18 14:11:57 发布
最新推荐文章于 2024-09-18 14:11:57 发布
阅读量3.7k 收藏 2
点赞数 1
分类专栏： vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chengxue_123/article/details/109430849
版权
本文介绍了在Vue项目中集成富文本编辑器wangeditor的步骤，包括npm安装、组件引用以及遇到的报错问题。通过浏览器调试找到解决层级和内容获取的方法，重点在于利用editor.config.onchange和editor.zIndex.baseZIndex来获取内容和调整层级。当遇到取值问题时，建议通过console.log进行排查。
摘要由CSDN通过智能技术生成

地址:http://www.wangeditor.com/,

gitHub:https://github.com/wangfupeng1988/wangEditor/blob/master/example/demo/in-vue/src/components/Editor.vue

1）首先终端中安装 npm i wangeditor

   <div ref="editor" style="text-align: left" class="text"></div>

2) 引入富文本编辑器 import E from "wangeditor"

3）以前的时候这样用时不会报错，现在确不行了，怀疑时wangeditor更新改版了，下的包有些内容不一样，造成下面这个错

  

  4）改变层级的话，我在游览器中调试  ，可以用css改变

  

//
最低0.47元/天 解锁文章
富文本编辑器——wangeditor使用
有个派大星的博客
07-11 1813
最近在该系统bug，用户希望把一个表单换成富文本编辑器，奈何自己是小白，第一次上手，所以做起来有点困难，一开始使用百度的ueditor，但是，保存的时候一直提示file is not present，在网上找方法也解决不了，后来放弃了，选择wangeditor,下面是步骤：1、下载 官网：wangEditor.github.io；2、把下载的压缩包放在项目的static下面：3、就是页面使用了①、...
vue+wangeditor动态添加/删除富文本功能实现及问题解决
小男哥的博客
10-15 4413
vue+wangeditor动态添加/删除富文本功能实现及问题解决 前言： wangeditor是一个很好用的前端富文本编辑器，其功能强大，简单易上手让我这种前端小白简直爱不释手，然鹅在强大的工具或多或少都会有点小问题。今天就跟大家讲一下我在动态表单中使用它出现的问题以及最终的解决方法，有更好解决方法的大佬，欢迎不吝赐教。 说明：本次案例使用的是wangeditor V3，不同版本请自行参考其官网使用文档 V3官网基本用法说明： 1，安装：npm i wangeditor@3.1.1 ； 2，var E
Wangeditor自定义格式刷功能
最新发布
Circle666的博客
09-18 199
vue中使用wangeditor5，需要新增格式刷，网上查了很多资料再结合官网，终于搞定了，哈。下面两块代码是新建一个js文件；
Vue+wangEditor正文内容不能设置样式
real_xiaobai的博客
09-24 1258
一、问题 二、做法 wangEditor基础使用文档指路 1、错误使用 <script> const E = window.wangEditor const editor = new E(document.getElementById('div1')) editor.create(); new Vue({ el:"#app", data() { return {} }, methods:
vue使用富文本编辑器 Wangeditor 可显示编辑新增回显禁用
qq_44146522的博客
07-07 2503
vue使用富文本编辑器 Wangeditor 可显示编辑新增回显禁用
ueditor插入视频的时候。在预览的窗口提示 “输入的视频地址有误，请检查后再试！”
肖肖肖丽珠的博客
07-19 3822
ueditor.all.js： 搜索me.commands["insertvideo"] 把html.push(creatInsertStr( vi.url, vi.width || 420, vi.height || 280, id + i, null, cl, 'image')); 改成html.push(creatInsertStr( vi.url, vi.width ||...
vue使用wangeditor富文本编辑器，以及问题归纳
qq_28353055的博客
12-10 2133
官网请移步：http://www.wangeditor.com/ 1.添加 // 安装 npm install wangeditor -s 2.简单使用 封装： // 引入wangeditor以及样式 import Editor from 'wangeditor' import 'wangeditor/release/wangEditor.min.css' export default { ...
在vue3中使用富文本编辑器WangEditor
qq_70703397的博客
02-25 291
在vue3中使用富文本编辑器WangEditor
轻量级富文本编辑器wangEditor结合vue使用方法示例
10-17
本文主要介绍如何在Vue.js项目中集成轻量级富文本编辑器wangEditor，提供一种实用的实现方式。 首先，安装wangEditor可以通过npm包管理器进行，输入以下命令： ```bash npm install wangeditor ``` 安装完成后，...
vue 使用 wangeditor 富文本编辑器
且听风吟的博客
02-01 2351
vue 使用 wangeditor 富文本编辑器
Vue中wangeditor工具栏失效问题
程序员大阳
05-13 7207
莫名其妙，Vue项目中，wangeditor部分工具栏失效了。 点了之后也不报错，但是毫无反应，去官网和百度查了半天，无后果。 最后找了半天，发现是调整了wangeditor默认样式导致的，尝试许久，最后以下样式可以不影响工具栏使用。 <style> .w-e-toolbar { z-index: 2!important; } .w-e-menu { z-index: 2 !important; } .w-e-text-container { z-index: 1 !importan
vue使用富文本编辑器Wangeditor初次加载获取不到editor对象，导致无法设置回显内容
weixin_43485503的博客
08-02 4254
富文本编辑器Wangeditor初次加载获取不到editor对象
wangEditor粘贴word样式解决方案
xiaowochaochao的博客
04-14 2688
wangEditor在普通输入时是没问题的，但是复制word内容之后会将word的样式一并粘贴过去，获取内容会出现[if gte mso 9]等字样，以至于展示的时候出现js语法错误，基本上解决方案有两种 关闭粘贴样式的过滤 当从其他网页复制文本内容粘贴到编辑器中，编辑器会默认过滤掉复制文本中自带的样式，目的是让粘贴后的文本变得更加简洁和轻量。用户可通过editor.customConfig.pasteFilterStyle = false手动关闭掉粘贴样式的过滤。 // 关闭粘贴样..
解决富文本编辑器（wangeditor）在vue项目中不能双向数据绑定（v-model）的问题
weixin_46475440的博客
05-21 5293
将富文本编辑器封装成一个组件 首先要明白一个原理，vue中的v-model指令（双向数据绑定）其实这是一种语法糖，它只是给其绑定节点添加了一个input事件，并且给他添加了一个value属性，数值发生变化，他会更新data中的数据，在更新节点的value，从而实现双向数据绑定。 /src/component/Editor/index.vue 组件代码 <template> <div> <div id="seditor" ref="seditor" @input="c
vue中修改第三方组件的样式不生效
qq_27009517的博客
11-16 3680
问题 在使用element-ui时，有时候想要修改组件内的样式，但不成功，例如 <div class="test"> <el-button>按钮</el-button> </div> <style lang="less" scoped> .test{ .el-button span{ background:red; } } </style> 以上对.el-button span的样式不生效 问题
关于在vue项目使用wangEditor4.0富文本插件字体配置后失效问题
qq_39072735的博客
09-17 1310
因为在wangEditor富文本里选择字体后，都会插入一个face的属性，并带上你所选的字体名称（细心的伙伴在F12选中对应的元素也会发现这点），所以利用这个css选择器的方法就可以把没生效的字体给呈现出来。当然，也有其他的一些伙伴会出现字体加粗、斜体等等没生效的问题，这种一般都是权重有关，单独在css里设置就好；之前百度过很多方法都没办法解决，最后想出了个方法，就是利用css选择器的方法把问题解决；
vue中富文本样式设置不生效解决方案
Beamon__的博客
07-30 5515
问题描述：在vue中通过v-html回显富文本内容，遇到了设置富文本样式不生效问题； 原因：<style>标签添加了scoped属性； 解决方案：1. 去掉<style>标签的scoped属性；2.使用 /deep/深度作用选择器 (案例如下)； 案例代码： html： <div class="fwb" v-html="htmlVal"> &...
wangEditor添加视频后无法
04-25 669
wangEditor再次编辑视频时，编辑器加载不了
引入wangEditor时工具栏部分无效问题
gz-郭小敏的博客
10-16 7385
为自己项目引入vue后，原来没有任何问题的wangEditor组件的工具栏突然不能用了。 然后发现用这篇博客中的方法可以解决：引入wangEditor或ueditor时工具栏部分无效问题 //初始化编辑器 function _initEditor() { let E = window.wangEditor; let domName = "#input-area__textarea...
vue富文本编辑器wangeditor使用
07-28
WangEditor 是一款基于 Vue.js 的富文本编辑器，它提供了丰富的功能和良好的用户体验。下面是使用 WangEditor 的基本步骤： 1. 安装 WangEditor：你可以通过 npm 或者 yarn 来安装 WangEditor。在项目的根目录下...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值