wangeditor的onInsertedImage怎么用
时间: 2023-07-08 14:54:01 浏览: 26
"wangeditor" 的 "onInsertedImage" 事件回调函数可以通过以下方式进行使用:
1. 在 "wangeditor" 的初始化配置中添加 "onInsertedImage" 事件回调函数:
```
var editor = new wangEditor('editor');
editor.config.onInsertedImage = function (result) {
// 处理图片插入事件
console.log(result);
};
editor.create();
```
2. 在 "wangeditor" 实例对象中添加 "onInsertedImage" 事件回调函数:
```
var editor = new wangEditor('editor');
editor.create();
editor.onInsertedImage = function (result) {
// 处理图片插入事件
console.log(result);
};
```
在上述代码中,当用户在编辑器中插入一张图片时,"onInsertedImage" 事件回调函数会被触发执行,函数的参数 result 包含了插入的图片相关信息,例如:图片地址、图片大小、图片标题等等。开发者可以根据自己的需求进行操作处理。
相关问题
wangeditor的onInsertedImage
"wangeditor" 是一个基于 web 技术开发的富文本编辑器,提供了许多 API 接口供开发者使用。其中,"onInsertedImage" 是一个事件回调函数,当用户在编辑器中插入一张图片时,该函数会被触发执行。开发者可以通过该事件回调函数来进行一些额外的操作,例如:图片上传、图片大小控制、图片水印添加等等。
vue2的wangeditor的onInsertedImage怎么用
在 Vue2 中使用 "wangeditor" 的 "onInsertedImage" 事件回调函数需要注意一些细节。下面是一种常见的做法:
1. 在 Vue 组件中引入 "wangeditor" 和 jQuery 库:
```
import wangEditor from 'wangeditor';
import $ from 'jquery';
```
2. 在 Vue 组件的 "mounted" 生命周期函数中初始化 "wangeditor" 编辑器,并添加 "onInsertedImage" 事件回调函数:
```
mounted() {
let editor = new wangEditor(this.$refs.editor);
editor.config.onInsertedImage = function (result) {
let $img = $(result.img);
$img.attr('alt', result.title); // 设置图片 alt 属性
$img.attr('title', result.title); // 设置图片 title 属性
// 处理图片插入事件
console.log(result);
};
editor.create();
}
```
在上述代码中,我们在 "mounted" 生命周期函数中初始化 "wangeditor" 编辑器,并在 "config" 中添加 "onInsertedImage" 事件回调函数。当用户在编辑器中插入一张图片时,该函数会被触发执行,函数的参数 result 包含了插入的图片相关信息。在函数中,我们可以通过 jQuery 库来对插入的图片进行一些额外的操作,例如:添加 alt 和 title 属性等等。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)