refactor(图表): 富文本支持系统内置字体

core/core-frontend/src/custom-component/rich-text/DeRichTextView.vue

@@ -61,11 +61,15 @@ import { useEmitt } from '@/hooks/web/useEmitt'
 import { valueFormatter } from '@/views/chart/components/js/formatter'
 import { parseJson } from '@/views/chart/components/js/util'
 import { mappingColor } from '@/views/chart/components/js/panel/common/common_table'
+import { CHART_FONT_FAMILY } from '@/views/chart/components/editor/util/chart'
+import { useAppearanceStoreWithOut } from '@/store/modules/appearance'
 const snapshotStore = snapshotStoreWithOut()
 const errMsg = ref('')
 const dvMainStore = dvMainStoreWithOut()
 const { canvasViewInfo } = storeToRefs(dvMainStore)
 const isError = ref(false)
+const appearanceStore = useAppearanceStoreWithOut()
+
 const props = defineProps({
   scale: {
     type: Number,
@@ -121,6 +125,21 @@ const canEdit = ref(false)
 // 初始化配置
 const tinymceId = 'tinymce-view-' + element.value.id
 const myValue = ref('')
+
+const systemFontFamily = appearanceStore.fontList.map(item => item.name)
+const curFontFamily = () => {
+  let result = ''
+  CHART_FONT_FAMILY.concat(
+    appearanceStore.fontList.map(ele => ({
+      name: ele.name,
+      value: ele.name
+    }))
+  ).forEach(font => {
+    result = result + font.name + '=' + font.name + ';'
+  })
+  return result
+}
+
 const init = ref({
   selector: '#' + tinymceId,
   toolbar_items_size: 'small',
@@ -136,8 +155,7 @@ const init = ref({
     'top-align center-align bottom-align | alignleft aligncenter alignright | bullist numlist |' +
     ' blockquote subscript superscript removeformat | table image ',
   toolbar_location: '/',
-  font_formats:
-    '微软雅黑=Microsoft YaHei;宋体=SimSun;黑体=SimHei;仿宋=FangSong;华文黑体=STHeiti;华文楷体=STKaiti;华文宋体=STSong;华文仿宋=STFangsong;Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings',
+  font_formats: curFontFamily(),
   fontsize_formats: '12px 14px 16px 18px 20px 22px 24px 28px 32px 36px 42px 48px 56px 72px', // 字体大小
   menubar: false,
   placeholder: '',
@@ -178,6 +196,7 @@ watch(
     }
     if (initReady.value && canEdit.value) {
       snapshotStore.recordSnapshotCache('renderChart', element.value.id)
+      initFontFamily(myValue.value)
     }
   }
 )
@@ -248,8 +267,19 @@ const assignment = content => {
   content = content.replace(/href="#\//g, 'href="/#/')
   content = content.replace(/href=\\"#\//g, 'href=\\"/#/')
   resetSelect()
+  initFontFamily(content)
   return content
 }
+const initFontFamily = htmlText => {
+  const regex = /font-family:\s*([^;"]+);/g
+  let match
+  while ((match = regex.exec(htmlText)) !== null) {
+    const font = match[1].trim()
+    if (systemFontFamily.includes(font)) {
+      appearanceStore.setCurrentFont(font)
+    }
+  }
+}
 const fieldSelect = field => {
   const ed = tinymce.editors[tinymceId]
   const fieldId = 'changeText-' + guid()