修复pagetype设置界面Text Editor渲染后与前端界面不一致的问题

apps/jingrow/frontend/src/core/features/form_builder/globals.js

@@ -13,7 +13,7 @@ import SelectControl from "./components/controls/SelectControl.vue";
 import SignatureControl from "./components/controls/SignatureControl.vue";
 import TableControl from "./components/controls/TableControl.vue";
 import TextControl from "./components/controls/TextControl.vue";
-import TextEditorControl from "./components/controls/TextEditorControl.vue";
+import TextEditorControl from "@/core/pagetype/form/controls/TextEditor.vue";
 
 export function registerGlobalComponents(app) {
   // Helper function to safely register component

apps/jingrow/frontend/src/core/pagetype/form/controls/TextEditor.vue

@@ -1,11 +1,22 @@
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount, watch, computed } from 'vue'
+import { ref, onMounted, onBeforeUnmount, watch, computed, useSlots } from 'vue'
 import Quill from 'quill'
 import ImageResize from 'quill-image-resize'
 import MagicUrl from 'quill-magic-url'
 import 'quill/dist/quill.snow.css'
 
-const props = defineProps<{ df: any; record: Record<string, any>; canEdit: boolean; ctx: any }>()
+const slots = useSlots()
+
+const props = defineProps<{ 
+  df: any; 
+  record?: Record<string, any>; 
+  canEdit?: boolean; 
+  ctx?: any; 
+  read_only?: boolean; 
+  modelValue?: any 
+}>()
+
+const emit = defineEmits(['update:modelValue'])
 
 const host = ref<HTMLDivElement | null>(null)
 let quill: Quill | null = null
@@ -130,22 +141,39 @@ function init() {
       }
     ]
   ]
+  
+  const readOnly = props.read_only || props.df?.read_only || !props.canEdit
+  
   quill = new Quill(host.value, {
     theme: 'snow',
-    readOnly: !props.canEdit,
+    readOnly,
     placeholder: props.df?.placeholder || '',
     modules: { toolbar, imageResize: {}, magicUrl: true, table: true }
   })
 
-  setHtml(String((props.record as any)?.[props.df.fieldname] ?? ''))
-
-  quill.on('text-change', (_d: any, _o: any, source: string) => {
-    if (source === 'api') return
-    if (syncTimer) clearTimeout(syncTimer)
-    syncTimer = setTimeout(() => {
-      ;(props.record as any)[props.df.fieldname] = getHtml()
-    }, 200)
-  })
+  // FormBuilder 模式：使用 modelValue
+  if (slots.label) {
+    setHtml(String(props.modelValue ?? ''))
+    quill.on('text-change', (_d: any, _o: any, source: string) => {
+      if (source === 'api') return
+      if (syncTimer) clearTimeout(syncTimer)
+      syncTimer = setTimeout(() => {
+        emit('update:modelValue', getHtml())
+      }, 200)
+    })
+  } else {
+    // default_single.vue 模式：使用 record
+    setHtml(String((props.record as any)?.[props.df.fieldname] ?? ''))
+    quill.on('text-change', (_d: any, _o: any, source: string) => {
+      if (source === 'api') return
+      if (syncTimer) clearTimeout(syncTimer)
+      syncTimer = setTimeout(() => {
+        if (props.record) {
+          (props.record as any)[props.df.fieldname] = getHtml()
+        }
+      }, 200)
+    })
+  }
 
   try {
     const toolbarModule: any = (quill as any).getModule('toolbar')
@@ -201,8 +229,14 @@ watch(() => props.canEdit, (v) => { (quill as any)?.enable(!!v) })
 </script>
 
 <template>
-  <div :class="['field-wrapper', `layout-${labelLayout}`]">
-    <label class="field-label">
+  <div :class="['field-wrapper', `layout-${labelLayout}`, { 'form-builder-control': slots.label }]">
+    <!-- FormBuilder 模式: 使用 slot 渲染 label -->
+    <div v-if="slots.label" class="field-controls">
+      <slot name="label" />
+      <slot name="actions" />
+    </div>
+    <!-- default_single.vue 模式: 自己渲染 label -->
+    <label v-else-if="props.df && props.ctx" class="field-label">
       {{ ctx.t(df.label || df.fieldname) }}
       <span v-if="df.reqd" class="required">*</span>
     </label>