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";
    }
}

 

posted @   小伍子  阅读(3012)  评论(1编辑  收藏  举报
点击右上角即可分享
微信分享提示