feat: 功能18优化 (#342)

题目标题编辑自动focus

web/src/common/Editor/RichEditor.vue

@@ -28,7 +28,7 @@ import './styles/reset-wangeditor.scss'
 import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
 import { ref, shallowRef, onBeforeMount, watch } from 'vue'
 
-const emit = defineEmits(['input', 'onFocus', 'change', 'blur'])
+const emit = defineEmits(['input', 'onFocus', 'change', 'blur', 'created'])
 const model = defineModel()
 const props = defineProps(['staticToolBar'])
 
@@ -60,6 +60,7 @@ const onCreated = (editor) => {
   if (model.value) {
     setHtml(model.value)
   }
+  emit('created', editor)
 }
 const onChange = (editor) => {
   const editorHtml = editor.getHtml()

web/src/materials/questions/widgets/EditOptions/Options/OptionEdit.vue

@@ -14,6 +14,7 @@
             <RichEditor
               :modelValue="element.text"
               @change="(value) => handleChange(index, value)"
+              @created="handleCreated"
             />
           </div>
 
@@ -41,6 +42,7 @@
 import draggable from 'vuedraggable'
 import { cloneDeep as _cloneDeep } from 'lodash-es'
 import RichEditor from '@/common/Editor/RichEditor.vue'
+import { mapGetters, mapState } from 'vuex'
 
 export default {
   name: 'OptionEdit',
@@ -58,6 +60,14 @@ export default {
     draggable,
     RichEditor
   },
+  data() {
+    return {
+      // 编辑器创建完成数量
+      createdEditorCount: 0,
+      // 编辑器实例列表
+      editorList: []
+    }
+  },
   mounted() {
     // 选项hash兜底
     const hashMap = {}
@@ -101,6 +111,29 @@ export default {
     optionSortChange() {
       const optionList = _cloneDeep(this.optionList)
       this.$emit('optionChange', optionList)
+    },
+    // 监听 editor 创建完成
+    handleCreated(editor) {
+      this.createdEditorCount++
+      this.editorList.push(editor)
+    }
+  },
+  computed: {
+    ...mapGetters({
+      moduleConfig: 'edit/moduleConfig'
+    }),
+    // 当前题目所有编辑器是否创建完成
+    createdAllCurrentEditQuestionEditor() {
+      return this.createdEditorCount === this.moduleConfig?.options?.length
+    }
+  },
+  watch: {
+    // 监听当前编辑选项所有编辑器创建完成
+    // 如果所有选项创建完成，则聚焦第一个选项
+    createdAllCurrentEditQuestionEditor(bool) {
+      if (bool) {
+        this.editorList[0]?.focus()
+      }
     }
   }
 }

web/src/materials/questions/widgets/TitleModules/EditTitle/index.jsx

@@ -70,6 +70,11 @@ export default defineComponent({
                 class="rich-editor"
                 modelValue={filterXSS(this.title)}
                 onChange={this.handleChange}
+                onCreated={
+                  (editor) => {
+                    editor?.focus()
+                  }
+                }
               />
             )
           }