diff --git a/core/core-frontend/package.json b/core/core-frontend/package.json
index 9741a9d41d..673abee0e9 100644
--- a/core/core-frontend/package.json
+++ b/core/core-frontend/package.json
@@ -18,6 +18,7 @@
     "@antv/l7plot": "^0.5.5",
     "@antv/s2": "^1.49.0",
     "@codemirror/lang-sql": "^6.4.0",
+    "@npkg/tinymce-plugins": "^0.0.7",
     "@tinymce/tinymce-vue": "^5.1.0",
     "@vueuse/core": "^9.13.0",
     "ace-builds": "^1.15.3",
diff --git a/core/core-frontend/src/custom-component/rich-text/DeRichTextView.vue b/core/core-frontend/src/custom-component/rich-text/DeRichTextView.vue
index bc2b408be1..19f2d33aed 100644
--- a/core/core-frontend/src/custom-component/rich-text/DeRichTextView.vue
+++ b/core/core-frontend/src/custom-component/rich-text/DeRichTextView.vue
@@ -47,6 +47,7 @@ import 'tinymce/plugins/contextmenu' // contextmenu
 import 'tinymce/plugins/directionality'
 import 'tinymce/plugins/nonbreaking'
 import 'tinymce/plugins/pagebreak'
+import '@npkg/tinymce-plugins/letterspacing'
 import './plugins' //自定义插件
 import { computed, nextTick, reactive, ref, toRefs, watch, onMounted, PropType } from 'vue'
 import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
@@ -121,10 +122,10 @@ const init = ref({
   skin_url: formatDataEaseBi('./tinymce-dataease-private/skins/ui/oxide'), // 皮肤
   content_css: formatDataEaseBi('./tinymce-dataease-private/skins/content/default/content.css'),
   plugins:
-    'vertical-content advlist autolink link image lists charmap  media wordcount table contextmenu directionality pagebreak', // 插件
+    'vertical-content advlist autolink link image lists charmap  media wordcount table contextmenu directionality pagebreak letterspacing', // 插件
   // 工具栏
   toolbar:
-    'undo redo |fontselect fontsizeselect |forecolor backcolor bold italic |underline strikethrough link| formatselect |' +
+    'undo redo | fontselect fontsizeselect |forecolor backcolor bold italic letterspacing |underline strikethrough link| formatselect |' +
     'top-align center-align bottom-align | alignleft aligncenter alignright | bullist numlist |' +
     ' blockquote subscript superscript removeformat | table image | fullscreen ' +
     '| bdmap indent2em lineheight formatpainter axupimgs',
diff --git a/core/core-frontend/src/views/chart/components/editor/index.vue b/core/core-frontend/src/views/chart/components/editor/index.vue
index 920f4a4940..ccfc534389 100644
--- a/core/core-frontend/src/views/chart/components/editor/index.vue
+++ b/core/core-frontend/src/views/chart/components/editor/index.vue
@@ -59,6 +59,9 @@ const snapshotStore = snapshotStoreWithOut()
 const dvMainStore = dvMainStoreWithOut()
 const { canvasCollapse, curComponent, componentData, editMode } = storeToRefs(dvMainStore)
 const router = useRouter()
+let componentNameEdit = ref(false)
+let inputComponentName = ref('')
+let componentNameInput = ref(null)
 
 const { t } = useI18n()
 const loading = ref(false)
@@ -92,6 +95,35 @@ const editCalcField = ref(false)
 const isCalcFieldAdd = ref(true)
 const calcEdit = ref()
 const route = useRoute()
+
+const onComponentNameChange = () => {
+  snapshotStore.recordSnapshotCache()
+}
+
+const closeEditComponentName = () => {
+  componentNameEdit.value = false
+  if (!inputComponentName.value || !inputComponentName.value.trim()) {
+    return
+  }
+  if (inputComponentName.value.trim() === view.value.title) {
+    return
+  }
+  if (inputComponentName.value.trim().length > 64 || inputComponentName.value.trim().length < 2) {
+    ElMessage.warning('名称字段长度2-64个字符')
+    editComponentName()
+    return
+  }
+  view.value.title = inputComponentName.value
+  inputComponentName.value = ''
+}
+
+const editComponentName = () => {
+  componentNameEdit.value = true
+  inputComponentName.value = view.value.title
+  nextTick(() => {
+    componentNameInput.value.focus()
+  })
+}
 const toolTip = computed(() => {
   return props.themes === 'dark' ? 'ndark' : 'dark'
 })
@@ -1480,7 +1512,9 @@ const drop = (ev: MouseEvent, type = 'xAxis') => {
         </div>
         <div v-if="!canvasCollapse.chartAreaCollapse" style="width: 240px" class="view-panel-row">
           <el-row class="editor-title">
-            <span style="font-size: 14px">{{ view.title }}</span>
+            <span class="name-area" @dblclick="editComponentName" id="component-name">{{
+              view.title
+            }}</span>
           </el-row>
 
           <el-row style="height: calc(100vh - 110px); overflow-y: auto">
@@ -2853,6 +2887,15 @@ const drop = (ev: MouseEvent, type = 'xAxis') => {
     <FilterTree ref="filterTree" @filter-data="changeFilterData" />
   </div>
   <XpackComponent ref="openHandler" jsname="L2NvbXBvbmVudC9lbWJlZGRlZC1pZnJhbWUvT3BlbkhhbmRsZXI=" />
+  <Teleport v-if="componentNameEdit" :to="'#component-name'">
+    <input
+      width="100%"
+      @change="onComponentNameChange"
+      ref="componentNameInput"
+      v-model="inputComponentName"
+      @blur="closeEditComponentName"
+    />
+  </Teleport>
 </template>
 
 <style lang="less" scoped>
@@ -3956,4 +3999,24 @@ span {
     margin-bottom: 8px;
   }
 }
+
+.name-area {
+  position: relative;
+  line-height: 24px;
+  height: 24px;
+  font-size: 14px !important;
+  width: 300px;
+  overflow: hidden;
+  cursor: pointer;
+  input {
+    position: absolute;
+    left: 0;
+    width: 100%;
+    outline: none;
+    border: 1px solid #295acc;
+    border-radius: 4px;
+    padding: 0 4px;
+    height: 100%;
+  }
+}
 </style>