From 0a06f09bfc8a1616bb47738cdfa43092c75c6cdd Mon Sep 17 00:00:00 2001
From: netyum <wayhood@163.com>
Date: Thu, 7 Mar 2024 22:50:59 +0800
Subject: [PATCH] fix: tinymce style fontfamily fontsize

---
 src/components/ma-editor/index.vue | 188 +++++++++++++++--------------
 1 file changed, 95 insertions(+), 93 deletions(-)

diff --git a/src/components/ma-editor/index.vue b/src/components/ma-editor/index.vue
index 1bb778e3..97db0e81 100644
--- a/src/components/ma-editor/index.vue
+++ b/src/components/ma-editor/index.vue
@@ -11,116 +11,118 @@
   <div>
     <editor :key="editorKey" v-model="content" :init="initConfig" :id="props.id"></editor>
 
-    <a-modal v-model:visible="resourceVisible" :width="1080" :footer="false"  draggable>
+    <a-modal v-model:visible="resourceVisible" :width="1080" :footer="false" draggable>
       <template #title>资源选择器</template>
-      <ma-resource v-model="list" multiple ref="resource" returnType="url" />
+      <ma-resource v-model="list" multiple ref="resource" returnType="url"/>
     </a-modal>
   </div>
 </template>
 
 <script setup>
-  import { reactive, ref, watch, computed } from 'vue'
-  import MaResource from '@cps/ma-resource/index.vue'
-  import { useAppStore } from '@/store'
+import {reactive, ref, watch, computed} from 'vue'
+import MaResource from '@cps/ma-resource/index.vue'
+import {useAppStore} from '@/store'
 
-  import Editor from '@tinymce/tinymce-vue'
-  import tinymce from 'tinymce/tinymce'
+import Editor from '@tinymce/tinymce-vue'
+import tinymce from 'tinymce/tinymce'
 
-  import 'tinymce/icons/default'
-  import 'tinymce/models/dom'
-  import 'tinymce/themes/silver'
+import 'tinymce/icons/default'
+import 'tinymce/models/dom'
+import 'tinymce/themes/silver'
 
-  import 'tinymce/plugins/advlist'    //高级列表
-  import 'tinymce/plugins/anchor'   //锚点
-  import 'tinymce/plugins/autolink'   //自动链接
-  import 'tinymce/plugins/autosave'   //自动存稿
-  import 'tinymce/plugins/charmap'    //特殊字符
-  import 'tinymce/plugins/code'   //编辑源码
-  import 'tinymce/plugins/codesample'   //代码示例
-  import 'tinymce/plugins/directionality'   //文字方向
-  import 'tinymce/plugins/emoticons'    //表情
-  import 'tinymce/plugins/fullscreen'   //全屏
-  import 'tinymce/plugins/help'   //帮助
-  import 'tinymce/plugins/image'    //插入编辑图片
-  import 'tinymce/plugins/importcss'    //引入css
-  import 'tinymce/plugins/insertdatetime'   //插入日期时间
-  import 'tinymce/plugins/link'   //超链接
-  import 'tinymce/plugins/lists'    //列表插件
-  import 'tinymce/plugins/media'    //插入编辑媒体
-  import 'tinymce/plugins/nonbreaking'    //插入不间断空格
-  import 'tinymce/plugins/pagebreak'    //插入分页符
-  import 'tinymce/plugins/preview'    //预览
-  import 'tinymce/plugins/quickbars'    //快速工具栏
-  import 'tinymce/plugins/save'   //保存
-  import 'tinymce/plugins/searchreplace'    //查找替换
-  import 'tinymce/plugins/table'    //表格
-  import 'tinymce/plugins/template'   //内容模板
-  import 'tinymce/plugins/visualblocks'   //显示元素范围
-  import 'tinymce/plugins/visualchars'    //显示不可见字符
-  import 'tinymce/plugins/wordcount'    //字数统计
+import 'tinymce/plugins/advlist'    //高级列表
+import 'tinymce/plugins/anchor'   //锚点
+import 'tinymce/plugins/autolink'   //自动链接
+import 'tinymce/plugins/autosave'   //自动存稿
+import 'tinymce/plugins/charmap'    //特殊字符
+import 'tinymce/plugins/code'   //编辑源码
+import 'tinymce/plugins/codesample'   //代码示例
+import 'tinymce/plugins/directionality'   //文字方向
+import 'tinymce/plugins/emoticons'    //表情
+import 'tinymce/plugins/fullscreen'   //全屏
+import 'tinymce/plugins/help'   //帮助
+import 'tinymce/plugins/image'    //插入编辑图片
+import 'tinymce/plugins/importcss'    //引入css
+import 'tinymce/plugins/insertdatetime'   //插入日期时间
+import 'tinymce/plugins/link'   //超链接
+import 'tinymce/plugins/lists'    //列表插件
+import 'tinymce/plugins/media'    //插入编辑媒体
+import 'tinymce/plugins/nonbreaking'    //插入不间断空格
+import 'tinymce/plugins/pagebreak'    //插入分页符
+import 'tinymce/plugins/preview'    //预览
+import 'tinymce/plugins/quickbars'    //快速工具栏
+import 'tinymce/plugins/save'   //保存
+import 'tinymce/plugins/searchreplace'    //查找替换
+import 'tinymce/plugins/table'    //表格
+import 'tinymce/plugins/template'   //内容模板
+import 'tinymce/plugins/visualblocks'   //显示元素范围
+import 'tinymce/plugins/visualchars'    //显示不可见字符
+import 'tinymce/plugins/wordcount'    //字数统计
 
 
-  const appStore = useAppStore()
+const appStore = useAppStore()
 
-  const props = defineProps({
-    modelValue: { type: String },
-    height: { type: Number, default: 400 },
-    id: { type: String, default: () => 'tinymce' + new Date().getTime().toString() },
-    plugins: {
-      type: [String, Array],
-      default:
+const props = defineProps({
+  modelValue: {type: String},
+  height: {type: Number, default: 400},
+  id: {type: String, default: () => 'tinymce' + new Date().getTime().toString()},
+  plugins: {
+    type: [String, Array],
+    default:
         "preview searchreplace autolink directionality visualblocks visualchars fullscreen link media code codesample table charmap nonbreaking insertdatetime advlist lists wordcount autosave"
-    },
-    toolbar: {
-      type: [String, Array],
-      default:
+  },
+  toolbar: {
+    type: [String, Array],
+    default:
         "code undo redo restoredraft | paste pastetext | forecolor backcolor bold italic underline strikethrough link codesample | fullscreen preview | alignleft aligncenter alignright alignjustify outdent indent formatpainter | \
-    styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | table media \
-    charmap pagebreak insertdatetime | resource"
-    }
-  })
+      styles codeformat fontfamily fontsize | bullist numlist | blockquote subscript superscript removeformat | table tablecellborderstyle media \
+      charmap pagebreak insertdatetime | resource"
+  }
+})
 
-  const emit = defineEmits(['update:modelValue', 'change'])
+const emit = defineEmits(['update:modelValue', 'change'])
 
-  let content = computed({
-    get() {
-      return props.modelValue
-    },
-    set(value) {
-      emit('update:modelValue', value)
-    },
-  });
+let content = computed({
+  get() {
+    return props.modelValue
+  },
+  set(value) {
+    emit('update:modelValue', value)
+  },
+});
 
-  const list = ref([])
-  const resource = ref()
-  const resourceVisible = ref(false)
-  const appBaseUrl = import.meta.env.VITE_APP_BASE
+const list = ref([])
+const resource = ref()
+const resourceVisible = ref(false)
+const appBaseUrl = import.meta.env.VITE_APP_BASE
 
-  const initConfig = reactive({
-    menubar: false, // 菜单栏显隐
-    language_url: `${appBaseUrl}tinymce/i18n/zh_CN.js`,
-    language: 'zh_CN',
-    skin_url: appBaseUrl + (appStore.mode === 'light' ? 'tinymce/skins/ui/tinymce-5' : 'tinymce/skins/ui/tinymce-5-dark'),
-    height: props.height,
-    toolbar_mode: 'wrap',
-    plugins: props.plugins,
-    toolbar: props.toolbar,
-    branding: false,
-    content_css: `${appBaseUrl}tinymce/skins/content/default/content.css`,
-    setup: (editor) => {
-      editor.on('init', () => {
-        editor.getBody().style.fontSize = '14px';
-      })
-      editor.ui.registry.addButton('resource', {
-        text:'资源选择器',
-        onAction: () => resourceVisible.value = true
-      })
-    }
-  })
+const initConfig = reactive({
+  menubar: false, // 菜单栏显隐
+  language_url: `${appBaseUrl}tinymce/i18n/zh_CN.js`,
+  language: 'zh_CN',
+  skin_url: appBaseUrl + (appStore.mode === 'light' ? 'tinymce/skins/ui/tinymce-5' : 'tinymce/skins/ui/tinymce-5-dark'),
+  height: props.height,
+  toolbar_mode: 'wrap',
+  plugins: props.plugins,
+  toolbar: props.toolbar,
+  branding: false,
+  content_css: `${appBaseUrl}tinymce/skins/content/default/content.css`,
+  font_size_formats: '12px 14px 16px 18px 20px 22px 24px 26px 28px 30px 32px 34px 36px 38px 40px',
+  font_size_input_default_unit: 'px',
+  setup: (editor) => {
+    editor.on('init', () => {
+      editor.getBody().style.fontSize = '14px';
+    })
+    editor.ui.registry.addButton('resource', {
+      text: '资源选择器',
+      onAction: () => resourceVisible.value = true
+    })
+  }
+})
 
-  const editorKey = ref(new Date().getTime())
+const editorKey = ref(new Date().getTime())
 
-  watch(
+watch(
     () => list.value,
     imgs => {
       let tmp = ''
@@ -133,9 +135,9 @@
       resource.value.clearSelecteds()
       resourceVisible.value = false
     }
-  )
-  watch(
+)
+watch(
     () => content.value,
     vl => emit('change', vl)
-  )
+)
 </script>