版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/RiceTZ/article/details/83146124
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内容具体怎么实现就看你自己想要什么效果了。