fix: 修复 \n 换行符未换行问题 (#125)

src/utils/index.js

@@ -0,0 +1,3 @@
+export function replaceNewlineWithBr(str) {
+  return str.replace(/\r?\n/g, '<br>')
+}

src/v-editor.vue

@@ -2,7 +2,7 @@
   <div class="v-editor">
     <ckeditor
       :editor="ClassicEditor"
-      :value="value"
+      :value="computedValue"
       :disabled="disabled"
       :config="editorConfig"
       @input="onInput"
@@ -44,6 +44,7 @@ import fullScreenExitIcon from './assets/fullscreenexit.vue'
 
 import ImagePreview from './plugin/ImagePreview'
 import './translations'
+import {replaceNewlineWithBr} from './utils'
 
 const ROW_HEIGHT = 24
 const INNER_PADDING = 8 * 2 + 1 * 2 // .ck-content padding + border
@@ -135,6 +136,10 @@ export default {
     }
   },
   computed: {
+    computedValue() {
+      // TODO: 此处每次监听 this.value 的变化可能存在性能问题
+      return replaceNewlineWithBr(this.value)
+    },
     editorConfig() {
       // $refs 在 mounted 阶段才挂载，这里不能直接传实例
       return Object.assign(

test/index.test.js

@@ -1,5 +1,9 @@
-import sum from './sum'
+import {replaceNewlineWithBr} from '../src/utils'
 
-test('main', () => {
-  expect(sum(1, 2)).toBe(3)
+test('replaceNewlineWithBr', () => {
+  const strInWindows = '1.登录平台，选择需求池tab\r\n2.需求列表有需求'
+  const strInUnix = '1.登录平台，选择需求池tab\n2.需求列表有需求'
+  const normalStr = `1.登录平台，选择需求池tab<br>2.需求列表有需求`
+  expect(replaceNewlineWithBr(strInWindows)).toBe(normalStr)
+  expect(replaceNewlineWithBr(strInUnix)).toBe(normalStr)
 })