refactor: Use the new rich text component TinyMCE 6.x

frontend/package.json

@@ -22,7 +22,7 @@
     "@eslint/js": "^9.28.0",
     "@highlightjs/vue-plugin": "^2.1.0",
     "@npkg/tinymce-plugins": "^0.0.7",
-    "@tinymce/tinymce-vue": "^5.1.0",
+    "@tinymce/tinymce-vue": "^4.0.7",
     "@vueuse/core": "^14.1.0",
     "core-js": "^3.49.0",
     "dayjs": "^1.11.13",
@@ -38,7 +38,7 @@
     "markdown-it": "^14.1.0",
     "mitt": "^3.0.1",
     "snowflake-id": "^1.1.0",
-    "tinymce": "^7.9.1",
+    "tinymce": "6.8.6",
     "vue": "^3.5.13",
     "vue-dompurify-html": "^5.3.0",
     "vue-i18n": "^9.14.4",

frontend/src/views/dashboard/components/component-list.ts

@@ -49,7 +49,7 @@ const COMPONENT_LIST = [
     component: 'SQText',
     name: 'new text',
     locked: false,
-    propValue: null,
+    propValue: '',
     editing: false,
     x: 1,
     y: 1,

frontend/src/views/dashboard/components/sq-text/index.vue

@@ -31,6 +31,7 @@
 <script setup lang="ts">
 import tinymce from 'tinymce/tinymce'
 import Editor from '@tinymce/tinymce-vue'
+import 'tinymce/themes/silver/theme'
 import 'tinymce/icons/default'
 import 'tinymce/plugins/link'
 import '@npkg/tinymce-plugins/letterspacing'
@@ -59,13 +60,17 @@ const tinymceId = 'vue-tinymce-' + +new Date() + ((Math.random() * 1000).toFixed
 const init = reactive({
   base_url: '/tinymce', // 指向 public/tinymce 目录
   suffix: '.min',
-  selector: tinymceId,
+  selector: '#' + tinymceId,
   language: 'zh_CN',
   skin: 'oxide',
   plugins: 'link letterspacing', // 插件
   // 工具栏
+  // toolbar:
+  //   'fontfamily fontsize |forecolor backcolor bold italic letterspacing |underline strikethrough link lineheight| blocks |' +
+  //   'top-align center-align bottom-align | alignleft aligncenter alignright | bullist numlist |' +
+  //   ' blockquote subscript superscript removeformat | table image ',
   toolbar:
-    'fontfamily fontsize | |forecolor backcolor bold italic letterspacing |underline strikethrough link lineheight| formatselect | alignleft aligncenter alignright |',
+    'fontfamily fontsize | forecolor backcolor bold italic letterspacing | underline strikethrough link lineheight | formatselect | alignleft aligncenter alignright ',
   toolbar_location: '/',
   font_family_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',