百度编辑器ueditor自定义增加一个菜单按钮，并实现与父级组件通信

宋小羽 • 2022年1月3日 am9:49 • 教程文档 • 276 阅读

项目中，已实现封装百度编辑器组件。这里，是为了增加支持自定义插入商品等服务功能。

新增自定义按钮，实现与父级组件通信

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('我是新增按扭在被点击时执行的方法，在这里可以编写你想要实现的功能哦！');
          }
        });
      });
    }
}

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>

100

101

102

103

104

105

106

107

108

109

<div>

<url-picker :formData="menuRow" field="url" visibleField="urlVisible" @onSelectSuccess="onSelectSuccess"/>

</div>

</template>

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>

.edui-default .edui-toolbar {

line-height: initial;

}

</style>

这些信息可能会帮助到你：关于我们 | 侵权删除 | 捐赠支持

优惠推广：外卖红包天天领，下单享返钱奖励～
文章名称：百度编辑器ueditor自定义增加一个菜单按钮，并实现与父级组件通信
文章链接：https://www.bysjb.cn/ueditor-add-menu.html

THE END

二维码

打赏

云服务器设置ssh密钥登录

< <上一篇

git使用ssh方式连接Github远程仓库

下一篇>>

搜索内容

百度编辑器ueditor自定义增加一个菜单按钮，并实现与父级组件通信

新增自定义按钮，实现与父级组件通信

父级组件实现选择商品等服务，并插入到编辑器中

取消回复

共有 0 条评论

搜索

目录