diff --git a/packages/renderless/src/rich-text-edtior/vue.ts b/packages/renderless/src/rich-text-edtior/vue.ts
index 32c185bac..59a0313b8 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
diff --git a/packages/theme/src/rich-text-editor/index.less b/packages/theme/src/rich-text-editor/index.less
index 712a1ccf3..6718720bb 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 {
@@ -71,20 +110,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 +143,6 @@
 
         button {
           width: auto;
-          color: black;
         }
       }
     }
@@ -223,15 +273,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 +300,6 @@
 
         button {
           width: auto;
-          color: black;
         }
       }
     }
@@ -265,19 +322,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;
diff --git a/packages/theme/src/rich-text-editor/vars.less b/packages/theme/src/rich-text-editor/vars.less
index 5cbc0f676..a3ce718d3 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 aac3a61af..99940a181 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 d32211dba..70889edfc 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(),