最近在寫項(xiàng)目的時(shí)候 使用了UEitor作為后臺(tái)編輯器編寫活動(dòng)內(nèi)容
由于要接入秀米工具 調(diào)研了一番最終決定使用百度的UEditor
如何接入秀米請(qǐng)閱覽這篇帖子
秀米圖文排版UEditor插件示例
我們來看下預(yù)覽的效果圖
效果圖.gif
如果屏幕前的你也有類似的需求 可以借鑒一下(此項(xiàng)目需要后臺(tái)支持 返回config才能用一些額外的功能 本篇文章涉及的代碼不能保證在您的項(xiàng)目中運(yùn)行)
一、 下載vue版本的插件
npm i vue-ueditor-wrap --save
二框仔、下載ueditor并將其復(fù)制到Static目錄下
下載地址：鏈接：https://pan.baidu.com/s/1EkENeonqdV0nihswQkrwDA
提取碼：5k52
如圖所示：
image.png
三瑰钮、 引入注冊(cè)
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來雙向綁定編輯器的內(nèi)容了
四、配置項(xiàng)
需要注意的是 組件提供一個(gè)組件init之前的鉤子
@beforeInit
在這個(gè)函數(shù)我們可以做一些自己自定義的事情.. 比如我們需要改造的秀米 新增一個(gè)瀏覽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: '手機(jī)預(yù)覽',
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(手機(jī)背景圖) no-repeat;background-size:369px 756px;'
});
that.previewh5 = dialog;
dialog.render();
dialog.open();
}
});
return btn;
});
},
需要在CSS中添加icon
/*手機(jī)預(yù)覽樣式*/
.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();//獲取編輯器中的內(nèi)容
var oPreview = document.querySelector("#phone_preview_div");//抓取dom
oPreview.innerHTML = html;//插入元素
dialog.onok = function() {
//TODO:
};
</script>
</body>
自此即可實(shí)現(xiàn)效果了
tip:
如果我不想使用編輯器的按鈕 我想自定義如何做呢?
抓取DOM 元素模擬按鈕的點(diǎn)擊事件
let oBtn = document.querySelector('.edui-for-previewh5');
let oChild = oBtn.firstChild.firstChild.firstChild;
oChild.click();
素材圖
ICON
手機(jī)背景圖
