Merge pull request #12006 from dataease/pr@dev-v2@refact_richtext

refactor(图表): 富文本支持系统内置字体
This commit is contained in:
王嘉豪 2024-09-04 16:12:31 +08:00 committed by GitHub
commit dd815cab1c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -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()