diff --git a/packages/editor/src/Editor.vue b/packages/editor/src/Editor.vue
index 72df41c1..0fd9bc03 100644
--- a/packages/editor/src/Editor.vue
+++ b/packages/editor/src/Editor.vue
@@ -1,9 +1,19 @@
 <template>
-  <Framework :code-options="codeOptions">
+  <Framework>
+    <template #header>
+      <slot name="header"></slot>
+    </template>
+
     <template #nav>
       <slot name="nav" :editorService="editorService"><TMagicNavMenu :data="menu"></TMagicNavMenu></slot>
     </template>
 
+    <template #content-before>
+      <slot name="content-before"></slot>
+    </template>
+
+    <template #src-code><slot name="src-code" :editorService="editorService"></slot></template>
+
     <template #sidebar>
       <slot name="sidebar" :editorService="editorService">
         <Sidebar :data="sidebar" :layer-content-menu="layerContentMenu">
@@ -60,6 +70,14 @@
     </template>
 
     <template #empty><slot name="empty" :editorService="editorService"></slot></template>
+
+    <template #content-after>
+      <slot name="content-after"></slot>
+    </template>
+
+    <template #footer>
+      <slot name="footer"></slot>
+    </template>
   </Framework>
 </template>
 
diff --git a/packages/editor/src/layouts/CodeEditor.vue b/packages/editor/src/layouts/CodeEditor.vue
index 30975f7a..ca51ed17 100644
--- a/packages/editor/src/layouts/CodeEditor.vue
+++ b/packages/editor/src/layouts/CodeEditor.vue
@@ -14,8 +14,8 @@ defineOptions({
 
 const props = withDefaults(
   defineProps<{
-    initValues?: string | Object;
-    modifiedValues?: string | Object;
+    initValues?: string | Record<string | number, any> | null;
+    modifiedValues?: string | Record<string | number, any> | null;
     type?: 'diff';
     language?: string;
     options?: {
diff --git a/packages/editor/src/layouts/Framework.vue b/packages/editor/src/layouts/Framework.vue
index 4e162780..a6001e67 100644
--- a/packages/editor/src/layouts/Framework.vue
+++ b/packages/editor/src/layouts/Framework.vue
@@ -1,14 +1,14 @@
 <template>
   <div class="m-editor">
-    <slot name="nav" class="m-editor-nav-menu"></slot>
+    <slot name="header"></slot>
 
-    <magic-code-editor
-      v-if="showSrc"
-      class="m-editor-content"
-      :init-values="root"
-      :options="codeOptions"
-      @save="saveCode"
-    ></magic-code-editor>
+    <slot name="nav"></slot>
+
+    <slot name="content-before"></slot>
+
+    <slot name="src-code" v-if="showSrc">
+      <CodeEditor class="m-editor-content" :init-values="root" :options="codeOptions" @save="saveCode"></CodeEditor>
+    </slot>
 
     <Layout
       v-else
@@ -39,6 +39,9 @@
         </TMagicScrollbar>
       </template>
     </Layout>
+
+    <slot name="content-after"></slot>
+    <slot name="footer"></slot>
   </div>
 </template>
 
@@ -51,6 +54,7 @@ import Layout from '@editor/components/Layout.vue';
 import type { GetColumnWidth, Services } from '@editor/type';
 
 import AddPageBox from './AddPageBox.vue';
+import CodeEditor from './CodeEditor.vue';
 
 defineOptions({
   name: 'MEditorFramework',
@@ -59,15 +63,7 @@ defineOptions({
 const DEFAULT_LEFT_COLUMN_WIDTH = 310;
 const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
 
-withDefaults(
-  defineProps<{
-    codeOptions?: Record<string, any>;
-  }>(),
-  {
-    codeOptions: () => ({}),
-  },
-);
-
+const codeOptions = inject('codeOptions', {});
 const { editorService, uiService } = inject<Services>('services') || {};
 
 const root = computed(() => editorService?.get('root'));