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

16 篇文章 1 订阅
12 篇文章 0 订阅

写这篇文章的原因是在未使用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、接下来就按官方文档走就行了,

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值