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

wangEditorExt.js

/**

	
wangEditor扩展,增加全屏 查看源码功能
	
传入均为 editor实例,非css选择器
	
依赖jquery 如果是layui之类的需要在layui.use方法中使用
	
全屏功能需要引入 wEditor-fullscreen.css
	

author mrzhoumiw.cn
	
@date 2018.8.30 am 10:00
	
使用方法:
	
E.fullscreen.init(editor);
	
E.viewSource.init(editor);

 */

window.wangEditor.fullscreen = {

    // editor create之后调用

    init: function(editor) {

    	editor.config[‘isFullScreen’] = false;

    	toolbar = editor.$toolbarElem0;

        $(toolbar).append(‘
全屏
’);

    },

    run: function(editor) {

    	editor.config[‘isFullScreen’] = !editor.config[‘isFullScreen’];

    	container = $(editor.toolbarSelector);

        container.toggleClass(‘fullscreen-editor’);

        container.find(‘.btn_fullscreen’).text(editor.config[‘isFullScreen’] ? ‘退出全屏’: ‘全屏’);

    }

};

window.wangEditor.viewSource = {

    init: function(editor) {

        editor.config[‘isHTML’] = false;

        toolbar = editor.$toolbarElem0;

        $(toolbar).append(“
源
”);

    },

    run: function(editor) {

        editor.config[‘isHTML’] = !editor.config[‘isHTML’];

        _source = editor.txt.html();

        toolbar = editor.$toolbarElem0;

        if (editor.config[‘isHTML’]) {

            _source = source.replace(/</g, “<”).replace(/>/g, “>”).replace(/ /g, “ ”);

            $(toolbar).find(‘.w-e-menu’).css({ “display”: “none” });

            $(toolbar).find(’.btnviewSource’).css({ “display”: "" });

        } else {

            source = editor.txt.text().replace(/</ig, “<”).replace(/>/ig, “>”).replace(/ /ig, " ");

            $(toolbar).find(‘.w-e-menu’).css({ “display”: "" });

            editor.change && editor.change();

        }

        editor.txt.html(source);

    }

};

wEditor-fullscreen.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;

}