wangeditor的作者提供了全屏外掛我自己加了預覽功能

全屏外掛下載wangEditor-fullscreen-plugin.js

下載之後引入

wangEditor-fullscreen-plugin.js
wangEditor-fullscreen-plugin.css

使用方法

var E = window.wangEditor; 
var editor = new E('#editor'); 
editor.create(); 
E.fullscreen.init('#editor');

我對wangEditor-fullscreen-plugin.js做了修改加了預覽功能

/**
 * 
 */
window.wangEditor.fullscreen = {
	// editor create之後呼叫
	init: function(editorSelector){
		$(editorSelector + " .w-e-toolbar").append('<div class="w-e-menu"><a class="_wangEditor_btn_fullscreen" href="javascript:window.wangEditor.fullscreen.toggleFullscreen(\'' + editorSelector + '\')">全屏</a></div>');
		$(editorSelector + " .w-e-toolbar").append('<div class="w-e-menu"><a class="_wangEditor_btn_preview" href="javascript:window.wangEditor.fullscreen.preview()">預覽</a></div>');
	},
	toggleFullscreen: function(editorSelector){
		$(editorSelector).toggleClass('fullscreen-editor');
		if($(editorSelector + ' ._wangEditor_btn_fullscreen').text() == '全屏'){
			$(editorSelector + ' ._wangEditor_btn_fullscreen').text('退出全屏');
		}else{
			$(editorSelector + ' ._wangEditor_btn_fullscreen').text('全屏');
		}
	},
	preview: function(){
		var layIndex = layer.open({//layui的彈出層直接把獲取到的編輯器html內容放到裡面就可以顯示
			  title: '效果預覽'
			  ,content: $("#bBody").val()//通過編輯器的監聽onchange事件把編輯器內容放到id為bBody的input裡
			});  
		layer.full(layIndex);
	}
};
 

我是通過layui的layer彈窗實現的預覽功能。編輯器自帶的監聽onchange功能

editor.customConfig.onchange  = function (html) {
            // html 即編輯器中的內容
            $("#bBody").val(html);
        };

把編輯器的html內容放到id為bBody的input裡

實現這個預覽功能其實很簡單 你只要拿到了 編輯器的html內容具體怎麼實現就看你自己想要什麼效果了。