从媒体库上传图片
- 例子

从媒体库上传图片

如果想要从媒体库上传图片，可配置如下代码：

注意: 当同时配置了媒体库上传和本地上传功能时，本地上传会失效。

editor.config.uploadImgFromMedia = function () {
  // 1.调用自己的媒体库并显示UI页面方法
  // ...
  // 2.将媒体库返回的图片地址插入到编辑器中,假设imgUrl为媒体返回的图片地址变量
  editor.cmd.do( 'insertHTML', `<img src="${imgUrl}" style="max-width:100%;"/>` )
}

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>wangEditor</title>
    <style>
    </style>
</head>
<body>
    <p>
        wangEditor demo
    </p>
    <div id="div1">
        <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
        <p>
            <img src="http://www.wangeditor.com/imgs/logo.jpeg" />
        </p>
    </div>
    <script src="../dist/wangEditor.js"></script>
    <script>
        var E = window.wangEditor
        var editor = new E('#div1')
        editor.config.uploadImgFromMedia = function () {
          // 做调起媒体库UI等的自定义方法
          // 举个栗子，假设通过confirm方法来模拟调用媒体库
          const img = confirm('调用媒体库')
          if (img) {
            const imgUrl = 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png'
            // 通过editor.cmd.do方法将媒体库回调的链接插入编辑器内
            editor.cmd.do(
              'insertHTML',
              `<img src="${imgUrl}" style="max-width:100%;"/>`
            )
          } else {
            console.log('cancel')
          }
        }
        editor.create()
    </script>
</body>
</html>