fix: 表格单元格内无法输入空格和换行

src/views/components/element/TableElement/CustomTextarea.vue

@@ -16,7 +16,7 @@ import { defineComponent, onUnmounted, ref, watch } from 'vue'
 export default defineComponent({
   name: 'custom-textarea',
   props: {
-    modelValue: {
+    value: {
       type: String,
       default: '',
     },
@@ -32,16 +32,16 @@ export default defineComponent({
 
     // 自定义v-modal，同步数据
     // 当文本框聚焦时，不执行数据同步
-    watch(() => props.modelValue, () => {
+    watch(() => props.value, () => {
       if (isFocus.value) return
-      text.value = props.modelValue
+      text.value = props.value
-      if (textareaRef.value) textareaRef.value.innerHTML = props.modelValue
+      if (textareaRef.value) textareaRef.value.innerHTML = props.value
     }, { immediate: true })
 
     const handleInput = () => {
       if (!textareaRef.value) return
       const text = textareaRef.value.innerHTML
-      emit('update:modelValue', text)
+      emit('updateValue', text)
     }
 
     // 聚焦时更新焦点标记，并监听粘贴事件
@@ -56,7 +56,7 @@ export default defineComponent({
         const clipboardDataFirstItem = e.clipboardData.items[0]
 
         if (clipboardDataFirstItem && clipboardDataFirstItem.kind === 'string' && clipboardDataFirstItem.type === 'text/plain') {
-          clipboardDataFirstItem.getAsString(text => emit('update:modelValue', text))
+          clipboardDataFirstItem.getAsString(text => emit('updateValue', text))
         }
       }
     }

src/views/components/element/TableElement/EditableTable.vue

@@ -55,12 +55,14 @@
             v-contextmenu="el => contextmenus(el)"
           >
             <CustomTextarea 
+              v-if="activedCell === `${rowIndex}_${colIndex}`"
               class="cell-text" 
               :class="{ 'active': activedCell === `${rowIndex}_${colIndex}` }"
-              :contenteditable="activedCell === `${rowIndex}_${colIndex}` ? 'plaintext-only' : false"
+              contenteditable="plaintext-only"
-              v-model="cell.text"
+              :value="cell.text"
-              @update:modelValue="handleInput()"
+              @updateValue="value => handleInput(value, rowIndex, colIndex)"
             />
+            <div v-else class="cell-text" v-html="formatText(cell.text)" />
           </td>
         </tr>
       </tbody>
@@ -76,7 +78,7 @@ import { PPTElementOutline, TableCell, TableTheme } from '@/types/slides'
 import { ContextmenuItem } from '@/components/Contextmenu/types'
 import { KEYS } from '@/configs/hotkey'
 import { createRandomCode } from '@/utils/common'
-import { getTextStyle } from './utils'
+import { getTextStyle, formatText } from './utils'
 import useHideCells from './useHideCells'
 import useSubThemeColor from './useSubThemeColor'
 
@@ -428,8 +430,8 @@ export default defineComponent({
 
     // 将焦点移动到下一个单元格
     // 当前行右边有单元格时，焦点右移
-    // 当前行右边无单元格（已处在行末），且存在下一行时，焦点移动下下一行行首
+    // 当前行右边无单元格（已处在行末），且存在下一行时，焦点移动至下一行行首
-    // 当前行右边无单元格（已处在行末），且不存在下一行（已处在最后一行）时，新建一行并将焦点移动下下一行行首
+    // 当前行右边无单元格（已处在行末），且不存在下一行（已处在最后一行）时，新建一行并将焦点移动至下一行行首
     const tabActiveCell = () => {
       const getNextCell = (i: number, j: number): [number, number] | null => {
         if (!tableCells.value[i]) return null
@@ -501,7 +503,8 @@ export default defineComponent({
     })
 
     // 单元格文字输入时更新表格数据
-    const handleInput = debounce(function() {
+    const handleInput = debounce(function(value, rowIndex, colIndex) {
+      tableCells.value = tableCells.value[rowIndex][colIndex].text = value
       emit('change', tableCells.value)
     }, 300, { trailing: true })
 
@@ -626,6 +629,7 @@ export default defineComponent({
       contextmenus,
       handleInput,
       subThemeColor,
+      formatText,
     }
   },
 })

src/views/components/element/TableElement/StaticTable.vue

@@ -35,7 +35,7 @@
             :colspan="cell.colspan"
             v-show="!hideCells.includes(`${rowIndex}_${colIndex}`)"
           >
-            <div class="cell-text" v-html="cell.text" />
+            <div class="cell-text" v-html="formatText(cell.text)" />
           </td>
         </tr>
       </tbody>
@@ -46,7 +46,7 @@
 <script lang="ts">
 import { computed, defineComponent, PropType, ref, watch } from 'vue'
 import { PPTElementOutline, TableCell, TableTheme } from '@/types/slides'
-import { getTextStyle } from './utils'
+import { getTextStyle, formatText } from './utils'
 import useHideCells from './useHideCells'
 import useSubThemeColor from './useSubThemeColor'
 
@@ -99,6 +99,7 @@ export default defineComponent({
       totalWidth,
       hideCells,
       getTextStyle,
+      formatText,
       subThemeColor,
     }
   },

src/views/components/element/TableElement/utils.ts

@@ -31,4 +31,8 @@ export const getTextStyle = (style?: TableCellStyle) => {
     fontFamily: fontname || '微软雅黑',
     textAlign: align || 'left',
   }
+}
+
+export const formatText = (text: string) => {
+  return text.replace(/\n/g, '</br>').replace(/ /g, '&nbsp;')
 }