ali_ai_learn_web/src/components/BlockNoteEditor.vue

<template>
   <ReactWrapper 
    component="BlockNoteReact" 
    :props="editorProps" 
    key="blocknote-editor" 
    class="blocknote-container"

  />
</template>

<script setup>
import { ref, watch } from 'vue';
import { createReactWrapper } from 'vue-react-wrapper';
import BlockNoteReact from './react-components/BlockNoteReact';

const props = defineProps({
  modelValue: {
    type: [Array, Object, null],
    default: null
  },
  editable: {
    type: Boolean,
    default: true
  }
});

const emit = defineEmits(['update:modelValue','getHtml']);

// 创建响应式props对象
const editorProps = ref({
  modelValue: props.modelValue,
  onUpdateModelValue: (value,html) => {
    console.log('onUpdateModelValue', value,html);
    emit('update:modelValue', value);
    emit('getHtml', html);
  },
  editable: props.editable
});
const ReactWrapper = createReactWrapper(BlockNoteReact,editorProps)
// 监听modelValue变化
watch(() => props.modelValue, (newVal) => {
  editorProps.value.modelValue = newVal;
}, { deep: true });
</script>

<style scoped>
.blocknote-container {
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 12px;
  min-height: 250px;
  margin: 16px 0;
}
:deep(.blocknote-editor) {
  font-size: 16px;
  line-height: 1.6;
}
:deep(.blocknote-toolbar) {
  border-bottom: 1px solid #f3f4f6;
  padding-bottom: 8px;
}
</style>