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

<div id="preview-box">
  <div id="preview-content>
    <iframe id="preview" src=".../preview.html"></iframe>
  </div>
</div>

创建浮层代码

// 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 = '<div style="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;"><iframe id="preview" style="width:100%;height:100%;border: 1px solid #333;" src="http://www.xinhulu.com/yuhoo/editor/wangEditor/preview.html"></iframe></div>';
    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 = $('<div id="preview-box" style="display:none;position:fixed;top:0;left:0;right:0;bottom:0;background-color: rgba(33,33,33,0.6); z-index: 999;"><div style="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;"><iframe id="preview" style="width:100%;height:100%;border: 1px solid #333;" src="http://www.xinhulu.com/yuhoo/editor/wangEditor/preview.html"></iframe></div></div>')
    $("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 页面
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,viewport-fit=cover"/>
  <link rel="stylesheet" type="text/css" href="引入h5页面基础样式">
  <style>.article-content{padding: 10px 14px;}</style>
</head>
<body>
  <div class="article-content"></div>
</body>
</html>

github源码

结果图

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,686评论 6赞 492
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,668评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 158,160评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,736评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,847评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,043评论 1赞 291
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,129评论 3赞 410
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,872评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,318评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,645评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,777评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,470评论 4赞 333
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,126评论 3赞 317
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,861评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,095评论 1赞 267
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,589评论 2赞 362
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,687评论 2赞 351