fix: 修复a标签包裹img的取消链接问题

wangeditor-team · Jun 10, 2021 · 23eb557 · 23eb557
1 parent 4ed9c87
commit 23eb557
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 4 deletions.
diff --git a/examples/link.html b/examples/link.html
@@ -13,6 +13,7 @@
     <p>
         wangEditor demo
     </p>
+    <button onclick="insertLinkImg()">插入带有超链接的图片</button>
     <div id="div1">
         <p><br/></p>
         <p><br/></p>
@@ -41,7 +42,9 @@
     <script>
         const E = window.wangEditor
         const editor = new E('#div1')
-
+        function insertLinkImg () {
+            editor.cmd.do( 'insertHTML', '<a href="https://www.baidu.com/"><img src="https://user-images.githubusercontent.com/37204782/119621908-3ebe3c00-be39-11eb-924d-82308460d461.png" style="max-width:100%;"/></a>' )
+        }
         editor.create()
     </script>
 </body>

diff --git a/src/menus/link/bind-event/tooltip-event.ts b/src/menus/link/bind-event/tooltip-event.ts
@@ -36,9 +36,24 @@ function createShowHideFn(editor: Editor) {
                     editor.selection.createRangeByElem($link)
                     editor.selection.restoreSelection()
 
-                    // 用文字，替换链接
-                    const selectionText = $link.text()
-                    editor.cmd.do('insertHTML', '<span>' + selectionText + '</span>')
+                    const $childNodes = $link.childNodes()
+                    // 如果链接是图片
+                    if ($childNodes?.getNodeName() === 'IMG') {
+                        // 获取选中的图片
+                        const $selectIMG = editor.selection.getSelectionContainerElem()?.children()
+                            ?.elems[0].children[0]
+                        // 插入图片
+                        editor.cmd.do(
+                            'insertHTML',
+                            `<img 
+                                src=${$selectIMG?.getAttribute('src')} 
+                                style=${$selectIMG?.getAttribute('style')}>`
+                        )
+                    } else {
+                        // 用文字，替换链接
+                        const selectionText = $link.text()
+                        editor.cmd.do('insertHTML', '<span>' + selectionText + '</span>')
+                    }
 
                     // 返回 true，表示执行完之后，隐藏 tooltip。否则不隐藏。
                     return true