vue使用codemirror实现代码编辑器并嵌套iframe在右侧显示效果(实现复制、运行、刷新、下载功能)

实现效果:

在网上找的好多都是没有在右侧显示代码的展示效果,并且没有完整地复制运行刷新下载的功能,所以小编带大家看看如何完整实现一个代码编辑器。

小编使用的是vue-codemirror,codemirror官网,话不多说直接上代码。

父组件



子组件



主要是利用了iframe嵌套页面来展示代码效果,通过XMLHttpRequest获取文件代码内容传入编辑器,当用户改变代码内容,write空页面代码。

有一个问题,现在利用的是iframe创建空页面about:blank来写入代码内容,需要about:blank和about:blank#地址切换展示,不然会导致写入失败报错,如果有更好的办法评论区留言给我。

原创不易,请多多点赞评论支持,感谢!!!

你可能感兴趣的:(富文本编辑器,vue.js,前端,编辑器,javascript,html5)