feats

src/components/Editor.vue

   modelValue: {
     type: String,
     default: '',
-  }
+  },
+  disabled: Boolean,
 })
 
 const emit = defineEmits(['update:modelValue', 'save'])
   }
 }, { immediate: true })
 
+watch(() => props.disabled, (newVal) => {
+  if (!editorRef.value) return;
+  const mode = newVal ? 'readonly' : 'design'
+  editorRef.value.mode.set(mode);
+  console.log('-----editorRef.value.mode------?', editorRef.value.mode)
+})
+
 onMounted(() => {
   window.tinymce.init({
     selector: '#noteEditor',
     plugins: 'save',
     menubar: false,
-    language: 'zh_CN',
+    readonly: props.disabled,
+    language: 'zh-Hans',
     plugins: ['image', 'save'],
     image_description: false,   // 禁用图片描述
     image_dimensions: false,  // 禁用图片宽高设置
-    toolbar: 'blocks fontfamily fontsize bold italic backcolor alignleft aligncenter alignright alignjustify image outdent indent undo redo removeformat',
+    toolbar: 'save | blocks fontfamily fontsize | bold italic | forecolor backcolor | alignleft aligncenter alignright alignjustify | outdent indent | undo redo | removeformat',
     setup: (editor) => {
       if (props.modelValue) {
         editor.setContent(props.modelValue)

src/pages/index.vue

 <template>
   <div>
     <Editor
+      :disabled="disabled"
       v-model="valueHtml"
       @save="handleSave"
     />
 </template>
 
 <script setup>
-import { ref, shallowRef, watch, onMounted } from 'vue'
+import { ref, shallowRef, watch, onMounted, computed } from 'vue'
 import Editor from '@/components/Editor.vue';
 import { useModel } from '@zjxpcyc/vue-tiny-store'
 import eventBus from '@/utils/eventBus'
 const mode = 'simple'
 const { user } = useModel('user')
 const { note, updateNote } = useModel('note')
-
+const disabled = computed(() => !note.value || !note.value.path)
 const valueHtml = ref()
 
 const handleSave = () => {