优化操作体验

package.json

@@ -1,6 +1,6 @@
 {
   "name": "smeditor",
-  "version": "0.1.18",
+  "version": "0.1.19",
   "description": "smeditor",
   "author": "eric <[email protected]>",
   "scripts": {

src/App.vue

@@ -12,7 +12,7 @@ export default {
     link.href = 'https://ws3.sinaimg.cn/large/006tNc79ly1fnyr74sc8ej305m05mmx9.jpg'
     link.rel = 'shortcut icon'
     document.head.appendChild(link)
-    document.title = 'SMEditor (石墨文档编辑器)'
+    document.title = 'SMEditor (富本文编辑器)'
   }
 }
 </script>

src/components/SMEditor.vue

@@ -161,6 +161,7 @@ export default {
       // 鼠标选中节点
       selectNode: {},
       buttonsBarFixed: false,
+      selectImageNode: null,
       insertLinkSection: {
         node: '',
         start: 0,
@@ -322,8 +323,9 @@ export default {
               self.config.uploadFailed(xhr.responseText)
             }
             // 测试网站, 模拟上传
-            if (location.href.indexOf('ericjj.com/smeditor.github.io') > 0) {
-              const imgUrl = self.config.uploadCallback('')
+            if (location.href.indexOf('ericjj.com/smeditor.github.io') > 0 ||
+                location.href.indexOf('127.0.0.1') > 0) {
+              const imgUrl = self.config.uploadCallback({})
               success(imgUrl)
             }
           }
@@ -338,6 +340,22 @@ export default {
                 <br>
                 <div class="image-caption" style="min-width: 20%; max-width: 80%; height: 35px; display: inline-block; padding: 10px 10px 0px 10px; margin: 0 auto; border-bottom: 1px solid #d9d9d9; font-size: 16px; color: #999; content: "";"></div>
               </div>`)
+      let last = null
+      editorElement().querySelectorAll('img').forEach(el => {
+        el.onclick = () => {
+          if (el.className.indexOf('img-onclick') < 0) {
+            if (last !== null) {
+              last.className = last.className.replace('img-onclick', '')
+            }
+            el.className += ' img-onclick'
+            this.selectImageNode = el
+            last = el
+          } else {
+            el.className = el.className.replace('img-onclick', '')
+            this.selectImageNode = null
+          }
+        }
+      })
     },
     // 点击插入链接
     insertLinkClick () {
@@ -535,6 +553,16 @@ function addEvents (self) {
   }
   // 删除事件
   editorElement().onkeydown = function (event) {
+    if (self.selectImageNode) {
+      console.log(self.selectImageNode.parentNode)
+      if (self.selectImageNode.parentNode &&
+        self.selectImageNode.parentNode.className === 'image-desc') {
+        self.selectImageNode.parentNode.outerHTML = ''
+        return false
+      }
+      self.selectImageNode.outerHTML = ''
+      return false
+    }
     const el = getSelectedNode()
     if (event.keyCode === 8 && isImageDesc(el)) {
       el.innerHTML = '<p></p>'
@@ -704,6 +732,10 @@ function restoreCursor (self) {
   border: 0;
 }
 
+.smeditor .img-onclick {
+  border: 5px solid #87AA99;
+}
+
 .smeditor p {
   padding: 2px 0;
   margin: 0px;

src/views/Home.vue

@@ -26,8 +26,7 @@ const config = {
   sticky: true,
   // 上传成功回调
   uploadCallback: (data) => {
-    // console.log(data)
-    return data.image.url || 'https://ws1.sinaimg.cn/large/006tNc79gy1fp1rdw7e90j30rs0rsacb.jpg'
+    return 'https://ws2.sinaimg.cn/large/006tNc79ly1fo48pgf714j30eh08rdg5.jpg'
   },
   // 上传失败回调, 可选
   uploadFailed: (err) => {