tinymce预览插件全屏

先来个效果图:
在这里插入图片描述

上源码:

/**
 * Copyright (c) Tiny Technologies, Inc. All rights reserved.
 * Licensed under the LGPL or a commercial license.
 * For LGPL see License.txt in the project root for license information.
 * For commercial licenses see https://www.tiny.cloud/
 *
 * Version: 5.5.1 (2020-10-01)
 */
(function () {
  'use strict';

  var global = tinymce.util.Tools.resolve('tinymce.PluginManager');

  var global$1 = tinymce.util.Tools.resolve('tinymce.Env');

  var global$2 = tinymce.util.Tools.resolve('tinymce.util.Tools');

  var getContentStyle = function (editor) {
    return editor.getParam('content_style', '', 'string');
  };
  var shouldUseContentCssCors = function (editor) {
    return editor.getParam('content_css_cors', false, 'boolean');
  };
  var getBodyClassByHash = function (editor) {
    var bodyClass = editor.getParam('body_class', '', 'hash');
    return bodyClass[editor.id] || '';
  };
  var getBodyClass = function (editor) {
    var bodyClass = editor.getParam('body_class', '', 'string');
    if (bodyClass.indexOf('=') === -1) {
      return bodyClass;
    } else {
      return getBodyClassByHash(editor);
    }
  };
  var getBodyIdByHash = function (editor) {
    var bodyId = editor.getParam('body_id', '', 'hash');
    return bodyId[editor.id] || bodyId;
  };
  var getBodyId = function (editor) {
    var bodyId = editor.getParam('body_id', 'tinymce', 'string');
    if (bodyId.indexOf('=') === -1) {
      return bodyId;
    } else {
      return getBodyIdByHash(editor);
    }
  };

  var getPreviewHtml = function (editor) {
    var headHtml = '';
    var encode = editor.dom.encode;
    var contentStyle = getContentStyle(editor);
    headHtml += '<base href="' + encode(editor.documentBaseURI.getURI()) + '">';
    if (contentStyle) {
      headHtml += '<style type="text/css">' + contentStyle + '</style>';
    }
    var cors = shouldUseContentCssCors(editor) ? ' crossorigin="anonymous"' : '';
    global$2.each(editor.contentCSS, function (url) {
      headHtml += '<link type="text/css" rel="stylesheet" href="' + encode(editor.documentBaseURI.toAbsolute(url)) + '"' + cors + '>';
    });
    var bodyId = getBodyId(editor);
    var bodyClass = getBodyClass(editor);
    var isMetaKeyPressed = global$1.mac ? 'e.metaKey' : 'e.ctrlKey && !e.altKey';
    var preventClicksOnLinksScript = '<script>' + 'document.addEventListener && document.addEventListener("click", function(e) {' + 'for (var elm = e.target; elm; elm = elm.parentNode) {' + 'if (elm.nodeName === "A" && !(' + isMetaKeyPressed + ')) {' + 'e.preventDefault();' + '}' + '}' + '}, false);'
      + 'function fullscreen(){var btn=document.getElementsByClassName("btn-fullscreen")[0];var isfullscreen=document.isFullScreen||document.mozIsFullScreen||document.webkitIsFullScreen;if(!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="退出全屏"}else{var el=document;var cfs=el.cancelFullScreen||el.webkitCancelFullScreen||el.mozCancelFullScreen||el.exitFullScreen;if(cfs){cfs.call(el);}else{alert("浏览器不支持全屏操作!请使用最新Chrome")}btn.innerText="全屏"}}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";}}'
      // + '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){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";}}'
      + '</script> ';
    var directionality = editor.getBody().dir;
    var dirAttr = directionality ? ' dir="' + encode(directionality) + '"' : '';
    // var previewHtml = '<!DOCTYPE html>' + '<html>' + '<head>' + headHtml + '</head>' + '<body id="' + encode(bodyId) + '" class="mce-content-body ' + encode(bodyClass) + '"' + dirAttr + '>' + editor.getContent() + preventClicksOnLinksScript + '</body>' + '</html>';
    var previewHtml = '<!DOCTYPE html>' + '<html>' + '<head>' + headHtml + '</head>'
      + '<style type="text/css">body{font-size:15px;background:#fff;}.btn{display:inline-block;padding:6px 12px;margin-bottom:0;font-size:14px;font-weight:400;line-height:1.42857143;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-image:none;border:1px solid transparent;border-radius:4px;background-color:rgba(218,230,236,0.3);border-color:rgba(218,230,236,0.5);margin-right:5px}</style>'
      + '<body id="' + encode(bodyId) + '" class="mce-content-body ' + encode(bodyClass) + '"' + dirAttr + '>'
      + '<button type=\'button\' class=\'btn btn-default btn-fullscreen\' οnclick=\'fullscreen()\'>全屏</button><button class=\'btn btn-default\' οnclick=\'changeSize()\'>放大</button><button class=\'btn btn-default\' οnclick=\'changeSize(5)\'>缩小</button>'
      + editor.getContent() + preventClicksOnLinksScript + '</body>' + '</html>';
    return previewHtml;
  };

  var open = function (editor) {
    var content = getPreviewHtml(editor);
    var dataApi = editor.windowManager.open({
      title: 'Preview',
      size: 'large',
      body: {
        type: 'panel',
        items: [{
          name: 'preview',
          type: 'iframe',
          sandboxed: true
        }]
      },
      buttons: [{
        type: 'custom',
        name: 'fullscreen',
        text: '全屏',
        icon: 'fullscreen',
        primary: false
      },{
        type: 'cancel',
        name: 'close',
        text: 'Close',
        primary: true
      }],
      onAction: function (dialogApi, details) {
        if (details.name === 'fullscreen') {
          const iframe = document.getElementsByTagName('iframe')
          iframe[iframe.length - 1].contentWindow.fullscreen()
        }
      },
      initialData: { preview: content }
    });
    dataApi.focus('close');
  };

  var register = function (editor) {
    editor.addCommand('mcePreview', function () {
      open(editor);
    });
  };

  var register$1 = function (editor) {
    editor.ui.registry.addButton('preview', {
      icon: 'preview',
      tooltip: 'Preview',
      onAction: function () {
        return editor.execCommand('mcePreview');
      }
    });
    editor.ui.registry.addMenuItem('preview', {
      icon: 'preview',
      text: 'Preview',
      onAction: function () {
        return editor.execCommand('mcePreview');
      }
    });
  };

  function Plugin () {
    global.add('preview', function (editor) {
      register(editor);
      register$1(editor);
    });
  }

  Plugin();

}());

参考:
tinymce插件preview改造增加全屏按钮

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值