vue3.0中使用FcDesigner，保存时获取中间部分内容结构

在 Vue 3.0 中使用 FcDesigner 这样的富文本编辑器库，当你需要保存内容时，并获取其中间部分的内容结构，通常会涉及以下几个步骤：

1. **初始化组件**：首先，在你的 Vue 组件中导入 FcDesigner 并配置好它，例如：

   <template>
     <div ref="editor"></div>
   </template>

   <script>
   import { FcEditor } from 'your-fcdesigner-package';

   export default {
     components: {
       FcEditor
     },
     setup() {
       const editorRef = ref(null);
       const initEditor = () => {
         editorRef.value = new FcEditor({
           el: this.$refs.editor,
           // 配置其他选项，如高度、主题等
         });
       };
       onMounted(initEditor); // 初始化时创建编辑器
       return {
         editorRef
       };
     }
   };
   </script>

2. **监听事件**：FcDesigner 提供了一些事件，比如 `onContentChange` 或者 `onSave`，你可以通过这些事件来获取编辑器内容：

   <script>
   // ... (之前代码)

   methods: {
     saveContent() {
       const contentStructure = this.editorRef.value.getContent(); // 获取内容结构
       // 对 contentStructure 进行处理并保存
       // ...
     }
   },
   //... (其他方法)
   </script>

3. **内容结构**：FcDesigner 返回的内容结构可能会包括 HTML 标签、文本节点、样式信息等，你需要根据实际需求解析这个结构。可能涉及到 JSON 数据转换，或者直接操作 DOM。

4. **保存数据**：解析出内容结构后，你可以将其保存到本地存储（localStorage）、数据库或者其他地方。