Ueditor百度富文本編輯器添加h5手機端預覽功能

1、需求分析

項目中用到富文本編輯器的地方不少，富文本編輯器通常都是在pc後臺上，由於前端是手機端，所以每次再富文本編輯內容保存之後，在手機端展現的樣式和咱們在富文本中編輯的不太同樣，所以就須要在編寫完內容以後能夠模擬手機端進行預覽一下，可是後端用富文本編輯器的地方比較多，不適合在每一個頁面進行開發，所以作成插件功能放入ueditor之中的方式改動的代價比較小。

首先看下效果

 

 

 2、代碼

先在ueditor.css中添加按鈕樣式圖片：

路徑：ueditor\themes\default\css\ueditor.css

/*手機預覽樣式*/
.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頁面放入。

圖片和頁面獲取入口

提取碼：zhkj

在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;
    }
};