zydx-plus 1.28.125 → 1.28.126

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zydx-plus",
-  "version": "1.28.125",
+  "version": "1.28.126",
   "description": "Vue.js",
   "main": "src/index.js",
   "files": [
@@ -32,6 +32,7 @@
     "@tiptap/starter-kit": "^2.0.3",
     "@tiptap/vue-3": "^2.0.3",
     "@tiptap/extension-text-align": "^2.0.3",
+    "@tiptap/extension-placeholder": "^2.0.3",
     "@vue-office/docx": "^1.1.3",
     "@vue-office/excel": "^1.1.3"
   },

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

@@ -81,6 +81,7 @@ import { Editor, EditorContent } from '@tiptap/vue-3'
 import StarterKit from '@tiptap/starter-kit'
 import Image from '@tiptap/extension-image'
 import TextAlign from '@tiptap/extension-text-align'
+import Placeholder from '@tiptap/extension-placeholder'
 export default {
     name: 'zydx-xiao-editor',
     components: {
@@ -177,6 +178,10 @@ export default {
         enclosureShow: {
             type: Boolean,
             default: true
+        },
+        placeholder: {
+            type: String,
+            default: ''
         }
     },
     emits: ['see','del','complete','update:data','enclosureSuccess','download','updateData'],
@@ -208,6 +213,9 @@ export default {
             editable: this.readOnly,
             extensions: [
                 StarterKit,
+                Placeholder.configure({
+                    placeholder: this.placeholder,
+                }),
                 TextAlign.configure({
                     types: ['heading', 'paragraph'],
                 }),
@@ -382,6 +390,13 @@ export default {
 </script>
 
 <style scoped>
+:deep(.ProseMirror) p.is-editor-empty:first-child::before {
+    content: attr(data-placeholder);
+    float: left;
+    color: #adb5bd;
+    pointer-events: none;
+    height: 0;
+}
 :deep(.editor-img){
     max-width: 100%;
 }

package/src/components/textarea/src/textarea.vue

@@ -4,7 +4,7 @@
             'min-height': height + 'px',
             border: (readable)? '1px solid #ccc': 'none',
             'background-color': (readable)? '#fff': 'transparent'
-        }" @input="event => checkLength(event, maxLength)" :contenteditable="readable" ref="textarea"></div>
+        }" @input="event => checkLength(event, maxLength)" :placeholder="placeholder" :contenteditable="readable" ref="textarea"></div>
         <span class="num" v-if="maxLength !== 0&&readable">{{ num }}/{{ maxLength }}</span>
     </div>
 </template>
@@ -17,7 +17,8 @@ export default {
     components: {Textarea},
     data() {
         return {
-            num: 0
+            num: 0,
+            placeholder: ''
         }
     },
     props: {
@@ -36,6 +37,10 @@ export default {
         readable: {
             type: Boolean,
             default: true
+        },
+        placeholder: {
+            type: String,
+            default: ''
         }
     },
     watch: {
@@ -88,4 +93,8 @@ export default {
        box-sizing: border-box;
        background-color: #fff;
    }
+.text[contenteditable]:empty:before {
+    content: attr(placeholder);
+    color: gray;
+}
 </style>

package/src/index.js

@@ -67,7 +67,7 @@ function install(app) {
 }
 
 export default {
-    version: '1.28.125',
+    version: '1.28.126',
     install,
     Calendar,
     Message,