qingcheng-Web/greenOrange/src/view/Index.vue

<template>
  <div class="edit-page">
    <h1>文章编辑</h1>

    <RichTextEditor
        :context="initialContent"
        :disable="isDisabled"
        @content-change="handleContentChange"
    />

    <button @click="saveContent">保存内容</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import RichTextEditor from './components/RichTextEditor.vue'

const initialContent = ref('<p>初始内容</p>') // 从接口获取
const isDisabled = ref(false)

const handleContentChange = (html) => {
  console.log('最新内容:', html)
  // 可在此处实时保存草稿
}

const saveContent = () => {
  // 提交到后端接口
  axios.post('/api/save', { content: initialContent.value })
}
</script>

<style scoped>
.edit-page {
  width: 100%;
  height: 100%;
}
</style>