wangEditor中禁用图片编辑功能的实现方案

wangEditor作为一款功能强大的富文本编辑器，提供了丰富的图片编辑功能。但在某些特定场景下，开发者可能需要禁用这些图片编辑功能，例如当需要将编辑器内容转换为Markdown格式时，图片的尺寸和链接信息可能不会被保留。

问题背景

在将wangEditor生成的HTML内容转换为Markdown格式时，图片的编辑功能（如调整尺寸、设置链接等）可能变得不必要，因为这些属性在Markdown中不会被保留。开发者希望找到一种方法来禁用点击图片后弹出的编辑工具栏。

解决方案

wangEditor提供了灵活的配置选项，可以通过设置hoverbarKeys属性来控制悬浮工具栏的显示内容。要禁用图片的编辑功能，可以按照以下方式配置编辑器：

const editorConfig: Partial<IEditorConfig> = {
  hoverbarKeys: {
    image: {
      menuKeys: [], // 设置为空数组即可禁用图片编辑工具栏
    },
  }
}

实现原理

wangEditor的悬浮工具栏是通过hoverbarKeys配置项来控制的。这个配置项允许开发者自定义不同类型元素（如文本、图片、表格等）的悬浮工具栏内容。

• hoverbarKeys是一个对象，键名为元素类型
• 每个元素类型可以配置menuKeys数组，定义要显示的菜单项
• 将image的menuKeys设置为空数组，即可完全禁用图片的悬浮工具栏

扩展知识

除了完全禁用图片编辑功能外，wangEditor还支持更精细的控制。例如，如果只想禁用部分图片编辑功能，可以保留某些菜单项：

const editorConfig: Partial<IEditorConfig> = {
  hoverbarKeys: {
    image: {
      menuKeys: ['viewImageLink', 'editImageSize'], // 只保留查看图片链接和编辑尺寸功能
    },
  }
}

常见的图片编辑菜单项包括：

• viewImageLink：查看图片链接
• editImageLink：编辑图片链接
• editImageSize：编辑图片尺寸
• editImageAlt：编辑图片alt文本
• deleteImage：删除图片

注意事项

1. 此配置需要在编辑器初始化时传入
2. 配置修改后需要重新创建编辑器实例才能生效
3. 禁用编辑功能后，用户仍可以通过其他方式（如直接修改HTML）调整图片属性
4. 在React中使用时，注意通过defaultConfig或mode属性传递配置

通过这种灵活的配置方式，开发者可以根据实际需求精确控制wangEditor的功能展示，打造更符合业务场景的编辑体验。