先来个效果图:
上源码:
/**
* 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();
}());