zoukankan      html  css  js  c++  java
  • 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

    //全屏函数
    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";
    	}
    }
    
  • 相关阅读:
    在vim中设置将tab自动转化为4个空格
    nginx1.4.6+php5.5.11+mysql5.6.17+mecache+opcache
    Centos7安装杀毒软件ClamAV
    网页中meta标记
    js刷新页面方法大全
    微信第三方登陆,无需注册一键登录,获取用户信息,PHP实现方法
    phpcms v9 如何实现用户登录
    web页面自适应手机屏幕宽度
    微信公共平台消息回复类
    自动回复微信消息
  • 原文地址:https://www.cnblogs.com/wurijie/p/10546127.html
Copyright © 2011-2022 走看看