tinymce插件preview改造增加全屏按钮
近期需要用到tinymce的preview插件,但preview出来的界面太小了,通过投影仪出来看的不清晰,于是想在preview的预览界面中增加全屏、放大和缩小的按钮,改造内容如下:
由于preview是在html中生成了一个iframe,要想iframe能够全屏必须在iframe的元素上加上allowfullscreen属性,iframe又是使用js构造的href与父窗口不同源不能直接通过iframe内部js修改,可以通过plugin.min.js文件中的iframe初始化函数中修改$("iframe").attr("allowfullscreen", true)。
完整js见GitHub:https://github.com/wurijie/tinymce
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | //全屏函数 function fullscreen(){ var btn = document.getElementsByClassName( "btn-fullscreen" )[0] if (!window.isfullscreen){ var el = document.documentElement; var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen; if (rfs){ rfs.call(el); } else { alert( "浏览器不支持全屏操作!请使用最新Chrome" ) } btn.innerText = "退出全屏" window.isfullscreen = true } else { var el = document; var cfs = el.cancelFullScreen || el.webkitCancelFullScreen || el.mozCancelFullScreen || el.exitFullScreen; if (cfs) { //typeof cfs != "undefined" && cfs cfs.call(el); } else { alert( "浏览器不支持全屏操作!请使用最新Chrome" ) } btn.innerText = "全屏" window.isfullscreen = false } } //改变预览界面文字大小函数 function changeSize(type= "big" ){ var bo = document.getElementsByTagName( "body" )[0]; var size = window.getComputedStyle(bo).fontSize; size = parseInt(size); if (type == "big" ){ size += 5; bo.style.fontSize = size + "px" ; } else { if (size<10) {alert( "再小就看不见了!" ); return ;} size -= 5; bo.style.fontSize = size + "px" ; } } |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步