Przeglądaj źródła

fix: initialize rich text editor selection

Developer 1 tydzień temu
rodzic
commit
a41493a96a

+ 7 - 1
src/components/editor/index.vue

@@ -78,6 +78,12 @@ export default {
                 // 默认 false 会让 toolbar 按钮在用户点进编辑区之前一直处于
                 // disabled 灰态,误以为是不可点击;开启后 toolbar 即刻可用
                 autoFocus: true,
+                // autoFocus 只会让 DOM 获得焦点,不会给 Slate editor 创建 selection。
+                // wangEditor 的工具栏会在 selection 为空时统一禁用按钮,因此在
+                // editor 创建完成后显式 focus,初始化一个可用的编辑选区。
+                onCreated: (editor) => {
+                    editor.focus()
+                },
                 MENU_CONF: {
                     uploadImage: {
                         // 沿用项目原有的 OSS 上传端点,token 走 URL 参数
@@ -196,4 +202,4 @@ export default {
     min-height: 600px;
     height: auto !important;
 }
-</style>
+</style>

+ 13 - 0
tests/editor-toolbar-selection.test.js

@@ -0,0 +1,13 @@
+const assert = require('assert')
+const fs = require('fs')
+
+const source = fs.readFileSync(
+  require('path').resolve(__dirname, '../src/components/editor/index.vue'),
+  'utf8'
+)
+
+assert.match(
+  source,
+  /onCreated\s*:\s*\(editor\)\s*=>\s*\{\s*editor\.focus\(\)/,
+  'editor must initialize a Slate selection after creation so toolbar buttons are enabled'
+)