UEditor 如何添加H5页面预览
2020-05-21 本文已影响0人
kangaroo_v
最近在写项目的时候 使用了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
手机背景图
