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

丶扁扁的糖是扁的

已于 2022-09-16 10:43:52 修改

阅读量3.7k

点赞数 3

分类专栏： Js 文章标签： javascript 前端

于 2022-01-05 20:22:35 首次发布

本文链接：https://blog.csdn.net/sugerinaflat/article/details/122331169

版权

Js 专栏收录该内容

53 篇文章 2 订阅

订阅专栏

参考快速扩展一个菜单 · 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')
},