从媒体库上传图片
如果想要从媒体库上传图片,可配置如下代码:
注意: 当同时配置了媒体库上传和本地上传功能时,本地上传会失效。
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>