zydx-plus 1.33.384 → 1.33.385

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zydx-plus",
-  "version": "1.33.384",
+  "version": "1.33.385",
   "description": "Vue.js",
   "main": "src/index.js",
   "files": [

package/src/components/editor2/src/editor.vue

@@ -23,6 +23,45 @@
       <div  :style="{'border': (borderShow)? '1px solid #ccc': '0'}" v-if="editorShow">
         <editor-content @paste.native.capture.prevent="preventPaste" ref="editorRef" class="editor" :editor="editor"
                         :style="heightStyleCont"/>
+        <bubble-menu
+            :editor="editor"
+            :tippy-options="{ duration: 100}"
+            :shouldShow="shouldShowFn"
+            v-if="editor"
+            v-show="showBubble"
+        >
+          <div class="bubbleMenu">
+            <div class="line">
+              <div class="label">图片缩放：</div>
+              <div class="percent">
+                <div class="symbol">%</div>
+                <input type="number" v-model="imgSizeVal" @input="changePercent" onfocus="this.select()" placeholder="10-100">
+              </div>
+            </div>
+            <div class="line">
+              <div class="label">图片位置：</div>
+              <div class="alignmentMode">
+                <div @click="changeAlign('left')">
+                  <div class="imgBgc" :class="{imgBgcAction: editor.isActive({ textAlign: 'left' })}">
+                    <img :src="alignmentModeLeft">
+                  </div>
+                </div>
+                <div class="segmentation"></div>
+                <div  @click="changeAlign('center')">
+                  <div class="imgBgc" :class="{imgBgcAction: editor.isActive({ textAlign: 'center' })}">
+                    <img :src="alignmentModeCenter">
+                  </div>
+                </div>
+                <div class="segmentation"></div>
+                <div  @click="changeAlign('right')">
+                  <div class="imgBgc" :class="{imgBgcAction: editor.isActive({ textAlign: 'right' })}">
+                    <img :src="alignmentModeRight">
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </bubble-menu>
       </div>
       <div v-if="voiceShows" class="speak"
            @mousedown.stop="mousedown"
@@ -101,7 +140,7 @@
 <script>
 import Recorder from 'js-audio-recorder'
 import {html2json, json2html} from '../../utils/html2json.js'
-import {Editor, EditorContent} from '@tiptap/vue-3'
+import {Editor, EditorContent, BubbleMenu} from '@tiptap/vue-3'
 import StarterKit from '@tiptap/starter-kit'
 import Image from '@tiptap/extension-image'
 import TextAlign from '@tiptap/extension-text-align'
@@ -111,23 +150,32 @@ import textStyle from '@tiptap/extension-text-style'
 import {sid} from "./sign-id";
 import {FontSize} from "./font-size";
 import {titleId} from "./title-id";
+import {CustomImage} from "./image-size";
 import {Contenteditable} from "./contenteditable";
 import svgs from "./level";
 import Mess from '../../tipBox/index'
+import alignmentModeCenter from './img/center.png'
+import alignmentModeLeft from './img/left.png'
+import alignmentModeRight from './img/right.png'
 
 export default {
   name: 'zydx-xiao-editor',
   components: {
     EditorContent,
+    BubbleMenu,
     svgs
   },
   data() {
     return {
+      alignmentModeLeft: alignmentModeLeft,
+      alignmentModeCenter: alignmentModeCenter,
+      alignmentModeRight: alignmentModeRight,
       uploadAttData: [],
       editor: null,
       heightStyle: {},
       heightStyleCont: {},
       voiceStatus: false,
+      showBubble: true,
       recorder: null,
       ws: null,
       audioContext: null,
@@ -144,7 +192,11 @@ export default {
       y: 0,
       speech: {},
       limits: false,
-      voiceShows: false
+      voiceShows: false,
+      lock: true,
+      editorRef: null,
+      imgSizeVal: '',
+      currentImgDom: {},
     }
   },
   beforeUnmount() {
@@ -292,6 +344,7 @@ export default {
         textStyle,
         FontSize,
         titleId,
+        CustomImage,
         Contenteditable,
         Color.configure({
           types: ['textStyle'],
@@ -305,7 +358,7 @@ export default {
         Image.configure({
           inline: true,
           HTMLAttributes: {
-            class: 'editor-img'
+            class: `editor-img`,
           }
         }),
       ],
@@ -320,12 +373,12 @@ export default {
         _this.close()
       },
       // 获取焦点
-      onFocus: () => {
-        this.limits = true
+      onFocus: (e) => {
+          this.limits = true
       },
     })
     document.addEventListener('keydown', function (e) {
-      if (e.keyCode === 8 || e.keyCode === 46) {
+    if (e.keyCode === 8 || e.keyCode === 46) {
         const sid = _this.editor.state.selection.$anchor.parent.attrs.sid
         if (sid === 'prohibit') {
           _this.editor.setEditable(false);
@@ -356,6 +409,36 @@ export default {
     })
   },
   methods: {
+      // 下面三个方法是改变图片大小的方法
+    changeAlign(tag) {
+        this.editor.chain().setTextAlign(tag).run()
+    },
+    changePercent(e) {
+        if(parseInt(e.target.value) > 100) {
+            this.imgSizeVal = 100
+            this.editor.chain().setImageWidth('100%').run()
+        } else if(parseInt(e.target.value) < 10) {
+        } else {
+            if(this.lock) {
+                this.lock = false
+                setTimeout(() => {
+                    this.editor.chain().setImageWidth(e.target.value + '%').focus().run()
+                    this.lock = true
+                }, 500)
+            }
+        }
+    },
+    shouldShowFn({ editor, view, state, oldState, from, to }) {
+        this.$nextTick(() => {
+            this.showBubble =  editor.isActive('image')
+            if(editor.isActive('image')) {
+                this.imgSizeVal = parseInt(this.editor.getAttributes('image').width)
+            } else {
+                this.imgSizeVal = ''
+            }
+        })
+        return editor.isActive('image')
+    },
     speechDown(e) {
       this.speech = {
         x: e.clientX - e.offsetX,
@@ -636,13 +719,27 @@ export default {
     imgHtml(data) { // 插入图片
       const url = this.uploadImage.url + data
       const cla = this.randomId()
-      const html = `<p class="imgCont ${cla}"><img src="${url}" alt="" /></p>`
+      const html = `<p class="imgCont ${cla}"><img src="${url}" alt="" width=""/></p>`
       this.editor.chain().focus().insertContentAt(this.selection(), html).run()
       if (this.selection() <= 6 && this.selection() > 2) this.selectionClass2(cla)
       if (this.selectionClass(cla)) {
         this.editor.chain().focus().insertContentAt(this.selection(), '<p></p>').run()
       }
     },
+    // selectImg(cla) {
+    //     this.$nextTick(() => {
+    //         const images = this.$refs.editorRef.rootEl.querySelectorAll('img');
+    //         const claDom = this.$refs.editorRef.rootEl.getElementsByClassName(cla);
+    //         claDom[0].insertAdjacentHTML('beforeend', `<p class="tips ${cla}" style="color: red">新的段落</p>`)
+    //         images.forEach(img => {
+    //             img.addEventListener('mouseenter', this.handleImageClick);
+    //             img.addEventListener('mouseleave', this.handleImageClick);
+    //         });
+    //     });
+    // },
+    // handleImageClick(text) {
+    //     console.log('mouseenter==>>>>',text)
+    // },
     insertContent(v) {
       for (let i = 0; i < v.length; i++) {
         let html = json2html(v[i])
@@ -759,6 +856,18 @@ export default {
 </script>
 
 <style scoped>
+  :deep(.w_100) {
+    width: 100% !important;
+  }
+  :deep(.w_75 ){
+    width: 75% !important;
+  }
+  :deep(.w_50 ){
+    width: 50% !important;
+  }
+  :deep(.w_25 ){
+    width: 25% !important;
+  }
 :deep(p[data-sid="prohibit"]) {
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -988,4 +1097,68 @@ export default {
     line-height: 14px !important;
   }
 }
+  .bubbleMenu {
+    position: relative;
+    padding: 15px;
+    background-color: #fff;
+    border-radius: 5px;
+    box-shadow: 0 1px 6px #d2d2d2;
+  }
+  .line {
+    display: flex;
+    align-items: center;
+    padding-bottom: 10px;
+  }
+  .line:last-child {
+    padding-bottom: 0
+  }
+  .percent {
+    position: relative;
+  }
+  .percent input{
+    border-radius: 4px;
+    width: 68px;
+  }
+  .percent input::-webkit-outer-spin-button,
+  .percent input::-webkit-inner-spin-button {
+    -webkit-appearance: none !important;
+  }
+  .percent input[type='number']{
+    -moz-appearance: textfield;
+    box-shadow: none;
+    border: 1px solid #8c939d;
+    padding: 5px 15px 5px 5px;
+  }
+  .symbol {
+    position: absolute;
+    right: 5px;
+    top: 5px
+  }
+
+  .alignmentMode {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .segmentation {
+    height: 13px;
+    width: 1px;
+    margin: 0 5px;
+    background-color: #565656;
+  }
+  .imgBgc {
+    border-radius: 3px;
+    width: 20px;
+    height: 20px;
+    background-color: #CCCCCC;
+  }
+  .imgBgcAction {
+    background-color: #2A82E4;
+  }
+  .imgBgc > img {
+    padding: 1px;
+    width: 100%;
+    height: 100%;
+  }
+
 </style>

package/src/components/editor2/src/image-size.js

@@ -0,0 +1,23 @@
+import Image from '@tiptap/extension-image'
+
+export const CustomImage = Image.extend({
+    addCommands() {
+        return {
+            setImageWidth: width => ({commands}) => {
+                return commands.updateAttributes('image', {width: width})
+            },
+        }
+    },
+    addAttributes() {
+        return {
+            width: {
+                default: '',
+                renderHTML: attributes => {
+                    return {
+                        style: `width: ${attributes.width}`,
+                    }
+                }
+            }
+        }
+    }
+})

package/src/index.js

@@ -83,7 +83,7 @@ function install(app) {
 }
 
 export default {
-    version: '1.33.384',
+    version: '1.33.385',
     install,
     Calendar,
     Message,