热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

获取iframe内嵌html内容(wangEditor富文本编辑器)

写这篇文章的原因是在未使用vue脚手架的情况下使用vue时,wangEditor不能正常渲染和使用,不能大改的情况下,想到的次级的解决方案1、在未使用vue脚手架的情况下使用vu

写这篇文章的原因是在未使用vue脚手架的情况下使用vue时,wangEditor不能正常渲染和使用,不能大改的情况下,想到的次级的解决方案


1、在未使用vue脚手架的情况下使用vue,且引入wangEditor富文本编辑器


下面图片是正常的显示,我遇到的是鼠标移动到编辑框无反应,不会弹出h1h2h3h4标签,不知道是vue原因还是因为富文本原因导致页面无法渲染


在这里插入图片描述


官方也没给具体解决方案,试过很多方法,最后想到的是将富文本放到一个单页面,因为没有使用脚手架,所有的都是单页面,那就直接iframe引入一个页面不就好了。说干就干


在这里插入图片描述
在这里插入图片描述


这是我的代码,都是html代码,就一个iframe标签,引入富文本单页面edit.html



2、 获取iframe中的标签html内容

//获取iframe标签及里面的内容
var oIframe = document.getElementById("myFrame");//获取iframe里面的#document下的html文档中id为editor的标签
var oBody = oIframe.contentWindow.document.getElementById('editor')//oBody.getElementsByClassName("w-e-text")[0]获取的是个对象,点innerHTML将对象转为富文本
var oText = oBody.getElementsByClassName("w-e-text")[0].innerHTML//输出结果为富文本代码
console.log(oText,'获取的数值5')

3、接下来就按官方文档走就行了,


推荐阅读
  • JavaScript 实现图片文件转Base64编码的方法
    本文详细介绍了如何使用JavaScript将用户通过文件输入控件选择的图片文件转换为Base64编码字符串,适用于Web前端开发中图片上传前的预处理。 ... [详细]
  • 尽管在WPF中工作了一段时间,但在菜单控件的样式设置上遇到了一些基础问题,特别是关于如何正确配置前景色和背景色。 ... [详细]
  • 本文探讨了如何在PHP与MySQL环境中实现高效的分页查询,包括基本的分页实现、性能优化技巧以及高级的分页策略。 ... [详细]
  • Requests库的基本使用方法
    本文介绍了Python中Requests库的基础用法,包括如何安装、GET和POST请求的实现、如何处理Cookies和Headers,以及如何解析JSON响应。相比urllib库,Requests库提供了更为简洁高效的接口来处理HTTP请求。 ... [详细]
  • 高效的JavaScript异步资源加载解决方案
    本文探讨了如何通过异步加载技术处理网页中大型第三方插件的加载问题,避免将大文件打包进主JS文件中导致的加载时间过长,介绍了实现异步加载的具体方法及其优化。 ... [详细]
  • 本打算教一步步实现koa-router,因为要解释的太多了,所以先简化成mini版本,从实现部分功能到阅读源码,希望能让你好理解一些。希望你之前有读过koa源码,没有的话,给你链接 ... [详细]
  • 本文详细探讨了在Java中如何将图像对象转换为文件和字节数组(Byte[])的技术。虽然网络上存在大量相关资料,但实际操作时仍需注意细节。本文通过使用JMSL 4.0库中的图表对象作为示例,提供了一种实用的方法。 ... [详细]
  • 在使用 Nginx 作为服务器时,发现 Chrome 能正确从缓存中读取 CSS 和 JS 文件,而 Firefox 却无法有效利用缓存,导致加载速度显著变慢。 ... [详细]
  • CSS Border 属性:solid 边框的使用详解
    本文详细介绍了如何在CSS中使用solid边框属性,包括其基本语法、应用场景及高级技巧,适合初学者和进阶用户参考。 ... [详细]
  • 使用Vue指令实现下拉菜单效果
    使用Vue指令实现下拉菜单效果模仿重庆红岩历史革命博物馆官网的导航栏内容和效果,使用Vue实现。官网地址如下:https:www.hongyan.info官网效果效果图片展示代码展 ... [详细]
  • 图像处理学习笔记:噪声分析与去除策略
    本文详细探讨了不同类型的图像噪声及其对应的降噪技术,旨在帮助读者理解各种噪声的本质,并掌握有效的降噪方法。文章不仅介绍了高斯噪声、瑞利噪声、伽马噪声、指数噪声、均匀噪声和椒盐噪声等常见噪声类型,还特别讨论了周期噪声的特性及处理技巧。 ... [详细]
  • 在现代前端开发中,组件化已成为不可或缺的技术,尤其在 React 和 Vue 生态中。然而,组件的管理和测试一直是开发者面临的挑战。本文将介绍如何使用 Storybook 来简化这一过程,提高开发效率。 ... [详细]
  • 本文详细记录了腾讯ABS云平台的一次前端开发岗位面试经历,包括面试过程中遇到的JavaScript相关问题、Vue.js等框架的深入探讨以及算法挑战等内容。 ... [详细]
  • Vue 实战经验与常见问题总结
    本文总结了 Vue 开发中的一些常见问题和解决方案,包括全局组件的注册、头像显示、背景图路径问题以及 Sass 公用样式的使用方法。 ... [详细]
  • 作为一名新手开发者,我正在尝试使用 ASP.NET 和 Vue.js 构建一个单页面应用,涉及多个复杂组件(如按钮、图表等)。希望有经验的开发者能够提供指导。 ... [详细]
author-avatar
久福网_382
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有