From 460a5ff494dd39106423ad06478b7a996e241399 Mon Sep 17 00:00:00 2001
From: dap <15891557205@163.com>
Date: Tue, 20 Aug 2024 14:34:17 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=88=87=E6=8D=A2=E8=AF=AD=E8=A8=80/?=
 =?UTF-8?q?=E4=B8=BB=E9=A2=98=20=E7=BC=96=E8=BE=91=E5=99=A8=E7=A6=81?=
 =?UTF-8?q?=E7=94=A8=E7=8A=B6=E6=80=81=E4=B8=8D=E5=8C=B9=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/Tinymce/src/Editor.vue     | 41 +++++++------------
 .../views/演示使用自行删除/tinymce/index.vue  |  2 +-
 2 files changed, 15 insertions(+), 28 deletions(-)

diff --git a/apps/web-antd/src/components/Tinymce/src/Editor.vue b/apps/web-antd/src/components/Tinymce/src/Editor.vue
index 010a0df4..5f117e45 100644
--- a/apps/web-antd/src/components/Tinymce/src/Editor.vue
+++ b/apps/web-antd/src/components/Tinymce/src/Editor.vue
@@ -109,7 +109,7 @@ const contentCss = computed(() => {
  * 通过v-if来挂载/卸载组件
  * 来完成主题切换/语言切换
  */
-const changeTheme = ref(true);
+const init = ref(true);
 watch(
   () => [preferences.theme.mode, preferences.app.locale],
   () => {
@@ -117,10 +117,16 @@ watch(
       return;
     }
     destroy();
-    changeTheme.value = false;
+    init.value = false;
     // 放在下一次tick来切换
+    // 需要先加载组件 也就是v-if为true  然后需要拿到editorRef 必须放在setTimeout(相当于onMounted)
     nextTick(() => {
-      changeTheme.value = true;
+      init.value = true;
+      setTimeout(() => {
+        // 需要手动设置只读/编辑状态
+        const mode = props.options.readonly ? 'readonly' : 'design';
+        editorRef.value?.mode.set(mode);
+      });
     });
   },
 );
@@ -144,7 +150,7 @@ const initOptions = computed((): InitOptions => {
     content_css: contentCss.value,
     content_style:
       'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }',
-    // contextmenu: 'link image table',
+    contextmenu: 'link image table',
     default_link_target: '_blank',
     height,
     image_advtab: true, // 图片高级选项
@@ -161,8 +167,8 @@ const initOptions = computed((): InitOptions => {
      */
     paste_data_images: true,
     plugins,
-    // quickbars_selection_toolbar:
-    //   'bold italic | quicklink h2 h3 blockquote quickimage quicktable',
+    quickbars_selection_toolbar:
+      'bold italic | quicklink h2 h3 blockquote quickimage quicktable',
     skin: skinName.value,
     toolbar,
     toolbar_mode: 'sliding',
@@ -210,17 +216,6 @@ watch(
   },
 );
 
-watch(
-  () => attrs.disabled,
-  () => {
-    const editor = unref(editorRef);
-    if (!editor) {
-      return;
-    }
-    editor.mode.set(attrs.disabled ? 'readonly' : 'design');
-  },
-);
-
 onMounted(() => {
   if (!initOptions.value.inline) {
     tinymceId.value = buildShortUUID('tiny-vue');
@@ -298,15 +293,7 @@ function bindModelHandlers(editor: any) {
   });
 }
 
-/**
- * disabled
- * 可使用:options="{readonly: true}"
- * 或者:disabled="true"
- */
-const disabled = computed(
-  () =>
-    (props.options.readonly ?? false) || ((attrs.disabled as boolean) ?? false),
-);
+const disabled = computed(() => props.options.readonly ?? false);
 
 function getUploadingImgName(name: string) {
   return `[uploading:${name}]`;
@@ -345,7 +332,7 @@ function handleDone(name: string, url: string) {
       @uploading="handleImageUploading"
     />
     <Editor
-      v-if="!initOptions.inline && changeTheme"
+      v-if="!initOptions.inline && init"
       v-model="modelValue"
       :init="initOptions"
       :style="{ visibility: 'hidden' }"
diff --git a/apps/web-antd/src/views/演示使用自行删除/tinymce/index.vue b/apps/web-antd/src/views/演示使用自行删除/tinymce/index.vue
index 5505bfc2..a09bcf51 100644
--- a/apps/web-antd/src/views/演示使用自行删除/tinymce/index.vue
+++ b/apps/web-antd/src/views/演示使用自行删除/tinymce/index.vue
@@ -16,7 +16,7 @@ const content = ref('');
         <span>只读</span>
         <a-switch v-model:checked="readonly" />
       </div>
-      <Tinymce v-model="content" :disabled="readonly" :height="800" />
+      <Tinymce v-model="content" :height="800" :options="{ readonly }" />
     </div>
   </Page>
 </template>