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

手机背景图

最后编辑于：2021.03.24 13:41:24

UEditor 如何添加H5页面预览

一、 下载vue版本的插件

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

三、 引入注册

四、配置项

一、下载vue版本的插件

三、引入注册