UEditor增加H5页面预览功能

写在前面
做完富文本编辑器的个性化配置，发现编辑好内容后，提交到线上，发现样式上有一些差异，原因是H5页面Dome元素默认样式与富文本编辑器中的不一样，这个时候就需要添加一个预览功能了。了解了需求背景，下面就来具体实现以下。

一、需求分析

首先进行需求分析，我们的使用场景是后台管理系统，出现富文本编辑器的应用场景会比较多。考虑到后台是后端同学开发的，所以最好封装性好，操作简单（很多后端同学不会写js）。所以准备使用富文本编辑器的自定义，因为如果预览放在富文本编辑器外面，需要写一段预览按钮绑定的代码，对后端同学不是很友好。

二、具体实现

自定义一个预览按钮，点击预览会获取富文本编辑器中的内容，然后弹出浮层，将其渲染在H5页面上。
所以我们具体步骤分为两步，第一步，初始化H5页面浮层，第二步，自定义预览按钮。

1、初始化H5页面浮层

浮层什么时候创建会比较好，是不是初始化富文本编辑器的时候。
所以在ueditor.all.js文件代码中搜索getEditor（富文本编辑器初始化）方法，在方法开始的位置，添加创建H5页面浮层代码。
dome结构

#preview-box{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background-color: rgba(33,33,33,0.6); z-index: 999;}
#preview-content{box-sizing:border-box;position:absolute;top:50%;left: 50%;transform: translate(-50%, -50%);padding: 98px 23px 102px;width: 410px;height: 840px;background: url(http://www.xinhulu.com/yuhoo/editor/wangEditor/iphone-bg.png) no-repeat;}
#preview{width:100%;height:100%;border: 1px solid #333;}


  

  

创建浮层代码

// ueditor
UE.getEditor = function (id, opt) {
  // 在这里添加预览弹窗
  if (document.querySelector("#preview-box")) {
    var preview = document.createElement('div'); // 报错提示
    preview.id = "preview-box";
    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 = '
';
    document.body.appendChild(preview);
    document.querySelector("#preview-box").addEventListener("click", function(e) {
        e.target.style.display = "none";
    });
  }
...
// UMditor
UE.getEditor = function (id, opt) {
  // 在这里添加预览弹窗
  if ($("#preview-box").length == 0) {
    var box = $('
')
    $("body").append(box);
    $("#preview-box").on("click", function () { $("#preview-box").hide()});
  }
...

①为什么判断$("#preview-box").length才创建浮层
因为如果同一个页面中有多个富文本初始化，只用创建一个浮层即可共用。
②添加点击遮罩层隐藏预览浮层时间
$("#preview-box").on("click", function () { $("#preview-box").hide()});

2、自定义预览按钮

①工具栏添加按钮
如果是UEditor，在ueditor.all.js文件中搜索btnCmds，在末尾添加previewh5

//为工具栏添加按钮，以下都是统一的按钮触发命令，所以写在一起
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', 'previewh5'];

如果是UMditor，打开umeditor.js搜索UM.registerUI，同上添加previewh5

UM.registerUI('bold italic redo undo  ....  removeformat horizontal drafts previewh5',
...

②再配置文件中添加按钮配置
打开默认配置文件ueditor.config.js/umeditor.config.js

// UEditor
, toolbars: [[
  'previewh5', 'fullscreen', 'source', '|', 'undo', 'redo', '|',
  'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', '|',
...
// UMditor
,toolbar:[
  '| bold italic underline strikethrough | fontsize forecolor' ,
  '| justifyleft justifycenter justifyright image | link unlink | removeformat | previewh5',
...

③自定义按钮样式
找到样式文件和图片目录，将自定义图片放在图片目录下，大小为20px*20px

// UEditor ueditor/themes/default/css/ueditor.css
.edui-default .edui-for-previewh5.edui-icon{
  background-image: url("../images/previewh5.png");
}
// UMditor umeditor/themes/default/css/umeditor.css
.edui-toolbar .edui-btn .edui-icon-previewh5.edui-icon {
  background-image: url("../images/previewh5.png");
}

④添加按钮提示
滑动到按钮上方时，会显示按钮中文提示

// UEditor ueditor.config.js
,labelMap:{
  'previewh5': '预览', 
}
// UMditor 没有开放接口，需要修改配置文件 umeditor/lang/zh-cn/zh-cn.js 
UM.I18N['zh-cn'] = {
  'labelMap':{
    'anchor':'锚点', 'undo':'撤销', 'redo':'重做', ... 'previewh5':'预览',
...

⑤点击按钮时间绑定

// DEditor
UE.commands['previewh5'] = {
  execCommand : function(){
    var editor = this;
    document.querySelector("#preview-box").style.display = 'block';
    var ifr_document = document.querySelector("#preview").contentWindow.document; // 获取内联框架
    if(ifr_document){
      var ifr_content = ifr_document.querySelector(".article-content");
      ifr_content.innerHTML = editor.getContent(); // 富文本编辑器内容填充
    }
    return true; 
  }
};
// UMditor
UM.commands['previewh5'] = {
  execCommand : function(){
    var editor = this;
    $("#preview-box").show(); // 显示浮层弹框
    var ifr_document = document.querySelector("#preview").contentWindow.document; // 获取内联框架
    if(ifr_document){
      var ifr_content = $(ifr_document).find(".article-content");
      ifr_content.html(editor.getContent()); // 富文本编辑器内容填充
    }
    return true; 
  },
}

// preview.html 页面



  
  
  
  


  

github源码

结果图