wangeditor設置圖片寬高默認有30%、50%、100%三種等比縮放選擇，但是有的時候需要按照像素控制圖片大小不在乎圖片是否有拉伸的情況。所以只能編寫設置圖片寬高的自定義擴展。
1、設置圖片大小最好就是與原生一樣放置到選中工具欄上最合適，且因為要設置寬高兩種屬性所以用彈窗嵌套表格方便填寫。
2、查看官方文檔，有相關的説明，因為不需要事件劫持和創建新元素，所以看註冊新菜單這裏就行。如下官方文檔裏有ModalMenu的説明，直接查看使用方式即可。
3、按照官方文檔編寫一個定義菜單 class，這邊為了方便後續添加其他擴展可以新建一個js文件每定義一個擴展就添加一個class再寫好註釋。
在官方的demo(wangEditor extend modal menu)樣例中插件是使用在工具欄上的，其實在選中工具欄上也是可以使用的但是會有一些小變化，這個之後再講。
在class裏有一個getModalContentElem方法，裏面可以設置彈窗顯示的dom和dom的事件監聽，可以如下設置：
首先添加自定義的dom，顯示寬度高度input框並添加確定按鈕，因為彈窗默認有右上角的關閉所以這邊沒有添加取消的按鈕，這個按需求來即可。
const content = document.createElement('div')
content.innerHTML = `
<form>
<div style="display: flex;align-items: center;">
寬度：<input id="width" placeholder="寬度" style="width: 180px;height: 2em;text-indent: 0.5em;" /> px
</div>
<div style="display: flex;align-items: center;">
高度：<input id="height" placeholder="高度" style="width: 180px;height: 2em;text-indent: 0.5em;" /> px
</div>
</form>
`
const button = document.createElement('span')
button.style.padding = '5px 10px';
button.style.border = '1px solid #ccc';
button.style.borderRadius = '5px';
button.style.cursor = 'pointer';
button.style.margin = '10px 0 0 3em';
button.innerHTML = '確定'
content.appendChild(button)然後可以添加按鈕的點擊事件，要設置圖片寬高可以使用SlateTransforms.setNodes方法
但是當你選中圖片打開彈窗會發現圖片的選中效果已經移除了，而setNodes方法是設置選中節點的屬性，所以需要先執行恢復選中父節點的方法，再調用setNodes方法。
button.onclick = () => {
const width = content.querySelector('#width').value
const height = content.querySelector('#height').value
// 選中圖片父節點
editor.restoreSelection()
// 設置寬高
SlateTransforms.setNodes(editor, {
style: {
width: `${width}px`,
height: `${height}px`,
},
}, {
// 添加match否則樣式添加到圖片父節點上
match: (node) => {
if (SlateElement.isElement(node)) {
if (node.type === 'image') {
return true // 匹配 image
}
}
return false
},
})
}這樣就差最後一步返回content了
PS：也可以把 $content 緩存下來，這樣不用每次重複創建、重複綁定事件，優化性能
到這裏 getModalContentElem就寫完了
4、按照文檔下一步註冊菜單到 wangEditor(
5、插入菜單到工具欄，就是註冊到懸浮菜單 hoverbarKeys，可以如下配置：
imageSize就是我取的擴展key
editorConfig: {
placeholder: "請輸入內容...",
MENU_CONF: ["uploadImage","uploadAttachment"],
hoverbarKeys: {
image: {
menuKeys: [
'imageWidth30',
'imageWidth50',
'imageWidth100',
'imageSize',
'editImage',
'viewImageLink',
'deleteImage',
],
},
},
},好了，至此整個擴展基礎就講完了。
