wangeditor富文本编辑器拓展菜单——全屏

参考快速扩展一个菜单 · wangEditor 用户文档

继承 按钮 菜单样式自定义拓展 全屏功能菜单按钮

const _this = this
const { $, BtnMenu } = E

// 自定义 全屏 菜单继承 BtnMenu class
class FullScreen extends BtnMenu {
  constructor(editor) {
    // data-title属性表示当鼠标悬停在该按钮上时提示该按钮的功能简述
    const $elem = E.$(
      `<div class="w-e-menu" data-title="全屏">
          <i class="el-icon-full-screen"></i>
      </div>`
    )
    super($elem, editor)
  }
  // 菜单点击事件
  clickHandler() {
    _this.toggleFullscreen(`#${_this.index}`) //toggleFullscreen()需要传入全屏组件的id
  }
  // 菜单是否被激活（如果不需要，这个函数可以空着）
  tryChangeActive() {}
}

// 注册菜单
E.registerMenu('FullScreen', FullScreen)

/**
* @description: 富文本编辑器全屏
* @param editorSelector
* @return void
*/
toggleFullscreen(editorSelector) {
  $(editorSelector).toggleClass('fullscreen-editor')
},

最后

以上就是甜美高跟鞋为你收集整理的wangeditor富文本编辑器拓展菜单——全屏的全部内容，希望文章能够帮你解决wangeditor富文本编辑器拓展菜单——全屏所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。