wangeditor5自定义扩展设置图片宽高（px）

​

wangeditor设置图片宽高默认有30%、50%、100%三种等比缩放选择，但是有的时候需要按照像素控制图片大小不在乎图片是否有拉伸的情况。所以只能编写设置图片宽高的自定义扩展。

​编辑

1、设置图片大小最好就是与原生一样放置到选中工具栏上最合适，且因为要设置宽高两种属性所以用弹窗嵌套表格方便填写。

2、查看官方文档，有相关的说明，因为不需要事件劫持和创建新元素，所以看注册新菜单这里就行。如下官方文档里有ModalMenu的说明，直接查看使用方式即可。

 

​编辑

3、按照官方文档编写一个定义菜单 class，这边为了方便后续添加其他扩展可以新建一个js文件每定义一个扩展就添加一个class再写好注释。

在官方的demo(wangEditor extend modal menu)样例中插件是使用在工具栏上的，其实在选中工具栏上也是可以使用的但是会有一些小变化，这个之后再讲。​编辑

在class里有一个getModalContentElem方法，里面可以设置弹窗显示的dom和dom的事件监听，可以如下设置：

首先添加自定义的dom，显示宽度高度input框并添加确定按钮，因为弹窗默认有右上角的关闭所以这边没有添加取消的按钮，这个按需求来即可。

const content = document.createElement('div')
    content.innerHTML = `
      <form>
        <div style="display: flex;align-items: center;">
          宽度：<input id="width" placeholder="宽度" style="width: 180px;height: 2em;text-indent: 0.5em;" />&nbsp;px
        </div>
        <div style="display: flex;align-items: center;">
          高度：<input id="height" placeholder="高度" style="width: 180px;height: 2em;text-indent: 0.5em;" />&nbsp;px
        </div>
      </form>
    `
    const button = document.createElement('span')
    button.style.padding = '5px 10px';
    button.style.border = '1px solid #ccc';
    button.style.borderRadius = '5px';
    button.style.cursor = 'pointer';
    button.style.margin = '10px 0 0 3em';
    button.innerHTML = '确定'
    content.appendChild(button)

然后可以添加按钮的点击事件，要设置图片宽高可以使用SlateTransforms.setNodes方法

​编辑

但是当你选中图片打开弹窗会发现图片的选中效果已经移除了，而setNodes方法是设置选中节点的属性，所以需要先执行恢复选中父节点的方法，再调用setNodes方法。

button.onclick = () => {
      const width = content.querySelector('#width').value
      const height = content.querySelector('#height').value
      // 选中图片父节点
      editor.restoreSelection()
      // 设置宽高
      SlateTransforms.setNodes(editor, {
        style: {
          width: `${width}px`,
          height: `${height}px`,
        },
      }, {
        // 添加match否则样式添加到图片父节点上
        match: (node) => {
          if (SlateElement.isElement(node)) {
            if (node.type === 'image') {
              return true // 匹配 image
            }
          }
          return false
        },
      })
    }

这样就差最后一步返回content了

PS：也可以把 $content 缓存下来，这样不用每次重复创建、重复绑定事件，优化性能

到这里 getModalContentElem就写完了

4、按照文档下一步注册菜单到 wangEditor(自定义扩展新功能 | wangEditor)，这里按原文配置即可。

5、插入菜单到工具栏，就是注册到悬浮菜单 hoverbarKeys，可以如下配置：

imageSize就是我取的扩展key

editorConfig: {
        placeholder: "请输入内容...",
        MENU_CONF: ["uploadImage","uploadAttachment"],
        hoverbarKeys: {
          image: {
            menuKeys: [
              'imageWidth30',
              'imageWidth50',
              'imageWidth100',
              'imageSize',
              'editImage',
              'viewImageLink',
              'deleteImage',
            ],
          },
        },
      },

好了，至此整个扩展基础就讲完了。

​