修改编辑器

mlogclub · Jun 22, 2021 · ca16d78 · ca16d78
1 parent 2cc12e8
commit ca16d78
Show file tree

Hide file tree

Showing 3 changed files with 119 additions and 94 deletions.
diff --git a/site/.gitignore b/site/.gitignore
@@ -1,90 +1,92 @@
-# Created by .ignore support plugin (hsz.mobi)
-### Node template
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules/
-jspm_packages/
-
-# TypeScript v1 declaration files
-typings/
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variables file
-.env
-
-# parcel-bundler cache (https://parceljs.org/)
-.cache
-
-# next.js build output
-.next
-
-# nuxt.js build output
-.nuxt
-
-# Nuxt generate
-dist
-
-# vuepress build output
-.vuepress/dist
-
-# Serverless directories
-.serverless
-
-# IDE / Editor
-.idea
-
-# Service worker
-sw.*
-
-# Mac OSX
-.DS_Store
-
-# Vim swap files
-*.swp
+nuxt.zip
+
+# Created by .ignore support plugin (hsz.mobi)
+### Node template
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# Nuxt generate
+dist
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless
+
+# IDE / Editor
+.idea
+
+# Service worker
+sw.*
+
+# Mac OSX
+.DS_Store
+
+# Vim swap files
+*.swp
diff --git a/site/components/CommentInput.vue b/site/components/CommentInput.vue
@@ -8,7 +8,7 @@
           <i class="iconfont icon-close" alt="取消回复" @click="cancelReply" />
         </div>
         <markdown-editor
-          v-if="mode === 'markdown'"
+          v-if="inputMode === 'markdown'"
           ref="mdEditor"
           v-model="value.content"
           editor-id="commentCreateEditor"
@@ -21,6 +21,7 @@
           ref="simpleEditor"
           v-model="value"
           :max-word-count="500"
+          height="150px"
           @submit="create"
         />
       </div>
@@ -71,6 +72,16 @@ export default {
     user() {
       return this.$store.state.user.current
     },
+    inputMode() {
+      if (this.$store.state.env.isMobile) {
+        // 手机中，强制使用普通文本编辑器
+        return 'text'
+      }
+      return this.mode
+    },
+    contentType() {
+      return this.inputMode === 'markdown' ? 'markdown' : 'text'
+    },
   },
   methods: {
     async create() {
@@ -89,7 +100,7 @@ export default {
       this.sending = true
       try {
         const data = await this.$axios.post('/api/comment/create', {
-          contentType: this.mode === 'markdown' ? 'markdown' : 'text',
+          contentType: this.contentType,
           entityType: this.entityType,
           entityId: this.entityId,
           content: this.value.content,

diff --git a/site/components/SimpleEditor.vue b/site/components/SimpleEditor.vue
@@ -2,7 +2,7 @@
   <div class="simple-editor">
     <div class="simple-editor-toolbar">
       <div class="act-btn">
-        <i class="iconfont icon-image" @click="showImageUpload = true" />
+        <i class="iconfont icon-image" @click="switchImageUpload" />
       </div>
       <div class="publish-container">
         <span class="tip">{{ wordCount }} / {{ maxWordCount }}</span>
@@ -12,6 +12,7 @@
       <textarea
         v-model="post.content"
         placeholder="请输入您要发表的内容 ..."
+        :style="{ 'min-height': height, height: height }"
         @input="onInput"
         @paste="handleParse"
         @drop="handleDrag"
@@ -46,6 +47,10 @@ export default {
         }
       },
     },
+    height: {
+      type: String,
+      default: '200px',
+    },
   },
   data() {
     return {
@@ -78,6 +83,13 @@ export default {
     isOnUpload() {
       return this.imageUploading
     },
+    switchImageUpload() {
+      if (!this.showImageUpload) {
+        // 打开文件弹窗
+        this.$refs.imageUploader.onClick()
+      }
+      this.showImageUpload = !this.showImageUpload
+    },
     handleParse(e) {
       const items = e.clipboardData && e.clipboardData.items
       if (!items || !items.length) {
@@ -190,7 +202,7 @@ export default {
       font-family: inherit;
       background: $background-color-editor;
       width: 100%;
-      min-height: 200px;
+      // min-height: 200px;
       border: 0;
       outline: 0;
       display: block;