为wangEditor扩展,增加全屏 查看源码功能

wangEditor 全屏 & 预览 & 查看源码

使用方法

引入wangEditor-fullscreen-plugin.css和wangEditor-fullscreen-plugin.js两个文件。

在wangEditor的create方法调用后，再调用插件的初始化方法，如：

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

代码：
wangEditor-fullscreen-plugin.css文件：

@CHARSET "UTF-8";
 
.w-e-toolbar {
	flex-wrap: wrap;
	-webkit-box-lines: multiple;
}
 
.w-e-toolbar .w-e-menu:hover{
	z-index: 10002!important;
}
 
.w-e-menu a {
	text-decoration: none;
}
 
.fullscreen-editor {
	position: fixed !important;
	width: 100% !important;
	height: 100% !important;
	left: 0px !important;
	top: 0px !important;
	background-color: white;
	z-index: 9999;
}
 
.fullscreen-editor .w-e-text-container {
	width: 100% !important;
	height: 95% !important;
}

/**
 * @todo 全屏
 */
window.wangEditor.fullscreen = {
	// editor create之后调用
	init: function(editorSelector){
		$(editorSelector + " .w-e-toolbar").append('<div class="w-e-menu"><a class="_wangEditor_btn_fullscreen" href="###" οnclick="window.wangEditor.fullscreen.toggleFullscreen(\'' + editorSelector + '\')">全屏</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('全屏');
		}
	}
};
 
/**
 * @todo 查看源码
 */
window.wangEditor.viewsource = {
    init: function(editorSelector) {
    	$(editorSelector + " .w-e-toolbar").append('<div class="w-e-menu"><a class="_wangEditor_btn_viewsource" href="###" οnclick="window.wangEditor.viewsource.toggleViewsource(\'' + editorSelector + '\')">源码</a></div>');
    },
    toggleViewsource: function(editorSelector) {
    	editorHtml = editor.txt.html();
		if($(editorSelector + ' ._wangEditor_btn_viewsource').text() == '源码'){
			editorHtml = editorHtml.replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/ /g, "&nbsp;");
			$(editorSelector + ' ._wangEditor_btn_viewsource').text('返回');
		}else{
			editorHtml = editor.txt.text().replace(/&lt;/ig, "<").replace(/&gt;/ig, ">").replace(/&nbsp;/ig, " ");
			$(editorSelector + ' ._wangEditor_btn_viewsource').text('源码');
		}
        editor.txt.html(editorHtml);
        editor.change && editor.change();	//更新编辑器的内容
    }
};

页面调用：

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