wangEditor全屏预览查看源码
wangEditor 全屏 & 预览 & 查看源码
⼀、
⼆、全屏
虽然 wangEditor 没有内置全屏功能，但是你可以通过简单的代码来搞定，作者已经做了⼀个demo来⽰范。通过运⾏ demo（⽂档⼀开始就介绍了）即可看到该⽰例页⾯，直接查看页⾯源代码即可。
预览源码 & 查看源码
如果需要预览和查看源码的功能，也需要跟全屏功能⼀样，⾃⼰定义按钮。点击按钮时通过html()获取编辑器内容，然后⾃定义实现预览和查看源码功能。通过html(value)可以更新源码，这样就可以做到修改源码了。
三、使⽤⽅法：如何查看html代码
依赖jquery或者zepto，须先引⼊jquery或zepto。有兴趣可修改为⽆依赖版本，代码很简单。
引⼊wangEditor-fullscreen-plugin.css和wangEditor-fullscreen-plugin.js两个⽂件。
在wangEditor的create⽅法调⽤后，再调⽤插件的初始化⽅法，如：
var E = window.wangEditor;
var editor = new E('#editor');
E.fullscreen.init('#editor');
四、代码
1、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;
}
2、js
/
**
* @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="###" onclick="window.  },
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="###" onclick="window.wangEditor.viewsourc    },
toggleViewsource: function(editorSelector) {
editorHtml = html();
if($(editorSelector + ' ._wangEditor_btn_viewsource').text() == '源码'){
editorHtml = place(/</g, "<").replace(/>/g, ">").replace(/ /g, " ");
$(editorSelector + ' ._wangEditor_btn_viewsource').text('返回');
}else{
editorHtml = ().replace(/</ig, "<").replace(/>/ig, ">").replace(/ /ig, " ");
$(editorSelector + ' ._wangEditor_btn_viewsource').text('源码');
}
editor.change && editor.change(); //更新编辑器的内容
}
};
3、调⽤
var E = window.wangEditor;
var editor = new E('#contentDiv');
E.fullscreen.init('#contentDiv');
E.viewsource.init('#contentDiv');

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。