wangeditor 链接图片
时间: 2025-06-28 20:03:47 浏览: 10
### 实现带有链接的图片插入功能
为了在 WangEditor 中实现带有链接的图片插入功能,可以通过自定义菜单项来完成这一需求。下面展示了具体的实现方法。
#### 创建自定义按钮并绑定事件处理函数
通过扩展 `customConfig.menus` 属性来自定义编辑器顶部工具栏中的选项,并为新添加的项目指定点击后的行为逻辑:
```javascript
var E = window.wangEditor;
editor = new E('#div1');
editor.customConfig.menus = [
// ...其他默认菜单...
'insertLinkImage' // 新增一个名为 insertLinkImage 的菜单项用于插入带链接的图片
];
editor.create();
// 定义当用户选择 "insertLinkImage" 菜单项时触发的动作
editor.config.onchange = function (newHtml) {
console.log('html changed:', newHtml);
};
document.querySelector('.w-e-menu.insertLinkImage').onclick = function () {
var imageUrl = prompt("请输入图片URL:");
var linkUrl = prompt("请输入链接地址:");
if (!imageUrl || !linkUrl) return;
const imgTagWithLink = `<a href="${linkUrl}" target="_blank"><img src="${imageUrl}"></a>`;
editor.cmd.do('insertHTML', imgTagWithLink);
};
```
上述代码片段实现了如下功能:当用户点击新增加到工具条上的 “insertLinkImage” 按钮后会弹出两个输入框分别用来获取要插入的图片 URL 和目标链接;接着构建了一个包含这两个信息在内的 HTML 字符串并通过命令接口将其插入光标所在位置[^1]。
#### 配置样式与国际化支持
如果希望进一步优化用户体验,则可以考虑调整一些外观属性以及提供多语言的支持:
```javascript
mounted(){
this.editor.customConfig.colors = ["#000000","#333333"];
this.editor.customConfig.fontNames = ["PingFangSC"];
this.editor.customConfig.lang = {
'设置标题':'title',
'正文':'p',
'链接文字':'link text',
'链接':'link',
'上传图片':'upload image',
'上传':'upload',
'创建':'init'
};
}
```
这段配置允许开发者修改内置的颜色列表、字体名称集合,并且能够更改界面上显示的文字内容以便适应不同地区的使用者习惯[^3]。
阅读全文
相关推荐


















