热门标签 | 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、接下来就按官方文档走就行了,


推荐阅读
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社区 版权所有