UEditor 如何添加H5页面预览

最近在写项目的时候 使用了UEitor作为后台编辑器编写活动内容
由于要接入秀米工具 调研了一番最终决定使用百度的UEditor
如何接入秀米请阅览这篇帖子
秀米图文排版UEditor插件示例
我们来看下预览的效果图

效果图.gif

如果屏幕前的你也有类似的需求 可以借鉴一下(此项目需要后台支持 返回config才能用一些额外的功能 本篇文章涉及的代码不能保证在您的项目中运行)

一、 下载vue版本的插件
npm i vue-ueditor-wrap --save

二、下载ueditor并将其复制到Static目录下

下载地址:链接:https://pan.baidu.com/s/1EkENeonqdV0nihswQkrwDA
提取码:5k52
如图所示:

image.png

三、 引入注册
import VueUeditorWrap from 'vue-ueditor-wrap'; //富文本编辑器

components: {
  VueUeditorWrap
}
<vue-ueditor-wrap v-model="txt" :config="myConfig" @beforeInit="beforeInit"></vue-ueditor-wrap>
myConfig: {
        // 初始容器高度
        initialFrameHeight: 500,
        // 初始容器宽度
        initialFrameWidth: '99%',
        //编辑器路径
        UEDITOR_HOME_URL: '/static/UEditor/'
      },

之后可以使用v-model来双向绑定编辑器的内容了

四、配置项

需要注意的是 组件提供一个组件init之前的钩子@beforeInit
在这个函数我们可以做一些自己自定义的事情.. 比如我们需要改造的秀米 新增一个浏览H5的按钮

beforeInit(editorId) {
      //秀米
      let that = this;
      window.UE.registerUI('dialog', function(editor, uiName) {
        var btn = new UE.ui.Button({
          name: 'xiumi-connect',
          title: '秀米',
          onclick: function() {
            var dialog = new UE.ui.Dialog({
              iframeUrl: '/static/UEditor/xiumi-ue-dialog-v5.html',
              editor: editor,
              name: 'xiumi-connect',
              title: '秀米图文消息助手',
              cssRules: 'width: ' + (window.innerWidth - 60) + 'px;' + 'height: ' + (window.innerHeight - 60) + 'px;'
            });
            dialog.render();
            dialog.open();
          }
        });
        return btn;
      });
    //浏览H5
      window.UE.registerUI('previewh5', function(editor, uiName) {
        var btn = new UE.ui.Button({
          name: 'previewh5',
          title: '手机预览',
          onclick: function() {
            var dialog = new UE.ui.Dialog({
              iframeUrl: '/static/UEditor/preview.html',
              editor: editor,
              name: 'previewh5',
              title: 'previewh5',
              cssRules:
                'box-sizing:border-box;position:absolute;top:50%;left: 50%;transform: translate(-50%, -50%);padding: 98px 23px 102px;width: 369px;height: 756px;background: url(手机背景图) no-repeat;background-size:369px 756px;'
            });
            that.previewh5 = dialog;
            dialog.render();
            dialog.open();
          }
        });
        return btn;
      });
    },

需要在CSS中添加icon

/*手机预览样式*/

.edui-button.edui-for-previewh5 .edui-button-wrap .edui-button-body .edui-icon {
  background-image: url("ICON图") !important;
  background-size: contain;
}

让我们来看下static/UEditor/preview.html

<script type="text/javascript" src="dialogs/internal.js"></script>
<body>
    <div id="phone_preview_div"></div>
    <script>
        var html = editor.getContent();//获取编辑器中的内容
        var oPreview = document.querySelector("#phone_preview_div");//抓取dom
        oPreview.innerHTML = html;//插入元素
        dialog.onok = function() {
           //TODO:
        };
    </script>
</body>

自此即可实现效果了

tip:
如果我不想使用编辑器的按钮 我想自定义如何做呢?
抓取DOM 元素模拟按钮的点击事件

let oBtn = document.querySelector('.edui-for-previewh5');
let oChild = oBtn.firstChild.firstChild.firstChild;
oChild.click();

素材图


ICON
手机背景图