tinymce插件preview改造增加全屏按鈕
阿新 • • 發佈:2019-03-17
web parse 操作 window amp view getc 界面 全屏
近期需要用到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
//全屏函數 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"; } }
tinymce插件preview改造增加全屏按鈕