diff --git a/examples/sites/demos/pc/app/rich-text-editor/event-usage-composition-api.vue b/examples/sites/demos/pc/app/rich-text-editor/event-usage-composition-api.vue
index 474fc68632..a1d9f3f2d1 100644
--- a/examples/sites/demos/pc/app/rich-text-editor/event-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/rich-text-editor/event-usage-composition-api.vue
@@ -7,67 +7,27 @@
 <script setup lang="jsx">
 import { RichTextEditor as TinyRichTextEditor, Notify } from '@opentiny/vue'
 const beforeCreate = function (editor) {
-  Notify({
-    type: 'info',
-    message: 'beforeCreate',
-    position: 'top',
-    duration: 3000,
-  })
+  console.log('beforeCreate')
 }
 const create = function (editor) {
-  Notify({
-    type: 'info',
-    message: 'create',
-    position: 'top',
-    duration: 3000,
-  })
+  console.log('create')
 }
 const focus = function (editor) {
-  Notify({
-    type: 'info',
-    message: 'focus',
-    position: 'top',
-    duration: 3000,
-  })
+  console.log('focus')
 }
 const blur = function (editor) {
-  Notify({
-    type: 'info',
-    message: 'blur',
-    position: 'top',
-    duration: 3000,
-  })
+  console.log('blur')
 }
 const selectionUpdate = function (editor) {
-  Notify({
-    type: 'info',
-    message: 'selectionUpdate',
-    position: 'top',
-    duration: 3000,
-  })
+  console.log('selectionUpdate')
 }
 const transaction = function (editor) {
-  Notify({
-    type: 'info',
-    message: 'transaction',
-    position: 'top',
-    duration: 3000,
-  })
+  console.log('transaction')
 }
 const destroy = function (editor) {
-  Notify({
-    type: 'info',
-    message: 'destroy',
-    position: 'top',
-    duration: 3000,
-  })
+  console.log('destroy')
 }
 const update = function (editor) {
-  Notify({
-    type: 'info',
-    message: 'update',
-    position: 'top',
-    duration: 3000,
-  })
+  console.log('update')
 }
 </script>
\ No newline at end of file
diff --git a/examples/sites/demos/pc/app/rich-text-editor/event-usage.vue b/examples/sites/demos/pc/app/rich-text-editor/event-usage.vue
index 917dbdca1a..ff361b912b 100644
--- a/examples/sites/demos/pc/app/rich-text-editor/event-usage.vue
+++ b/examples/sites/demos/pc/app/rich-text-editor/event-usage.vue
@@ -13,68 +13,28 @@ export default {
   },
   methods: {
     beforeCreate(editor) {
-      Notify({
-        type: 'info',
-        message: 'beforeCreate',
-        position: 'top',
-        duration: 3000,
-      })
+      console.log('beforeCreate')
     },
     create(editor) {
-      Notify({
-        type: 'info',
-        message: 'create',
-        position: 'top',
-        duration: 3000,
-      })
+      console.log('create')
     },
     focus(editor) {
-      Notify({
-        type: 'info',
-        message: 'focus',
-        position: 'top',
-        duration: 3000,
-      })
+      console.log('focus')
     },
     blur(editor) {
-      Notify({
-        type: 'info',
-        message: 'blur',
-        position: 'top',
-        duration: 3000,
-      })
+      console.log('blur')
     },
     selectionUpdate(editor) {
-      Notify({
-        type: 'info',
-        message: 'selectionUpdate',
-        position: 'top',
-        duration: 3000,
-      })
+      console.log('selectionUpdate')
     },
     transaction(editor) {
-      Notify({
-        type: 'info',
-        message: 'transaction',
-        position: 'top',
-        duration: 3000,
-      })
+      console.log('transaction')
     },
     destroy(editor) {
-      Notify({
-        type: 'info',
-        message: 'destroy',
-        position: 'top',
-        duration: 3000,
-      })
+      console.log('destroy')
     },
     update(editor) {
-      Notify({
-        type: 'info',
-        message: 'update',
-        position: 'top',
-        duration: 3000,
-      })
+      console.log('update')
     },
   },
 }
diff --git a/packages/renderless/src/rich-text-edtior/vue.ts b/packages/renderless/src/rich-text-edtior/vue.ts
index 32c185bac3..7b60e779aa 100644
--- a/packages/renderless/src/rich-text-edtior/vue.ts
+++ b/packages/renderless/src/rich-text-edtior/vue.ts
@@ -67,33 +67,33 @@ export const renderless = (
   let toolBar = [
     'bold',
     'italic',
-    'link',
-    'unlink',
-    'highlight',
     'underline',
     'strike',
-    'subscript',
-    'superscript',
+    'quote',
     'code',
+    'codeBlock',
     'unorderedlist',
     'orderedlist',
     'taskList',
-    'quote',
-    'codeBlock',
-    'formatClear',
-    'nodeDelete',
+    'subscript',
+    'superscript',
+    // 'nodeDelete',
     'undo',
     'redo',
     'left',
     'center',
     'right',
+    'h-box',
     'font-size',
     'line-height',
-    'h-box',
-    'img',
+    'highlight',
     'color',
-    'table',
-    'backgroundColor'
+    'backgroundColor',
+    'formatClear',
+    'link',
+    'unlink',
+    'img',
+    'table'
   ]
   if (props.customToolBar) {
     toolBar = props.customToolBar
@@ -293,7 +293,8 @@ export const renderless = (
       }),
     )
   }
-  const editor = new Editor(props.options ? props.options : defaultOptions)
+  let options = props.options ? Object.assign(defaultOptions, props.options) : defaultOptions
+  const editor = new Editor(options)
 
   const box = ref(null)
   const fontSize = ref('16px')
diff --git a/packages/theme/src/rich-text-editor/index.less b/packages/theme/src/rich-text-editor/index.less
index 712a1ccf37..41d46ebb1f 100644
--- a/packages/theme/src/rich-text-editor/index.less
+++ b/packages/theme/src/rich-text-editor/index.less
@@ -15,6 +15,45 @@
     text-decoration: underline;
   }
 
+  h1 {
+    font-size: 2em;
+    margin-block-start: 0.67em;
+    margin-block-end: 0.67em;
+    font-weight: bold;
+  }
+
+  h2 {
+    font-size: 1.5em;
+    margin-block-start: 0.83em;
+    margin-block-end: 0.83em;
+    font-weight: bold;
+  }
+
+  h3 {
+    font-size: 1.17em;
+    margin-block-start: 1em;
+    margin-block-end: 1em;
+    font-weight: bold;
+  }
+
+  h4 {
+    margin-block-start: 1.33em;
+    margin-block-end: 1.33em;
+    font-weight: bold;
+  }
+
+  h5 {
+    font-size: 0.83em;
+    margin-block-start: 1.67em;
+    margin-block-end: 1.67em;
+  }
+
+  h6 {
+    font-size: 0.83em;
+    margin-block-start: 1.67em;
+    margin-block-end: 1.67em;
+  }
+
   height: 100%;
 
   &__toolbar {
@@ -31,6 +70,10 @@
     background: transparent;
     cursor: pointer;
 
+    svg, input {
+      cursor: pointer;
+    }
+
     &:not(:disabled):hover,
     &.is-active {
       background-color: #d2e4ff;
@@ -62,6 +105,20 @@
     overflow: hidden;
     display: inline-block;
   }
+
+  .tippy-box {
+    .tippy-content {
+      .bubble-menu {
+        button {
+          border-width: 1px;
+          border-left: none;
+        }
+        &:nth-child(1) {
+          border-left-width: 1px;
+        }
+      }
+    }
+  }
 }
 
 // p-h1~6
@@ -71,20 +128,32 @@
 
     .h-options {
       position: absolute;
-      background-color: #dfdede;
       padding: .15rem;
+      background-color: var(--ti-rich-text-edito-options-bg-color);
       left: 0px;
       display: none;
-      border-radius: .4rem;
+      border-radius: var(--ti-rich-text-edito-options-border-radius);
+      box-shadow: var(--ti-rich-text-edito-options-box-shadow);
       z-index: 999;
 
       button {
+        color: black;
         margin: 0;
+        text-align: center;
+        line-height: var(--ti-common-line-height-3);
+        svg, path {
+          fill: black;
+        }
+        &:hover {
+          background-color: var(--ti-rich-text-edito-options-item-bg-color);
+          svg, path {
+            fill: var(--ti-rich-text-edito-options-item-hover-color);
+          }
+        }
       }
     }
 
     &:hover {
-      background-color: #d2e4ff;
 
       .h-options {
         display: flex;
@@ -92,7 +161,6 @@
 
         button {
           width: auto;
-          color: black;
         }
       }
     }
@@ -223,15 +291,23 @@
 
     .line-height-options {
       position: absolute;
-      background-color: #dfdede;
       padding: .15rem;
+      background-color: var(--ti-rich-text-edito-options-bg-color);
       left: 0px;
       display: none;
-      border-radius: .4rem;
+      border-radius: var(--ti-rich-text-edito-options-border-radius);
+      box-shadow: var(--ti-rich-text-edito-options-box-shadow);
       z-index: 999;
 
       button {
+        color: black;
         margin: 0;
+        text-align: center;
+        line-height: var(--ti-common-line-height-3);
+        &:hover {
+          background-color: var(--ti-rich-text-edito-options-item-bg-color);
+          color: var(--ti-rich-text-edito-options-item-hover-color);
+        }
       }
     }
 
@@ -242,7 +318,6 @@
 
         button {
           width: auto;
-          color: black;
         }
       }
     }
@@ -265,19 +340,25 @@
     .font-size-options {
       display: none;
       position: absolute;
-      border-radius: 0.4rem;
-      background-color: #dfdede;
+      border-radius: var(--ti-rich-text-edito-options-border-radius);
+      background-color: var(--ti-rich-text-edito-options-bg-color);
+      box-shadow: var(--ti-rich-text-edito-options-box-shadow);
       z-index: 99;
 
       button {
         color: black;
         margin: 0;
         text-align: center;
+        line-height: var(--ti-common-line-height-3);
+        &:hover {
+          background-color: var(--ti-rich-text-edito-options-item-bg-color);
+          color: var(--ti-rich-text-edito-options-item-hover-color);
+        }
       }
     }
 
     &:hover {
-      background-color: #d2e4ff;
+      background-color: var(--ti-rich-text-edito-options-item-bg-color);
 
       .font-size-options {
         display: flex;
@@ -290,7 +371,7 @@
 // 富文本编辑器的主题区域，需要对高度进行调整，达到融为一体
 .tiny-rich-text-editor__container {
   overflow: auto;
-  padding: 0 10px;
+  padding: 10px;
   height: 100%;
   border: 1px solid var(--ti-rich-text-editor-box-outline-color);
   border-top: 0;
@@ -338,6 +419,27 @@
       line-height: 1.1;
     }
 
+    p {
+      margin: 0;
+      line-height: 1;
+
+      &[level='1'] {
+        line-height: 1;
+      }
+
+      &[level='1.5'] {
+        line-height: 1.5;
+      }
+
+      &[level='2'] {
+        line-height: 2;
+      }
+
+      &[level='2.5'] {
+        line-height: 2.5;
+      }
+    }
+
     code {
       background-color: rgba(#616161, 0.1);
       color: #616161;
diff --git a/packages/theme/src/rich-text-editor/vars.less b/packages/theme/src/rich-text-editor/vars.less
index 5cbc0f6765..a3ce718d3f 100644
--- a/packages/theme/src/rich-text-editor/vars.less
+++ b/packages/theme/src/rich-text-editor/vars.less
@@ -6,4 +6,9 @@
   --ti-rich-text-editor-button-disabled: var(--ti-common-color-icon-disabled);
   --ti-rich-text-editor-poplist-item-selected-bg-color: var(--ti-common-color-selected-background);
   --ti-rich-text-editor-poplist-item-selected-text-color: var(--ti-common-color-selected-text-color);
+  --ti-rich-text-edito-options-bg-color: var(--ti-common-color-bg-white-normal);
+  --ti-rich-text-edito-options-box-shadow: var(--ti-common-shadow-2-down);
+  --ti-rich-text-edito-options-border-radius: var(--ti-common-border-radius-normal);
+  --ti-rich-text-edito-options-item-padding: var(--ti-common-space-6) var(--ti-common-space-5x);
+  --ti-rich-text-edito-options-item-hover-color: var(--ti-common-color-icon-hover);
 }
diff --git a/packages/vue-locale/src/lang/zh-CN.ts b/packages/vue-locale/src/lang/zh-CN.ts
index aac3a61afd..99940a1812 100644
--- a/packages/vue-locale/src/lang/zh-CN.ts
+++ b/packages/vue-locale/src/lang/zh-CN.ts
@@ -172,7 +172,7 @@ export default {
       taskList: '任务列表',
       quote: '引用',
       codeBlock: '代码块',
-      formatClear: '清楚标记',
+      formatClear: '清除标记',
       nodeDelete: '删除节点',
       undo: '回退',
       redo: '前进',
diff --git a/packages/vue/src/rich-text-editor/src/pc.vue b/packages/vue/src/rich-text-editor/src/pc.vue
index d32211dbab..70889edfcc 100644
--- a/packages/vue/src/rich-text-editor/src/pc.vue
+++ b/packages/vue/src/rich-text-editor/src/pc.vue
@@ -91,7 +91,7 @@
           class="color-button"
         >
           <label for="tiny--back-color">
-            <TinyIconRichTextColor></TinyIconRichTextColor>
+            <TinyIconRichbackgroundColor></TinyIconRichbackgroundColor>
           </label>
           <input
             id="tiny-back-color"
@@ -245,7 +245,8 @@ import {
   iconRichTextBold,
   iconRichTextCodeBlock,
   iconRichTextCodeView,
-  iconRichTextColor,
+  IconEditorTextcolor,
+  IconEditorBackground,
   iconRichTextDeleteColumn,
   iconRichTextDeleteRow,
   iconRichTextDeleteTable,
@@ -369,7 +370,8 @@ export default defineComponent({
     TinyIconRichTextBold: iconRichTextBold(),
     TinyIconRichTextCodeBlock: iconRichTextCodeBlock(),
     TinyIconRichTextCodeView: iconRichTextCodeView(),
-    TinyIconRichTextColor: iconRichTextColor(),
+    TinyIconRichTextColor: IconEditorTextcolor(),
+    TinyIconRichbackgroundColor: IconEditorBackground(),
     TinyIconRichTextDeleteColumn: iconRichTextDeleteColumn(),
     TinyIconRichTextDeleteRow: iconRichTextDeleteRow(),
     TinyIconRichTextDeleteTable: iconRichTextDeleteTable(),