wangEditor customBrowseAndUpload自定义选择图片

如果你不想使用 wangEditor 自带的选择文件功能，例如你有自己的图床，或者图片选择器。
可以通过 customBrowseAndUpload 来自己实现选择图片、上传图片，并插入图片。

 以下是官方的使用方法，但是获取图片与url这一系列操作都还是需要在这里面进行操作，这个与

customUpload

 他的区别就是可以自定义点击事件，弹出自己的图床等。

    // 自定义选择图片
    customBrowseAndUpload(insertFn: InsertFnType) {   // TS 语法
    // customBrowseAndUpload(insertFn) {              // JS 语法
        // 自己选择文件
        // 自己上传文件，并得到图片 url alt href
        // 最后插入图片
        insertFn(url, alt, href)
    }

 若想插入图片就需要用到另外一个api

insertNode

以下是官方的参考代码，即模糊又清晰的

const node = { type: 'paragraph', children: [{ text: 'simple text' }] }// 需要相关的参数
editor.insertNode(node) // 需要获取节点

详细的节点数据结构，可以直接查看源码中 type 定义，根据官方的type定义即可

然后就是获取相关节点并且插入了。这对于我来说算是一个小坑，最开始我以为需要引入东西，一直获取不到editor，一直undeined。结果后面才知道是需要获取节点。

    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editorRef"
      :editorId="editorId"
      :defaultConfig="toolbarConfig"
      ref="editorData"
      :mode="mode"
    />
  editorData这个很重要

const editorData = ref(null);
// 插入图片节点
const insertButton = () => {
  const node = {
    type: "image",
    src:url,
    style: { with: "", height: "" },
    children: [{ text: "" }],
  };
  editorData.value.editor.insertNode(node);//这种即可获取到相关东西
};

这样就能插入需求所需要的图片啦