1、需求分析css
項目中用到富文本編輯器的地方不少,富文本編輯器通常都是在pc後臺上,由於前端是手機端,所以每次再富文本編輯內容保存之後,在手機端展現的樣式和咱們在富文本中編輯的不太同樣,所以就須要在編寫完內容以後能夠模擬手機端進行預覽一下,可是後端用富文本編輯器的地方比較多,不適合在每一個頁面進行開發,所以作成插件功能放入ueditor之中的方式改動的代價比較小。html
首先看下效果前端
2、代碼web
先在ueditor.css中添加按鈕樣式圖片:後端
路徑:ueditor\themes\default\css\ueditor.cssapp
/*手機預覽樣式*/ .edui-default .edui-for-previewh5.edui-icon{ background-image: url("../images/previewMobile.png"); }
而後在 ueditor\themes\default\images 中添加 iphone-bg.png 和 previewMobile.png 圖片;在ueditor\themes\default 目錄下建立 html目錄,將preview.html頁面放入。框架
圖片和頁面獲取入口webapp
提取碼:zhkjiphone
在ueditor.config.js中toolbars里加一個按鈕 previewMobile編輯器
toolbars: [ [ 'source', //源代碼 'anchor', //錨點 'undo', //撤銷 'redo', //重作 'bold', //加粗 'indent', //首行縮進 'snapscreen', //截圖 'italic', //斜體 'underline', //下劃線 'strikethrough', //刪除線 'subscript', //下標 'fontborder', //字符邊框 'superscript', //上標 'formatmatch', //格式刷 'blockquote', //引用 'pasteplain', //純文本粘貼模式 'selectall', //全選 'print', //打印 'preview', //預覽 'horizontal', //分隔線 'removeformat', //清除格式 'time', //時間 'date', //日期 'unlink', //取消連接 'insertrow', //前插入行 'insertcol', //前插入列 'mergeright', //右合併單元格 'mergedown', //下合併單元格 'deleterow', //刪除行 'deletecol', //刪除列 'splittorows', //拆分紅行 'splittocols', //拆分紅列 'splittocells', //徹底拆分單元格 'deletecaption', //刪除表格標題 'inserttitle', //插入標題 'mergecells', //合併多個單元格 'deletetable', //刪除表格 'cleardoc', //清空文檔 'insertparagraphbeforetable', //"表格前插入行" 'insertcode', //代碼語言 'fontfamily', //字體 'fontsize', //字號 'paragraph', //段落格式 'simpleupload', //單圖上傳 'insertimage', //多圖上傳 'edittable', //表格屬性 'edittd', //單元格屬性 'link', //超連接 'emotion', //表情 'spechars', //特殊字符 'searchreplace', //查詢替換 // 'map', //Baidu地圖 // 'gmap', //Google地圖 'insertvideo', //視頻 'help', //幫助 'justifyleft', //居左對齊 'justifyright', //居右對齊 'justifycenter', //居中對齊 'justifyjustify', //兩端對齊 'forecolor', //字體顏色 'backcolor', //背景色 'insertorderedlist', //有序列表 'insertunorderedlist', //無序列表 'fullscreen', //全屏 'directionalityltr', //從左向右輸入 'directionalityrtl', //從右向左輸入 'rowspacingtop', //段前距 'rowspacingbottom', //段後距 // 'pagebreak', //分頁 'insertframe', //插入Iframe 'imagenone', //默認 'imageleft', //左浮動 'imageright', //右浮動 'attachment', //附件 'imagecenter', //居中 // 'wordimage', //圖片轉存 'lineheight', //行間距 'edittip ', //編輯提示 'customstyle', //自定義標題 'autotypeset', //自動排版 // 'webapp', //百度應用 'touppercase', //字母大寫 'tolowercase', //字母小寫 'background', //背景 'template', //模板 'scrawl', //塗鴉 'music', //音樂 'inserttable', //插入表格 'drafts', // 從草稿箱加載 'charts', // 圖表 'previewMobile' // 預覽 ]]
添加中文說明(鼠標放上去中文顯示)
labelMap:{ 'previewMobile':'手機預覽' }
在ueditor.all.js中 btnCmds 加入 previewMobile
//爲工具欄添加按鈕,如下都是統一的按鈕觸發命令,因此寫在一塊兒 var btnCmds = ['undo', 'redo', 'formatmatch', 'bold', 'italic', 'underline', 'fontborder', 'touppercase', 'tolowercase', 'strikethrough', 'subscript', 'superscript', 'source', 'indent', 'outdent', 'blockquote', 'pasteplain', 'pagebreak', 'selectall', 'print','horizontal', 'removeformat', 'time', 'date', 'unlink', 'insertparagraphbeforetable', 'insertrow', 'insertcol', 'mergeright', 'mergedown', 'deleterow', 'deletecol', 'splittorows', 'splittocols', 'splittocells', 'mergecells', 'deletetable', 'drafts','previewMobile'];
而後在 getEditor和 ui.Editor 中添加建立遮罩層代碼
在這兩個裏面都加是由於使用不規範問題,ue推薦你們在得到ueditor時使用工廠方法 getEditor,可是實際在使用時,有的也會用 new UE.ui.Editor() 來得到ue對象,因此在兩個方法中都加入代碼。
UE.getEditor = function (id, opt) { // 在這裏添加預覽彈窗 var proUrl = getWEBUrl(); var preDocu = document.getElementById("preview-div"); if (preDocu == null || typeof(preDocu) == "undefined" || preDocu == 0 ) { var preview = document.createElement('div'); preview.id = "preview-div"; preview.style.cssText = 'display:none;position:fixed;top:0;left:0;right:0;bottom:0;background-color: rgba(33,33,33,0.6); z-index: 999;'; preview.innerHTML = '<div style="box-sizing:border-box;position:absolute;top:67%;left: 50%;transform: translate(-67%, -50%);padding: 75px 22px 93px 19px;width: 410px;height: 840px;background: url('+proUrl+'/static/ueditor/themes/default/images/iphone-bg.png) no-repeat;background-size: 76%"><iframe id="preview" style="width:74.3%;height:72%;" src="'+proUrl+'/static/ueditor/themes/default/html/preview.html"></iframe></div>'; document.body.appendChild(preview); document.getElementById("preview-div").addEventListener("click", function(e) { e.target.style.display = "none"; }); } var editor = instances[id]; if (!editor) { editor = instances[id] = new UE.ui.Editor(opt); editor.render(id); } return editor; };
UE.ui.Editor = function (options) {
....... 省略源代碼
// 在這裏添加預覽彈窗 var proUrl = getWEBUrl(); // 得到項目路徑 var preDocu = document.getElementById("preview-div"); if (preDocu == null || typeof(preDocu) == "undefined" || preDocu == 0 ) { var preview = document.createElement('div'); // 報錯提示 preview.id = "preview-div"; preview.style.cssText = 'display:none;position:fixed;top:0;left:0;right:0;bottom:0;background-color: rgba(33,33,33,0.6); z-index: 999;'; preview.innerHTML = '<div style="box-sizing:border-box;position:absolute;top:67%;left: 50%;transform: translate(-67%, -50%);padding: 75px 22px 93px 19px;width: 410px;height: 840px;background: url('+proUrl+'/static/ueditor/themes/default/images/iphone-bg.png) no-repeat;background-size: 76%"><iframe id="preview" style="width:74.3%;height:72%;" src="'+proUrl+'/static/ueditor/themes/default/html/preview.html"></iframe></div>'; document.body.appendChild(preview); document.getElementById("preview-div").addEventListener("click", function(e) { e.target.style.display = "none"; }); } return editor; };
注:proUrl 替換爲本身的項目路徑(http://ip:prot//項目名);
而後再ueditor.all.js中註冊預覽按鈕的點擊事件
// 註冊手機預覽事件 UE.commands['previewh5'] = { execCommand : function(){ var editor = this; document.getElementById("preview-div").style.display = 'block'; var ifr_document = document.getElementById("preview").contentWindow; // 獲取內聯框架 if(ifr_document){ var ifr_content = ifr_document.document.getElementById("phone_preview_div"); ifr_content.innerHTML = editor.getContent() == null ? "" : editor.getContent(); // 富文本編輯器內容填充 } return true; } };