From 213ad3ac8006e02f8b4062453db968bd4474bf08 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Thu, 29 Feb 2024 15:58:26 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E4=BB=AA=E8=A1=A8=E6=9D=BF):=20=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=E5=9B=A0=E4=B8=8Expack=E5=86=B2=E7=AA=81=E5=AF=BC?=
 =?UTF-8?q?=E8=87=B4=E5=AF=8C=E6=96=87=E6=9C=AC=E7=BB=84=E4=BB=B6=E4=B8=8D?=
 =?UTF-8?q?=E5=8F=AF=E7=94=A8=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/rich-text/TinymceEditor.vue    | 105 ++++++++++++++++++
 1 file changed, 105 insertions(+)
 create mode 100644 core/core-frontend/src/components/rich-text/TinymceEditor.vue

diff --git a/core/core-frontend/src/components/rich-text/TinymceEditor.vue b/core/core-frontend/src/components/rich-text/TinymceEditor.vue
new file mode 100644
index 0000000000..a7d9374eb4
--- /dev/null
+++ b/core/core-frontend/src/components/rich-text/TinymceEditor.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="de-tinymce-container ed-textarea__inner">
+    <editor class="de-tinymce-content" v-model="myValue" :id="tinymceId" :init="init" />
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref, toRefs, watch } from 'vue'
+import { formatDataEaseBi } from '@/utils/url'
+import tinymce from 'tinymce/tinymce' // tinymce默认hidden，不引入不显示
+import Editor from '@tinymce/tinymce-vue' // 编辑器引入
+import 'tinymce/themes/silver/theme' // 编辑器主题
+import 'tinymce/icons/default' // 引入编辑器图标icon，不引入则不显示对应图标
+// 引入编辑器插件（基本免费插件都在这儿了）
+import 'tinymce/plugins/advlist' // 高级列表
+import 'tinymce/plugins/autolink' // 自动链接
+import 'tinymce/plugins/link' // 超链接
+import 'tinymce/plugins/image' // 插入编辑图片
+import 'tinymce/plugins/lists' // 列表插件
+import 'tinymce/plugins/charmap' // 特殊字符
+import 'tinymce/plugins/media' // 插入编辑媒体
+import 'tinymce/plugins/wordcount' // 字数统计
+import 'tinymce/plugins/table' // 表格
+import 'tinymce/plugins/contextmenu' // contextmenu
+import 'tinymce/plugins/directionality'
+import 'tinymce/plugins/nonbreaking'
+import 'tinymce/plugins/pagebreak'
+const props = defineProps({
+  modelValue: String
+})
+const myValue = ref()
+const { modelValue } = toRefs(props)
+myValue.value = modelValue
+watch(
+  () => props.modelValue,
+  newValue => {
+    myValue.value = newValue
+  }
+)
+
+const emits = defineEmits(['update:modelValue', 'change'])
+watch(
+  () => myValue.value,
+  newValue => {
+    emits('update:modelValue', newValue)
+    emits('change', newValue)
+  }
+)
+
+const tinymceId = 'tinymce-view-pf'
+const init = ref({
+  selector: '#' + tinymceId,
+  toolbar_items_size: 'small',
+  language_url: formatDataEaseBi('/tinymce-dataease-private/langs/zh_CN.js'), // 汉化路径是自定义的，一般放在public或static里面
+  language: 'zh_CN',
+  skin_url: formatDataEaseBi('/tinymce-dataease-private/skins/ui/oxide'), // 皮肤
+  content_css: formatDataEaseBi('/tinymce-dataease-private/skins/content/default/content.css'),
+  plugins:
+    'advlist autolink link image lists charmap  media wordcount table contextmenu directionality pagebreak', // 插件
+  // 工具栏
+  toolbar:
+    'undo redo |fontselect fontsizeselect |forecolor backcolor bold italic |underline strikethrough link| formatselect |' +
+    'alignleft aligncenter alignright | bullist numlist |' +
+    ' blockquote subscript superscript removeformat | table image media | fullscreen ' +
+    '| bdmap indent2em lineheight formatpainter axupimgs',
+  toolbar_location: '/',
+  font_formats:
+    '阿里巴巴普惠体=阿里巴巴普惠体 3.0 55 Regular L3;微软雅黑=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',
+  fontsize_formats: '12px 14px 16px 18px 20px 22px 24px 28px 32px 36px 48px 56px 72px', // 字体大小
+  menubar: false,
+  placeholder: '',
+  outer_placeholder: '双击输入文字',
+  inline: true,
+  branding: false
+})
+
+tinymce.init({})
+</script>
+
+<style lang="less" scoped>
+.de-tinymce-container {
+  --ed-input-text-color: var(--ed-text-color-regular);
+  --ed-input-border: var(--ed-border);
+  --ed-input-hover-border: var(--ed-border-color-hover);
+  --ed-input-focus-border: var(--ed-color-primary);
+  --ed-input-transparent-border: 0 0 0 1px transparent inset;
+  --ed-input-border-color: var(--ed-border-color);
+  --ed-input-border-radius: var(--ed-border-radius-base);
+  --ed-input-bg-color: var(--ed-fill-color-blank);
+  --ed-input-icon-color: var(--ed-text-color-placeholder);
+  --ed-input-placeholder-color: var(--ed-text-color-placeholder);
+  --ed-input-hover-border-color: var(--ed-border-color-hover);
+  --ed-input-clear-hover-color: var(--ed-text-color-secondary);
+  --ed-input-focus-border-color: var(--ed-color-primary);
+  --ed-input-width: 100%;
+  width: 100%;
+  height: 80px;
+  .de-tinymce-content {
+    width: 100%;
+    height: 100%;
+    overflow-y: auto;
+    outline: none !important;
+    border: none !important;
+  }
+}
+</style>