wangEditor如何增加全屏代码和查看源代码功能

虽然 wangEditor 没有内置全屏功能，但是你可以通过简单的代码来搞定，作者已经做了一个demo来示范。通过运行 demo（文档一开始就介绍了）即可看到该示例页面，直接查看页面源代码即可。

如果需要预览和查看源码的功能，也需要跟全屏功能一样，自己定义按钮。点击按钮时通过editor.txt.html()获取编辑器内容，然后自定义实现预览和查看源码功能。通过editor.txt.html(value)可以更新源码，这样就可以做到修改源码了。

CSS样式：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;
}
.btn_viewSource .icon {
background-image: url("dm.png");
width: 10px;
height: 10px;
}
.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;
}

JS样式：wangEditor-fullscreen-plugin.js

/**
* wangEditor扩展,增加全屏 查看源码功能
* 使用方法:
* E.fullscreen.init(editor);
* E.viewSource.init(editor);
*/
window.wangEditor.fullscreen = {
init: function(editor) {
id = editor.id;
if(!this.pluginsEditors){
this.pluginsEditors = {}
}
if(this.pluginsEditors[id]){
editor = this.pluginsEditors[id];
} else {
this.pluginsEditors[id]=editor;
}
editor.isFullScreen = false;
toolbar = editor.$toolbarElem[0];
$(toolbar).append('<div class="w-e-menu btn_fullscreen" onclick="window.wangEditor.fullscreen.run(\''+id+'\')">全屏</div>');
},
run: function(id) {
editor = this.pluginsEditors[id];
editor.isFullScreen = editor.isFullScreen;
container = $(editor.toolbarSelector);
container.toggleClass('fullscreen-editor');
container.find('.btn_fullscreen').text(this.isFullScreen ? '退出全屏': '全屏');
}
};
window.wangEditor.viewSource = {
init: function(editor) {
id = editor.id;
if(!this.pluginsEditors){
this.pluginsEditors = {}
}
if(this.pluginsEditors[id]){
editor = this.pluginsEditors[id];
} else {
this.pluginsEditors[id]=editor;
}
editor.isHTML = false;
toolbar = editor.$toolbarElem[0];
$(toolbar).append("<div class='w-e-menu btn_viewSource' title='查看源码' onclick='window.wangEditor.viewSource.run(\""+id+"\")'><img src='dm.png' width='25' height='25'></div>");
},
run: function(id) {
editor = this.pluginsEditors[id];
editor.isHTML = !editor.isHTML;
_source = editor.txt.html();
toolbar = editor.$toolbarElem[0];
if (editor.isHTML) {
_source = _source.replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/ /g, "&nbsp;");
$(toolbar).find('.w-e-menu').css({ "display": "none" });
$(toolbar).find('.btn_viewSource').css({ "display": "" });
} else {
_source = editor.txt.text().replace(/&lt;/ig, "<").replace(/&gt;/ig, ">").replace(/&nbsp;/ig, " ");
$(toolbar).find('.w-e-menu').css({ "display": "" });
editor.change && editor.change();
}
editor.txt.html(_source);
}
};

最后在后面增加下面代码即可

E.fullscreen.init(editor);
E.viewSource.init(editor);