首页 › 前端开发综合论坛 › wangeditor5自定义扩展设置图片宽高（px）

七她姥 發表於 2026-2-3 16:25:00

wangeditor5自定义扩展设置图片宽高（px）

<span data-cke-copybin-start="1"><span data-cke-copybin-start="1">​</span></span>
<p>wangeditor设置图片宽高默认有30%、50%、100%三种等比缩放选择，但是有的时候需要按照像素控制图片大小不在乎图片是否有拉伸的情况。所以只能编写设置图片宽高的自定义扩展。</p>
<p><span class="cke_widget_wrapper cke_widget_inline cke_widget_image cke_image_nocaption cke_widget_selected" data-cke-display-name="图像" data-cke-filter="off" data-cke-widget-id="8" data-cke-widget-wrapper="1"><img width="876" height="733" class="cke_widget_element lazyload" src="https://i-blog.csdnimg.cn/direct/a17ac8016e9c425a8c25ded84536e8c4.png" data-cke-widget-data="%7B%22hasCaption%22%3Afalse%2C%22src%22%3A%22https%3A%2F%2Fi-blog.csdnimg.cn%2Fdirect%2Fa17ac8016e9c425a8c25ded84536e8c4.png%22%2C%22alt%22%3A%22%22%2C%22width%22%3A%22876%22%2C%22height%22%3A%22733%22%2C%22lock%22%3Atrue%2C%22align%22%3A%22none%22%2C%22classes%22%3Anull%7D" data-cke-widget-keep-attr="0" data-cke-widget-upcasted="1" data-widget="image" data-src="https://i-blog.csdnimg.cn/direct/a17ac8016e9c425a8c25ded84536e8c4.png"><span class="cke_reset cke_widget_drag_handler_container"><img width="15" height="15" class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" data-cke-widget-drag-handler="1" data-src="https://img2024.cnblogs.com/blog/2265319/202602/2265319-20260203162525307-1123179497.gif"><span class="cke_image_resizer" title="点击并拖拽以改变尺寸">​<span class="cke_widget_edit_container" title="编辑图片">编辑</span></span></span></span></p>
<p>1、设置图片大小最好就是与原生一样放置到选中工具栏上最合适，且因为要设置宽高两种属性所以用弹窗嵌套表格方便填写。</p>
<p>2、查看官方文档，有相关的说明，因为不需要事件劫持和创建新元素，所以看注册新菜单这里就行。如下官方文档里有ModalMenu的说明，直接查看使用方式即可。</p>
<p>&nbsp;</p>
<p><span class="cke_widget_wrapper cke_widget_inline cke_widget_image cke_image_nocaption cke_widget_selected" data-cke-display-name="图像" data-cke-filter="off" data-cke-widget-id="7" data-cke-widget-wrapper="1"><img alt="" width="495" height="1200" class="cke_widget_element lazyload" src="https://i-blog.csdnimg.cn/direct/adb876ab1ab3419a979ebd178a99804a.png" data-cke-widget-data="%7B%22hasCaption%22%3Afalse%2C%22src%22%3A%22https%3A%2F%2Fi-blog.csdnimg.cn%2Fdirect%2Fadb876ab1ab3419a979ebd178a99804a.png%22%2C%22alt%22%3A%22%22%2C%22width%22%3A%22495%22%2C%22height%22%3A%221200%22%2C%22lock%22%3Atrue%2C%22align%22%3A%22none%22%2C%22classes%22%3Anull%7D" data-cke-widget-keep-attr="0" data-cke-widget-upcasted="1" data-widget="image" data-src="https://i-blog.csdnimg.cn/direct/adb876ab1ab3419a979ebd178a99804a.png"><span class="cke_reset cke_widget_drag_handler_container"><img width="15" height="15" class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" data-cke-widget-drag-handler="1" data-src="https://img2024.cnblogs.com/blog/2265319/202602/2265319-20260203162525307-1123179497.gif"><span class="cke_image_resizer" title="点击并拖拽以改变尺寸">​<span class="cke_widget_edit_container" title="编辑图片">编辑</span></span></span></span></p>
<p>3、按照官方文档编写一个定义菜单 class，这边为了方便后续添加其他扩展可以新建一个js文件每定义一个扩展就添加一个class再写好注释。</p>
<p>在官方的demo<span class="cke_widget_wrapper cke_widget_inline cke_widget_csdnlink cke_widget_selected" data-cke-display-name="a" data-cke-filter="off" data-cke-widget-id="6" data-cke-widget-wrapper="1">(wangEditor extend modal menu)样例中插件是使用在工具栏上的，其实在选中工具栏上也是可以使用的但是会有一些小变化，这个之后再讲。<span class="cke_widget_wrapper cke_widget_inline cke_widget_image cke_image_nocaption cke_widget_selected" data-cke-display-name="图像" data-cke-filter="off" data-cke-widget-id="5" data-cke-widget-wrapper="1"><img alt="" width="700" height="445" class="cke_widget_element lazyload" src="https://i-blog.csdnimg.cn/direct/e8507ec8a1f6401abd2090bc64524134.png" data-cke-widget-data="%7B%22hasCaption%22%3Afalse%2C%22src%22%3A%22https%3A%2F%2Fi-blog.csdnimg.cn%2Fdirect%2Fe8507ec8a1f6401abd2090bc64524134.png%22%2C%22alt%22%3A%22%22%2C%22width%22%3A%22700%22%2C%22height%22%3A%22445%22%2C%22lock%22%3Atrue%2C%22align%22%3A%22none%22%2C%22classes%22%3Anull%7D" data-cke-widget-keep-attr="0" data-cke-widget-upcasted="1" data-widget="image" data-src="https://i-blog.csdnimg.cn/direct/e8507ec8a1f6401abd2090bc64524134.png"><span class="cke_reset cke_widget_drag_handler_container"><img width="15" height="15" class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" data-cke-widget-drag-handler="1" data-src="https://img2024.cnblogs.com/blog/2265319/202602/2265319-20260203162525307-1123179497.gif"><span class="cke_image_resizer" title="点击并拖拽以改变尺寸">​<span class="cke_widget_edit_container" title="编辑图片">编辑</span></span></span></span></span></p>
<p>在class里有一个getModalContentElem方法，里面可以设置弹窗显示的dom和dom的事件监听，可以如下设置：</p>
<p>首先添加自定义的dom，显示宽度高度input框并添加确定按钮，因为弹窗默认有右上角的关闭所以这边没有添加取消的按钮，这个按需求来即可。</p>
<div class="cke_widget_wrapper cke_widget_block cke_widget_codeSnippet cke_widget_selected" data-cke-display-name="代码段" data-cke-filter="off" data-cke-widget-id="4" data-cke-widget-wrapper="1">
<pre class="cke_widget_element" data-cke-widget-data="%7B%22lang%22%3A%22javascript%22%2C%22code%22%3A%22const%20content%20%3D%20document.createElement('div')%5Cn%20%20%20%20content.innerHTML%20%3D%20%60%5Cn%20%20%20%20%20%20%3Cform%3E%5Cn%20%20%20%20%20%20%20%20%3Cdiv%20style%3D%5C%22display%3A%20flex%3Balign-items%3A%20center%3B%5C%22%3E%5Cn%20%20%20%20%20%20%20%20%20%20%E5%AE%BD%E5%BA%A6%EF%BC%9A%3Cinput%20id%3D%5C%22width%5C%22%20placeholder%3D%5C%22%E5%AE%BD%E5%BA%A6%5C%22%20style%3D%5C%22width%3A%20180px%3Bheight%3A%202em%3Btext-indent%3A%200.5em%3B%5C%22%20%2F%3E%26nbsp%3Bpx%5Cn%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%5Cn%20%20%20%20%20%20%20%20%3Cdiv%20style%3D%5C%22display%3A%20flex%3Balign-items%3A%20center%3B%5C%22%3E%5Cn%20%20%20%20%20%20%20%20%20%20%E9%AB%98%E5%BA%A6%EF%BC%9A%3Cinput%20id%3D%5C%22height%5C%22%20placeholder%3D%5C%22%E9%AB%98%E5%BA%A6%5C%22%20style%3D%5C%22width%3A%20180px%3Bheight%3A%202em%3Btext-indent%3A%200.5em%3B%5C%22%20%2F%3E%26nbsp%3Bpx%5Cn%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%5Cn%20%20%20%20%20%20%3C%2Fform%3E%5Cn%20%20%20%20%60%5Cn%20%20%20%20const%20button%20%3D%20document.createElement('span')%5Cn%20%20%20%20button.style.padding%20%3D%20'5px%2010px'%3B%5Cn%20%20%20%20button.style.border%20%3D%20'1px%20solid%20%23ccc'%3B%5Cn%20%20%20%20button.style.borderRadius%20%3D%20'5px'%3B%5Cn%20%20%20%20button.style.cursor%20%3D%20'pointer'%3B%5Cn%20%20%20%20button.style.margin%20%3D%20'10px%200%200%203em'%3B%5Cn%20%20%20%20button.innerHTML%20%3D%20'%E7%A1%AE%E5%AE%9A'%5Cn%20%20%20%20content.appendChild(button)%22%2C%22classes%22%3Anull%7D" data-cke-widget-keep-attr="0" data-cke-widget-upcasted="1" data-widget="codeSnippet"><code class="language-javascript hljs"><span class="hljs-keyword">const content = <span class="hljs-variable language_">document.<span class="hljs-title function_">createElement(<span class="hljs-string">'div')
    content.<span class="hljs-property">innerHTML = <span class="hljs-string">`
      &lt;form&gt;
      &lt;div style="display: flex;align-items: center;"&gt;
          宽度：&lt;input id="width" placeholder="宽度" style="width: 180px;height: 2em;text-indent: 0.5em;" /&gt;&amp;nbsp;px
      &lt;/div&gt;
      &lt;div style="display: flex;align-items: center;"&gt;
          高度：&lt;input id="height" placeholder="高度" style="width: 180px;height: 2em;text-indent: 0.5em;" /&gt;&amp;nbsp;px
      &lt;/div&gt;
      &lt;/form&gt;
    `
    <span class="hljs-keyword">const button = <span class="hljs-variable language_">document.<span class="hljs-title function_">createElement(<span class="hljs-string">'span')
    button.<span class="hljs-property">style.<span class="hljs-property">padding = <span class="hljs-string">'5px 10px';
    button.<span class="hljs-property">style.<span class="hljs-property">border = <span class="hljs-string">'1px solid #ccc';
    button.<span class="hljs-property">style.<span class="hljs-property">borderRadius = <span class="hljs-string">'5px';
    button.<span class="hljs-property">style.<span class="hljs-property">cursor = <span class="hljs-string">'pointer';
    button.<span class="hljs-property">style.<span class="hljs-property">margin = <span class="hljs-string">'10px 0 0 3em';
    button.<span class="hljs-property">innerHTML = <span class="hljs-string">'确定'
    content.<span class="hljs-title function_">appendChild(button)</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code></pre>
<span class="cke_reset cke_widget_drag_handler_container"><img width="15" height="15" class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" data-cke-widget-drag-handler="1" data-src="https://img2024.cnblogs.com/blog/2265319/202602/2265319-20260203162525307-1123179497.gif"></span></div>
<p>然后可以添加按钮的点击事件，要设置图片宽高可以使用SlateTransforms.setNodes方法</p>
<p><span class="cke_widget_wrapper cke_widget_inline cke_widget_image cke_image_nocaption cke_widget_selected" data-cke-display-name="图像" data-cke-filter="off" data-cke-widget-id="3" data-cke-widget-wrapper="1"><img alt="" width="1192" height="559" class="cke_widget_element lazyload" src="https://i-blog.csdnimg.cn/direct/31106c9f98b248caa4cc64a122995f9c.png" data-cke-widget-data="%7B%22hasCaption%22%3Afalse%2C%22src%22%3A%22https%3A%2F%2Fi-blog.csdnimg.cn%2Fdirect%2F31106c9f98b248caa4cc64a122995f9c.png%22%2C%22alt%22%3A%22%22%2C%22width%22%3A%221192%22%2C%22height%22%3A%22559%22%2C%22lock%22%3Atrue%2C%22align%22%3A%22none%22%2C%22classes%22%3Anull%7D" data-cke-widget-keep-attr="0" data-cke-widget-upcasted="1" data-widget="image" data-src="https://i-blog.csdnimg.cn/direct/31106c9f98b248caa4cc64a122995f9c.png"><span class="cke_reset cke_widget_drag_handler_container"><img width="15" height="15" class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" data-cke-widget-drag-handler="1" data-src="https://img2024.cnblogs.com/blog/2265319/202602/2265319-20260203162525307-1123179497.gif"><span class="cke_image_resizer" title="点击并拖拽以改变尺寸">​<span class="cke_widget_edit_container" title="编辑图片">编辑</span></span></span></span></p>
<p>但是当你选中图片打开弹窗会发现图片的选中效果已经移除了，而setNodes方法是设置<strong>选中</strong>节点的属性，所以需要先执行恢复选中父节点的方法，再调用setNodes方法。</p>
<div class="cke_widget_wrapper cke_widget_block cke_widget_codeSnippet cke_widget_selected" data-cke-display-name="代码段" data-cke-filter="off" data-cke-widget-id="2" data-cke-widget-wrapper="1">
<pre class="cke_widget_element" data-cke-widget-data="%7B%22lang%22%3A%22javascript%22%2C%22code%22%3A%22button.onclick%20%3D%20()%20%3D%3E%20%7B%5Cn%20%20%20%20%20%20const%20width%20%3D%20content.querySelector('%23width').value%5Cn%20%20%20%20%20%20const%20height%20%3D%20content.querySelector('%23height').value%5Cn%20%20%20%20%20%20%2F%2F%20%E9%80%89%E4%B8%AD%E5%9B%BE%E7%89%87%E7%88%B6%E8%8A%82%E7%82%B9%5Cn%20%20%20%20%20%20editor.restoreSelection()%5Cn%20%20%20%20%20%20%2F%2F%20%E8%AE%BE%E7%BD%AE%E5%AE%BD%E9%AB%98%5Cn%20%20%20%20%20%20SlateTransforms.setNodes(editor%2C%20%7B%5Cn%20%20%20%20%20%20%20%20style%3A%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20width%3A%20%60%24%7Bwidth%7Dpx%60%2C%5Cn%20%20%20%20%20%20%20%20%20%20height%3A%20%60%24%7Bheight%7Dpx%60%2C%5Cn%20%20%20%20%20%20%20%20%7D%2C%5Cn%20%20%20%20%20%20%7D%2C%20%7B%5Cn%20%20%20%20%20%20%20%20%2F%2F%20%E6%B7%BB%E5%8A%A0match%E5%90%A6%E5%88%99%E6%A0%B7%E5%BC%8F%E6%B7%BB%E5%8A%A0%E5%88%B0%E5%9B%BE%E7%89%87%E7%88%B6%E8%8A%82%E7%82%B9%E4%B8%8A%5Cn%20%20%20%20%20%20%20%20match%3A%20(node)%20%3D%3E%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20if%20(SlateElement.isElement(node))%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20if%20(node.type%20%3D%3D%3D%20'image')%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20return%20true%20%2F%2F%20%E5%8C%B9%E9%85%8D%20image%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%7D%5Cn%20%20%20%20%20%20%20%20%20%20%7D%5Cn%20%20%20%20%20%20%20%20%20%20return%20false%5Cn%20%20%20%20%20%20%20%20%7D%2C%5Cn%20%20%20%20%20%20%7D)%5Cn%20%20%20%20%7D%22%2C%22classes%22%3Anull%7D" data-cke-widget-keep-attr="0" data-cke-widget-upcasted="1" data-widget="codeSnippet"><code class="language-javascript hljs">button.<span class="hljs-property">onclick = <span class="hljs-function">() =&gt; {
      <span class="hljs-keyword">const width = content.<span class="hljs-title function_">querySelector(<span class="hljs-string">'#width').<span class="hljs-property">value
      <span class="hljs-keyword">const height = content.<span class="hljs-title function_">querySelector(<span class="hljs-string">'#height').<span class="hljs-property">value
      <span class="hljs-comment">// 选中图片父节点
      editor.<span class="hljs-title function_">restoreSelection()
      <span class="hljs-comment">// 设置宽高
      <span class="hljs-title class_">SlateTransforms.<span class="hljs-title function_">setNodes(editor, {
      <span class="hljs-attr">style: {
          <span class="hljs-attr">width: <span class="hljs-string">`<span class="hljs-subst">${width}px`,
          <span class="hljs-attr">height: <span class="hljs-string">`<span class="hljs-subst">${height}px`,
      },
      }, {
      <span class="hljs-comment">// 添加match否则样式添加到图片父节点上
      <span class="hljs-attr">match: <span class="hljs-function">(<span class="hljs-params">node) =&gt; {
          <span class="hljs-keyword">if (<span class="hljs-title class_">SlateElement.<span class="hljs-title function_">isElement(node)) {
            <span class="hljs-keyword">if (node.<span class="hljs-property">type === <span class="hljs-string">'image') {
            <span class="hljs-keyword">return <span class="hljs-literal">true <span class="hljs-comment">// 匹配 image
            }
          }
          <span class="hljs-keyword">return <span class="hljs-literal">false
      },
      })
    }</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code></pre>
<span class="cke_reset cke_widget_drag_handler_container"><img width="15" height="15" class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" data-cke-widget-drag-handler="1" data-src="https://img2024.cnblogs.com/blog/2265319/202602/2265319-20260203162525307-1123179497.gif"></span></div>
<p>这样就差最后一步返回content了</p>
<blockquote>PS：也可以把 $content 缓存下来，这样不用每次重复创建、重复绑定事件，优化性能</blockquote>
<p>到这里&nbsp;getModalContentElem就写完了</p>
<p>4、按照文档下一步注册菜单到 wangEditor(<span class="cke_widget_wrapper cke_widget_inline cke_widget_csdnlink cke_widget_selected" data-cke-display-name="a" data-cke-filter="off" data-cke-widget-id="1" data-cke-widget-wrapper="1">自定义扩展新功能 | wangEditor)，这里按原文配置即可。</span></p>
<p>5、插入菜单到工具栏，就是注册到悬浮菜单 hoverbarKeys，可以如下配置：</p>
<p>imageSize就是我取的扩展key</p>
<div class="cke_widget_wrapper cke_widget_block cke_widget_codeSnippet cke_widget_selected" data-cke-display-name="代码段" data-cke-filter="off" data-cke-widget-id="0" data-cke-widget-wrapper="1">
<pre class="cke_widget_element" data-cke-widget-data="%7B%22lang%22%3A%22javascript%22%2C%22code%22%3A%22editorConfig%3A%20%7B%5Cn%20%20%20%20%20%20%20%20placeholder%3A%20%5C%22%E8%AF%B7%E8%BE%93%E5%85%A5%E5%86%85%E5%AE%B9...%5C%22%2C%5Cn%20%20%20%20%20%20%20%20MENU_CONF%3A%20%5B%5C%22uploadImage%5C%22%2C%5C%22uploadAttachment%5C%22%5D%2C%5Cn%20%20%20%20%20%20%20%20hoverbarKeys%3A%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20image%3A%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20menuKeys%3A%20%5B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20'imageWidth30'%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20'imageWidth50'%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20'imageWidth100'%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20'imageSize'%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20'editImage'%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20'viewImageLink'%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20'deleteImage'%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%5D%2C%5Cn%20%20%20%20%20%20%20%20%20%20%7D%2C%5Cn%20%20%20%20%20%20%20%20%7D%2C%5Cn%20%20%20%20%20%20%7D%2C%22%2C%22classes%22%3Anull%7D" data-cke-widget-keep-attr="0" data-cke-widget-upcasted="1" data-widget="codeSnippet"><code class="language-javascript hljs"><span class="hljs-attr">editorConfig: {
      <span class="hljs-attr">placeholder: <span class="hljs-string">"请输入内容...",
      <span class="hljs-attr">MENU_CONF: [<span class="hljs-string">"uploadImage",<span class="hljs-string">"uploadAttachment"],
      <span class="hljs-attr">hoverbarKeys: {
          <span class="hljs-attr">image: {
            <span class="hljs-attr">menuKeys: [
            <span class="hljs-string">'imageWidth30',
            <span class="hljs-string">'imageWidth50',
            <span class="hljs-string">'imageWidth100',
            <span class="hljs-string">'imageSize',
            <span class="hljs-string">'editImage',
            <span class="hljs-string">'viewImageLink',
            <span class="hljs-string">'deleteImage',
            ],
          },
      },
      },</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code></pre>
<span class="cke_reset cke_widget_drag_handler_container"><img width="15" height="15" class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" data-cke-widget-drag-handler="1" data-src="https://img2024.cnblogs.com/blog/2265319/202602/2265319-20260203162525307-1123179497.gif"></span></div>
<p>好了，至此整个扩展基础就讲完了。</p>
<span data-cke-copybin-start="1"><span data-cke-copybin-end="1">​</span></span><br><br>
来源：https://www.cnblogs.com/carrote/p/19570119

查看完整版本: wangeditor5自定义扩展设置图片宽高（px）