美文网首页
UEditor 如何添加H5页面预览

UEditor 如何添加H5页面预览

作者: kangaroo_v | 来源:发表于2020-05-21 17:38 被阅读0次

最近在写项目的时候 使用了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 手机背景图

相关文章

  • UEditor 如何添加H5页面预览

    最近在写项目的时候 使用了UEitor作为后台编辑器编写活动内容由于要接入秀米工具 调研了一番最终决定使用百度的U...

  • UEditor增加H5页面预览功能

    写在前面做完富文本编辑器的个性化配置,发现编辑好内容后,提交到线上,发现样式上有一些差异,原因是H5页面Dome元...

  • iOS 给App添加3DTouch功能

    给App添加3DTouch的多个Item 给某个页面添加3DTouch 3DTouch添加页面 预览页面

  • 打印设置

    * 分页线预览:视图-分页预览 * 打印标题:页面布局-打印标题-工作表-顶端标题行 * 添加页眉、页码:页面布局...

  • charles 反向代理

    在app中嵌套的h5页面,实时预览本地h5页面。下载安装charles,并且手机代理上。 这样就算好了。第一次可能...

  • extension

    JS 图片剪切上传cropper 可编辑表格bui UEditor 组件扩展 模拟手机端预览ueditor-pre...

  • 学习笔记3/6

    学习内容:预览Github上的页面;什么是字符编码 如何预览Github上的页面 操作步骤 登入Github首页,...

  • android 添加水印 全部页面添加水印 h5 原生

    android 添加水印 全部页面添加水印 h5 原生 https://blog.csdn.net/fantasy...

  • uni-app 初次运行项目报错:连接服务器异常

    在manifest.json添加 "h5" : { "async": { //页面js异步加载配置 "loadin...

  • H5页面的设计有哪些小技巧?

    随着HTML5技术的成熟,H5页面越来越受大家欢迎,各种H5页面层出不穷,那如何才能让自己的H5页面在众多页面中脱...

网友评论

      本文标题:UEditor 如何添加H5页面预览

      本文链接:https://www.haomeiwen.com/subject/jnltahtx.html