百度编辑器ueditor自定义增加一个菜单按钮,并实现与父级组件通信
项目中,已实现封装百度编辑器组件。这里,是为了增加支持自定义插入商品等服务功能。
新增自定义按钮,实现与父级组件通信
initEditor () {
let that = this
window.UE.registerUI('goodsmenu', function (editor, uiName) {
return new window.UE.ui.Button({
name: uiName,
title: '服务', // 这里是设置当鼠标指向这个按扭时显示的文字
cssRules: "background-position: -550px 44px;",
onclick: function () {
// todo 这里使用that.emit传递,父组件无法接收到抛出事件??
// todo 或者是that.parent不起作用 建议都试一下
// that.parent.ueditorMenuOpen()
that.$emit('ueditorMenuOpen')
// alert('我是新增按扭在被点击时执行的方法,在这里可以编写你想要实现的功能哦!');
}
});
});
}
}
父级组件实现选择商品等服务,并插入到编辑器中
<template>
<div>
<!-- 百度编辑器vue组件 -->
<VueUEditor :ueditorPath="ueditorPath" style="height: 520px" :ueditorConfig="ueditorConfig" @ready="ueditorReady"></VueUEditor>
<!-- 商品等服务组件 -->
<url-picker :formData="menuRow" field="url" visibleField="urlVisible" @onSelectSuccess="onSelectSuccess"/>
</div>
</template>
<script>
import VueUEditor from 'vue-ueditor';
import UrlPicker from '@/components/UeditorUrlPicker/'
export default {
name: "UEditor",
data() {
return {
ueditorPath : 'http://localhost:8082/ueditor/',
ueditorConfig: {
'UEDITOR_HOME_URL': 'https://localhost:8082/ueditor/',
'serverUrl': "https://localhost:8082/ueditor-upload-pic",
'toolbars': []
},
ue: false,
enter: false,
// serverUrl: "http://duoyunzhushou.me/core/ueditor/index?i=1"
//单个服务
menuRow: {
url: {},
urlVisible: false
},
}
},
props: {
ueditorContent: String,
content: String,
visible: {
type: Boolean,
default: false
}
},
computed: {
},
watch: {
ueditorContent: function (newval, oldval) {
// console.log(newval);
if(!this.enter && this.ue) {
this.ue.setContent(newval);
}
},
visible: function (newval, oldval) {
// 解决多次连续打开百度编辑器,编辑器中内容不进行替换的问题
console.log('visible', newval,oldval)
if (newval) {
// console.log(this.ueditorContent, newval,oldval)
// this.ue.setContent(this.content);
// this.enter = false
}
this.enter = false
},
},
methods: {
ueditorReady(ue) {
const _this = this;
this.ue = ue;
// console.log('ueditorReady', ue)
ue.setContent(this.ueditorContent)
ue.addListener('contentChange', () => {
_this.enter = true;
_this.$emit('update:ueditorContent', ue.getContent())
})
},
ueditorContentSet(content) {
const _this = this;
_this.ue.execCommand('insertHtml', content);
// this.menuRow = {
// url: {},
// urlVisible: false
// }
},
onSelectSuccess() {
// console.log('onSelectSuccess', this.menuRow)
let data = this.menuRow.url
// 将服务内容 插入到编辑器中
let content = '<p></p>'
this.ueditorContentSet(content)
// this.menuRow.urlVisible = false
},
// 打开服务菜单
ueditorMenuOpen() {
console.log('ueditorMenuOpen', this.menuRow)
this.menuRow.urlVisible = true
},
},
components: {
VueUEditor, UrlPicker
}
}
</script>
<style lang="scss">
.edui-default .edui-toolbar {
line-height: initial;
}
</style>
这些信息可能会帮助到你: 关于我们 | 饿了么返钱 | 捐赠支持
文章名称:百度编辑器ueditor自定义增加一个菜单按钮,并实现与父级组件通信文章链接:https://www.bysjb.cn/ueditor-add-menu.html
THE END
二维码
打赏
共有 0 条评论