一个小问题：使用wangEditor富编辑器报错The given range isn't in document.

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

本文讲解了如何确保JavaScript代码在DOM完全加载后再执行。通过使用window.onload方法，可以避免因DOM未准备好而导致的问题。

没有DOM Ready 当然不在文档中。要先添加下面这句话。

把代码放到window.onload = function(){}之中。

Haloby
关注
vue项目中使用富文本wangEditor插件 出现的 The given range isn‘t in document错误
kinjoe_whan的博客
04-08 1899
背景 近期做的后台管理系统，需要有一个富文本编辑器来录入一些API文档的功能。调研时，用UEditor，去github直接下资源包，然后引入到项目中。然而由于项目是一个vue项目，UEditor的实现有些似乎类型JQuery的使用，引入项目中一直各种报错。想着技术都比较旧，后期用富文本的功能报错也不好处理，最后弃了。然后用了vue2-editor，实现简单，初始首版就用vue2-editor去实现了。后来，需求要求要插入表格功能，vue2-editor不支持插入表格功能。自定义扩展，也不好扩展。去npm也查
wangEditor富文本编辑器addRange(): The given range isn‘t in document解决方法
分享Java，vue学学习笔记
01-17 2716
富文本报错addRange(): The given range isn't in document解决方法
[前端] 页面新增 wangEditor 出现的 The given range isn‘t in document.
qq_28033719的博客
10-22 1947
问题： 使用 AngularJS 的时候，我在页面弄一个按钮可以新增 wangEditor 富文本，但是点了新增之后发现控制台出现：The given range isn't in document. 警告，其实这个警告问题还是很严重的，因为我页面上新增多个富文本时候，只有最新一个富文本的控件有效，而其他富文本都失效了，并且我使用 wangEditor.txt.html(); 获取文本时候，发现除了最新一个可以修噶，其他都不能修改，所以追踪 html() 看了看源码： 从 txt 原型进去： .
Vue WangEditor 报错 The given range isn‘t in document
深度
04-18 607
首先我在el-dialog中实例化编辑器对象, 发现不能出现编辑器! 起初怀疑元素加载时间问题 然后, 将div定义放在了最外层中, 在实例化就出现了, 顺序问题无疑 然后我将editor封装为了组件, 外层使用引用组件的方式就可以了! 完美实现.... ...
quill editor:The given range isn‘t in document
Dragon1993vsLong的博客
04-21 1882
公司网站使用的是 .NET Razor + 渐进式 Vue 的方式编写的。 在一个发帖子的页面 quill 的区域包含在了 Vue 组件中。 在 vue 的 created 函数中获取不到 quill 的根节点 在 vue 的 created 函数 new Quill （）出现找不到 container(容器)的错误。 而在vue 组件外部创建 new Quill() 成功后，插入内如会出现，quill 不在文档中的错误，因为 qill 容器在 Vue 组件中 quill.js:
The given range isn't in document.在react中使用quilljs中的自定义toolbar时，会有这个报错，如何解决
10-09
在React中使用Quill.js构建富文本编辑器时，遇到"The given range isn't in document"这样的错误通常是因为你在尝试操作文档内容的范围超出了实际的编辑区域。这可能有以下几个原因： 1. **初始化问题**：确保Quill...
Reac16+Monaco打造代码编辑器（前端部分）
热门推荐
qq_41100991的博客
10-24 5万+
效果图 实现 这里小编只讲编辑器的主体部分，及两个选择框以及编辑器部分。 首先是选择器，毕竟主体的编辑器需要通过选择器来改变样式以及提供语言高亮等支持 SelectBox.js import React from 'react'; import { Select } from 'element-react'; import { Layout } from 'element-react'; im...
25、优化iOS应用：多媒体、位置附件与链接处理
最新发布
websocket5live的博客
11-17 10
本文详细介绍了如何在iOS应用中实现多媒体、位置附件及优化链接处理功能。通过设置AVAudioSession启用画中画模式，利用Core Location和MapKit框架获取并展示用户位置，并将位置信息以JSON格式保存为附件；同时通过SFSafariViewController拦截链接并在应用内打开，提升用户体验。文章还提供了完整的代码示例、流程图与优化建议，涵盖权限配置、视图控制器创建、地图注解显示等关键步骤，最后提出了性能与功能扩展的未来方向。
The given range isn‘t in document.
小码蚁
03-12 947
问题：WangEditor在vue中使用，样式都正常显示，但是功能不能点击，查看控制台js显示The given range isn't in document，这是因为模板渲染导致的。 解决： mounted : function(){ let E = window.wangEditor; let wang = new E('#div-editor'); wang.config.uploadImgShowBase64 = t.
Vue2嵌入Ueditor富文本编辑器后，操作出现The given range isn't in document.报错问题解决！
uduemc的专栏
01-31 7828
也是有段时间没写写东西了，一直都在潜心专研产品。不过最近在开发一个项目的时候遇到了部分问题，总结下希望能够帮助采坑人！ 开发基本情况！ Spring Cloud + Vue2 前后台分离 组件的形式插入百度富文本组件，图片上传、获取图片列表等所有与后台交互的动作后台重写，富文本js脚本部分修改！ 在此过程中还算顺利，但今天遇到一个有关 range 的问题！ 本身对前端的东西掌握一般所以也...
react使用wangeditor遇到的小问题(js编码解码，The given range isn‘t in document.)
lanseguhui的博客
04-21 566
1.图片编码采用base64不需要上传图片接口 直接传递字符串 editor.config.uploadImgShowBase64 = true 传递的时候需要编码解码一下 var escape1 =escape("我的名字是：yr~");//编码 var unescape1 = unescape(escape1); //解码 2.The given range isn't in document. 这个问题表示你创建的那个编辑器不在文档中，就是说在创建富文本编辑器的时候，装他的容器.
wangEditor 出现The given range isn‘t in document.
chongyang_的博客
11-18 1079
The given range isn't in document 主要需要添加 this.$nextTick(() => {}，用于防止弹窗时 editor 绑定的div还未创建导致的错误 重复创建editor会出现错误，所以新建富文本编辑器的时候先用 editor.destroy() 销毁已经创建完的editor。 createEdit() { editor = new E('#div1') // 配置 server 接口地址 editor.confi
在vue中使用wangeditor编辑器，单独写成组件全局注册，在其他组件中使用富文本编辑器的时候报错The given range isn't in document.
Sunny_lxm的博客
01-04 4882
求助： 在全局已经注册了 在某一个组件中使用后就报错了 这是因为在使用编辑器是时候，装他的body没有加载完成。 第一种解决方法： 网上给出的 window.load = function(){} 确实可以解决此问题 但是我用这个方法好像并没有解决这个报错 我在获取到数据后使用了一个延迟函数 setTimeout(()=>{ this.get...
wangEditor富文本报The given range isn‘t in document
shihezhengshz的博客
04-29 288
简单来说，来不及渲染→_→，网上解决方案挺多的 先说一下我的问题情境吧：vue组件中的element控件el-dialog打开后富文本无法渲染成功 解决方案： 其他情境解决方案之一： window.onload = function(){ 在这里进行富文本的创建 } ...
Vue3+wangEditor富文本组件报错无效节点
weixin_64863035的博客
04-05 1019
所以建议大家如果代码绝对没问题的情况下，碰到这个问题，可以卸载重装这个版本（全文其他都是废话）
富文本编辑器开发系列4——Range对象
林中路
12-10 908
文章目录Range对象简介原生 API说明`Ragne`对象原生 `API` ——`IE9`以上及其它内核浏览器`how``TextRange` 原生 `API`——`IE9`以下浏览器 Range对象简介 Range, 直译为“范围”，俗称“拖蓝”，顾名思义，就是浏览器中使用鼠标拖拽选中的部分，通常会显示为蓝色背景，故称“拖蓝”。 但“拖蓝”表示的并不是选中的文字内容，而是选中文字部分的HTML源代码，它的开始节点和结束节点都是HTML元素对象。 还有一种特殊的拖蓝，即闭合的拖蓝，即它的开始节点和结束节点
使用 wangeditor 时报错 Cannot read properties of null 和Cannot find a descendant at path [2] in node的问题
youyudehan的博客
02-27 2548
使用 wangeditor 时报错 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'emitsOptions') 和 Uncaught (in promise) Error: Cannot find a descendant at path [2] in node: {"children":[{"type":"paragraph","children":问题
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值