為wangEditor擴充套件,增加全屏 檢視原始碼功能
阿新 • • 發佈:2019-02-20
wangEditorExt.js
/** * wangEditor擴充套件,增加全屏 檢視原始碼功能 * 傳入均為 editor例項,非css選擇器 * 依賴jquery 如果是layui之類的需要在layui.use方法中使用 * 全屏功能需要引入 wangEditor-fullscreen.css * @author [email protected] * @date 2018.8.30 am 10:00 * @date 2018.9.18 pm 15:00 支援多個編輯器 * 使用方法: * E.fullscreen.init(editor); * E.viewSource.init(editor); */ var _________FullEditor={}; window.wangEditor.fullscreen = { init: function(editor) { id = editor.id; _________FullEditor[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 = _________FullEditor[id]; editor.isFullScreen = editor.isFullScreen; container = $(editor.toolbarSelector); container.toggleClass('fullscreen-editor'); container.find('.btn_fullscreen').text(this.isFullScreen ? '退出全屏': '全屏'); } }; var _______SourceEditor={}; window.wangEditor.viewSource = { init: function(editor) { id = editor.id; editor.isHTML = false; _______SourceEditor[id]=editor; toolbar = editor.$toolbarElem[0]; $(toolbar).append("<div class='w-e-menu btn_viewSource' title='檢視原始碼' onclick='window.wangEditor.viewSource.run(\""+id+"\")'>源</div>"); }, run: function(id) { editor = _______SourceEditor[id]; editor.isHTML = !editor.isHTML; _source = editor.txt.html(); toolbar = editor.$toolbarElem[0]; if (editor.isHTML) { _source = _source.replace(/</g, "<").replace(/>/g, ">").replace(/ /g, " "); $(toolbar).find('.w-e-menu').css({ "display": "none" }); $(toolbar).find('.btn_viewSource').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); } };
wangEditor-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; }