前言
本文介紹vue項(xiàng)目里引入百度Ueditor富文本編輯器，集成135編輯器和秀米編輯器，使內(nèi)容編輯更加豐富，跳轉(zhuǎn)體驗(yàn)更加絲滑。再封裝成組件，使用更加快捷。
效果預(yù)覽
編輯器主界面
彈框打開(kāi)135編輯器
彈框打開(kāi)秀米編輯器
操作說(shuō)明：ueditor編輯器菜單欄集成135和秀米圖標(biāo)，點(diǎn)擊分別彈框打開(kāi)，完成編輯后內(nèi)容帶回到ueditor編輯器，另外引入了主題文件，對(duì)樣式進(jìn)行了美化。
Ueditor原始樣式如下圖：
說(shuō)實(shí)話是有點(diǎn)丑，emm…，還是10年前的圖標(biāo)樣式，這也是為什么要美化樣式的原因。
Tips：當(dāng)然也可以用網(wǎng)上的封裝組件vue-ueditor-wrap，這個(gè)用的人也比較多，文檔地址：https://hc199421.gitee.io/vue-ueditor-wrap/#/home，不過(guò)使用過(guò)程中會(huì)有一點(diǎn)小坑，這里不做過(guò)多說(shuō)明。
回到正題，本文介紹使用源碼集成方式，下面開(kāi)始教程！
教程
1. 首先下載主題美化插件
地址：https://pan.quark.cn/s/ce9519209fcd注：本次下載的即ueditor編輯器源碼，是引入主題樣式美化后的源碼。
下載完解壓后放到public文件夾下，下圖是目錄結(jié)構(gòu)（和下載的有些不一樣，圖片是已經(jīng)繼集成了135個(gè)秀米的）：
2. 接入135編輯器
地址：http://www.135plat.com/135_ueditor_plugin.html
操作參考文檔配置即可，本文省略
3. 接入秀米編輯器
地址：https://ent.xiumi.us/ue/文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-450485.html
4. 組件封裝
<div>
<script :id="id" type="text/plain"></script>
<el-dialog
:visible.sync="dialog"
:destroy-on-close="true"
:title="title"
:center="true"
:fullscreen="true">
<iframe :src="url" width="100%" :height="(fullheight - 150)+'px'"></iframe>
</el-dialog>
</div>
</template>
<script>
export default {
name: "UE",
data() {
return {
editor: null,
dialog: false,
url: '',
fullheight: document.documentElement.clientHeight,
title:'',
};
},
props: {
defaultMsg: {
type: String
},
config: {
type: Object
},
id: {
type: String
}
},
created() {
let that = this;
// ------------------秀米------------------------
window.UE.registerUI('dialog', function (editor, uiName) {
var btn = new UE.ui.Button({
name: 'xiumi-connect',
title: '秀米',
onclick: function () {
that.url = editor.ui.UEDITOR_HOME_URL+'dialogs/xiumi-ue-dialog-v5.html';
that.title = "秀米編輯器";
window.setRichText = that.setRichText;
window.getHtml = that.getUEContent;
that.dialog = true;
that.editor = editor;
}
});
return btn;
});
//------------------- 135editor-------------------------
window.UE.registerUI('135editor', function (editor, uiName) {
var btn = new UE.ui.Button({
name: 'btn-dialog-' + uiName,
className: 'edui-for-135editor',
title: '135編輯器',
onclick: function () {
that.url = editor.ui.UEDITOR_HOME_URL + 'dialogs/135EditorDialogPage.html?callback=true&appkey=';
that.title = "135編輯器";
window.setRichText = that.setRichText;
window.getHtml = that.getUEContent;
that.dialog = true;
that.editor = editor;
}
});
return btn;
});
},
mounted() {
const _this = this;
this.editor = window.UE.getEditor(this.id, this.config); // 初始化UE
this.editor.addListener("ready", function () {
_this.editor.setContent(_this.defaultMsg); // 確保UE加載完成后，放入內(nèi)容。
});
},
methods: {
setRichText(text) {
this.editor.setContent(text); // 確保UE加載完成后，放入內(nèi)容。
this.dialog = false
},
getUEContent() {
// 獲取內(nèi)容方法
return this.editor.getContent();
},
getUEContentTxt() {
// 獲取純文本內(nèi)容方法
return this.editor.getContentTxt();
},
},
destroyed() {
this.editor.destroy();
}
};
</script>
<style lang="scss" scoped>
iframe{
width: 100%;
height: 100%;
border: none!important;
}
::v-deep .el-dialog__header{
// display: none;
padding: 0;
height: 5vh;
line-height: 5vh!important;
}
::v-deep .el-dialog__body{
padding: 0;
margin: 0;
height: 95vh;
}
::v-deep .el-dialog__headerbtn {
top: 15px;
}
</style>
5. main.js引入樣式和js文件
import '../public/static/UE/ueditor.config.js'
import '../public/static/UE/ueditor.all.min.js'
import '../public/static/UE/lang/zh-cn/zh-cn.js'
import '../public/static/UE/ueditor.parse.js'
import '../public/static/UE/dialogs/xiumi-ue-dialog-v5.js'
import '../public/static/UE/dialogs/xiumi-ue-v5.css'
import '../public/static/UE/dialogs/135editor.js'
import '../public/static/UE/dialogs/135-ue-v5.css'
import '../public/static/UE/themes/default/css/ueditor.css'
6. 頁(yè)面使用
//模板
<UE :defaultMsg="form.noticeContent" :config="config" ref="ue" :id="ue1" ></UE>
//引入
import UE from "@/components/Ueditor/index";
//注冊(cè)
components: { UE }
//data數(shù)據(jù)定義
form: {
noticeContent:''
},
config: {
initialFrameWidth: null,
initialFrameHeight: 280
},
ue1: "ue1", // 每個(gè)編輯器有不同的id
完成！
??文末福利：搜索公眾號(hào)【前端二次元】回復(fù)關(guān)鍵字「前端資料」，領(lǐng)取前端系統(tǒng)課程，涵蓋前端所有內(nèi)容。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-450485.html
到了這里，關(guān)于vue項(xiàng)目百度ueditor編輯器集成135和秀米，主題圖標(biāo)美化的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
