关于vue2+vite+wujie使用wangeditor异常问题解决方案

xhYuTian

已于 2023-08-10 15:41:04 修改

阅读量562

点赞数

文章标签： vue.js

于 2023-08-04 16:48:14 首次发布

本文链接：https://blog.csdn.net/xhYuTian/article/details/132108011

版权

在主应用根目录的index.html中以链接的方式引入依赖

    <link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet">
    <script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>

页面代码中使用const { createEditor, createToolbar } = window.wangEditor拿到组件后创建富文本编辑器
具体代码参考：快速开始 | wangEditor

创建后除了图片不能拖拽问题之外目前还未发现任何问题

如果在子应用中注册，会导致页面切换后，富文本聚焦时工具栏依然是禁用状态，目前还未解决，如有解决方案请告知，因为找了好几天的原因为了防止各位调入坑中，在此提出解决方案

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

xhYuTian

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

引入wangEditor或ueditor时工具栏部分无效问题

哎呦叔叔的博客

09-18

6247

今天在引入富文本插件时当插件引入进来后部分功能失效，分别换了wangEditor和ueditor也没解决问题。最终查到的问题出在VUE与插件加载顺序不对导致的解决办法：将初始化代码放到vue的mounted函数里面 var editor ; mounted:function(){//插件使用的wangEditor，简单美观 var E = window.wangE...

【解决windows系统下 git 里使用vue cli 创建项目上下箭头无效的三种解决方法】

m0_65450343的博客

07-11

1144

关于windows 使用 Git Bash 上下箭头不生效有三种解决方法：① 使用数字键盘进行选择对应的选项值：你这里可以输入数字 2 ，然后回车，表示你要选择第 2 个。当然这不是我们最好的处理方式，如果好几个选项每次都要去数一下想要选择的为第几个不是很苦逼…② 使用命令行或者直接更改bash.bashrc第一种：使用命令行的方式创建项目工程，如：之前你使用vue create hello-world 现在应该改成输入 winpty vue.cmd create hello-world，这样你的上下键就

1 条评论您还未登录，请先登录后发表或查看评论

引入wangEditor时工具栏部分无效问题

gz-郭小敏的博客

10-16

7282

为自己项目引入vue后，原来没有任何问题的wangEditor组件的工具栏突然不能用了。然后发现用这篇博客中的方法可以解决：引入wangEditor或ueditor时工具栏部分无效问题 //初始化编辑器 function _initEditor() { let E = window.wangEditor; let domName = "#input-area__textarea...

无法找到模块“@wangeditor/editor-for-vue”的声明文件

最新发布

w1314_1314的博客

07-10

651

vue3项目中使用wangeditor/editor遇到的问题开发环境不管红线报错正常使用打包的时候就会报错了。

Vue中wangeditor工具栏失效问题

程序员大阳

05-13

7103

莫名其妙，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编辑器，单独写成组件全局注册，在其他组件中使用富文本编辑器的时候报错The given range isn't in document.

Sunny_lxm的博客

01-04

4810

求助：在全局已经注册了在某一个组件中使用后就报错了这是因为在使用编辑器是时候，装他的body没有加载完成。第一种解决方法：网上给出的 window.load = function(){} 确实可以解决此问题但是我用这个方法好像并没有解决这个报错我在获取到数据后使用了一个延迟函数 setTimeout(()=>{ this.get...

vue2+element-ui项目卡死

weixin_43403124的博客

08-13

2130

vue2+element-ui项目，项目npm run dev成功运行到浏览器后，点击项目左侧菜单1，页面加载失败，且’卡死’(在浏览器中左侧菜单1对应页面无法使用’Ctrl+w’关闭)，但只要点击除菜单1以外的左侧菜单，均可正常展示，尝试重装开发工具webstorm/拉取Git上最新分支，均出现所述bug，后来将项目依赖包卸载重装后，上述’莫名其妙的’bug修复 ...

vue2.0中引入wangEditor2 步骤与坑

weixin_33670786的博客

11-07

2417

安装：官方给出了如下安装方式点击 https://github.com/wangfupeng1988/wangEditor/releases 下载最新版使用git下载： git clone https://github.com/wangfupeng1988/wangEditor.git 使用npm安装: npm install wangeditor （...

无界微前端实践(vue3+vite+vue2+webpack)

10-24

其中主应用使用了vue3+vite，子应用使用了vue2+webpack。页面简洁明朗，学习成本低。搭配本人关于无界微前端的博客使用更佳。博客地址：https://blog.csdn.net/bDreamer/article/details/127103459 适合人群：需要...

vue打包静态资源路径不正确的解决方案

xiechengjian的博客

03-21

6471

vue打包静态资源路径不正确的解决办法vue项目完成打包上线的时候很多人都会碰到静态资源找不到的问题，常见的有两个1、js，css路径不对解决办法：打开config/index.js，将其中的assetsPublicPath值改为’./’2、css中引用的图片资源找不到我的login.vue文件中通过src方式引入css<style scoped src="../../static/css/...

wujie微前端接入笔记

weixin_39818813的博客

04-19

1123

微前端是一种软件架构模式，旨在将前端应用程序拆分为更小、更独立的部分，这些部分可以独立开发、部署和维护。每个微前端部分代表着一个小型的前端应用，可以由不同的团队独立开发，并且可以独立部署到生产环境中。这种模式使得团队可以更灵活地构建和扩展前端应用，同时降低了应用的复杂性和维护成本。通过微前端，不同团队可以在不同的技术栈下开发各自的前端功能，并将它们组合成一个完整的前端应用。

vue 项目优雅的对 url 参数加密

tenyuanruby的博客

12-21

3536

近期因为公司内部的安全检查，说我们现在的系统中参数是明文的，包括给后端请求的参数和前端页面跳转携带的参数，因为是公司内部使用的系统，在安全性方面的设计考虑确实不够充分。两个方法的实现原理，可以看到源码中对于参数的加密解密考虑的处理是更多的，其实也可以把两个方法的源码拷贝出来，加上加密、解密的方法然后覆盖源码即可。对于参数的加密和解密很好实现，直接采用常用的 AES 算法，前后端定义好通用的密钥和加解密方式就好，前端加解密这里主要使用到。现在最终的解决方案就很明确了，自定义两个参数加密、解密的方法，然后在。

Vue WangEditor 报错 The given range isn‘t in document

qq_41684130的博客

10-13

328

其中：visible.sync=“dialogVisible” 是问题出现的关键。我是使用的element ui中的el-dialog来装的富文本器。简单来说就是：还没来得及渲染。

wangeditor 取消自动获取焦点

weixin_43452467的博客

01-18

1529

使用wangeditor 富文本编辑器的时候，输入内容会被聚焦到页面wangeditor 便签中在node_module 中找到wangeditor/release/wangeditor.js 或 wangeditor/dist/wangeditor.js 将以下代码注释掉， this.selection.createRangeByElem($last, false, true); this.selection.restoreSelection(); ...

vue2项目使用wangEditor富文本插件

shehuirencxz的博客

07-04

2856

readOnly（只读属性，因为项目中涉及富文本的展示，这时是只读状态）autoFocus（取消自动聚焦，因为富文本编辑器默认会自动聚焦）获取富文本编辑器中的内容：editor.getHtml()清空富文本编辑器中的内容：editor.clear()

解决编辑框移动端不能获取焦点的问题 --- 针对 wangeditor 编辑器

overflow_mo的博客

04-18

2053

解决编辑框移动端不能获取焦点的问题 FastClick.prototype.needsClick = function (target) { if (target.className.indexOf('w-e') !== -1) { return true } if (target.parentElement) { return this.needsClick(targe...

引入wangeditor 报错 error in ./node_modules/@wangeditor/editor/dist/index.esm.js

凡尘

08-26

5475

error in ./node_modules/@wangeditor/editor/dist/index.esm.js

wangeditor渲染不出来，报错xxx of undefined

qq_39905409的博客

11-25

2656

原配置： var editor = new E('#div') editor.customConfig.uploadImgShowBase64 = true // 使用 base64 保存图片 editor.create() 改为： var editor = new E('#div') // 兼容老版本 let config = editor.customConfig ? editor.customConfig : editor.confg; config .uploadImgShowBas

vue wangEditor富文本表格(查看表格/序列样式缺失)问题

weixin_47239395的博客

12-28

5359

啰啰嗦嗦的序言(可看可不看): 先说下我的需求,富文本中新增一个表格需求,富文本已实现(增删查改),表格新增要一起同步这四个场景, 开始我用的vue-quill-editor,结果发现坑太多,我查看的时候没法把拿到的数据丢到quill里面去修改,只能v-html展示,还有缓存以及验证的一些问题,只是想在富文本加个表格,发现用vue-quill-editor要改的地方太多,果断弃坑了,网上找了下发现wangEditor貌似不错,还有团队在维护, 兼容: 支持Vue、React、Angular等框

vue3+vite3+typescript使用wangEditor编辑器

05-17

可以使用以下步骤在 Vue3 + Vite3 + Typescript 中使用 WangEditor 编辑器： 1. 安装 WangEditor。可以使用 npm 或 yarn 安装。 ```bash npm install wangeditor --save # 或者 yarn add wangeditor ``` 2. 在 `main.ts` 中引入 WangEditor 和 CSS 文件。 ```typescript import WangEditor from 'wangeditor'; import 'wangeditor/release/wangEditor.css'; const app = createApp(App); app.config.globalProperties.$WangEditor = WangEditor; // 挂载编辑器到全局 app.mount('#app'); ``` 3. 在组件中使用 WangEditor。 ```vue <template> <div class="editor-wrapper"> <div ref="editorRef"></div> </div> </template> <script lang="ts"> import { defineComponent, onMounted, ref } from 'vue'; export default defineComponent({ name: 'Editor', setup() { const editorRef = ref<HTMLDivElement>(); onMounted(() => { const editor = new (window as any).$WangEditor(editorRef.value); editor.create(); }); return { editorRef, }; }, }); </script> <style lang="scss"> .editor-wrapper { height: 400px; .w-e-text-container { height: 100%; } } </style> ``` 在 `onMounted` 钩子函数中，使用 `new (window as any).$WangEditor` 来创建编辑器实例，并传入编辑器容器的 DOM 节点。调用 `editor.create()` 方法来创建编辑器。注意：由于 WangEditor 的类型定义文件并不完善，因此可以在 `tsconfig.json` 中添加以下配置来避免类型检查报错。 ```json { "compilerOptions": { "skipLibCheck": true } } ``` 这样，就可以在 Vue3 + Vite3 + Typescript 中使用 WangEditor 编辑器了。