wangEditor全屏和预览插件

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内容具体怎么实现就看你自己想要什么效果了。

预览功能：

gif