百度编辑器ueditor自定义增加一个菜单按钮，并实现与父级组件通信
项目中，已实现封装百度编辑器组件。这里，是为了增加支持自定义插入商品等服务功能。
新增自定义按钮，实现与父级组件通信
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
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('我是新增按扭在被点击时执行的方法，在这里可以编写你想要实现的功能哦！'); } }); }); } } |
父级组件实现选择商品等服务，并插入到编辑器中
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 |
<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> |
原创文章，作者：seabert，如若转载，请注明出处：https://bysjb.cn/ueditor-add-menu.html