feat(demo)：添加富文本组件示例(#147) (#285)

* feat(demo): 添加富文本组件示例

Signed-off-by: aonoa <[email protected]>

* chore: 多提交了个文件

Signed-off-by: aonoa <[email protected]>

* fix: @tinymce/tinymce-vue

---------

Signed-off-by: aonoa <[email protected]>
Co-authored-by: Li Kui <[email protected]>

apps/admin/package.json

@@ -26,6 +26,7 @@
     "@ant-design/icons-vue": "^7.0.1",
     "@config/vite": "workspace:*",
     "@iconify/iconify": "^3.1.1",
+    "@tinymce/tinymce-vue": "^5.1.1",
     "@vben/components": "workspace:*",
     "@vben/constants": "workspace:*",
     "@vben/demo": "workspace:*",

apps/admin/src/pages/demo/editor/rich-text-editor.vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import { Editor } from '@vben/demo'
+import { ref } from "vue";
+
+let tinymceHtml = ref('<h1>hello world!</h1>')
+
+// 使用的时候自己去 https://www.tiny.cloud/auth/signup/ 申请一个key(免费的)，替换packages/demo/src/Editor/Editor.vue中的apiKey，不要用我这个
+
+function getRichContent(html: any) {
+  // 获取编辑器内容,内容变更时触发
+  // console.log(html)
+}
+</script>
+
+<template>
+    <VbenCard title="富文本组件示例"/>
+  <Editor :echo-data="tinymceHtml" @content="getRichContent" />
+</template>
+

packages/demo/index.ts

@@ -9,3 +9,4 @@ export { default as Basic } from './src/Basic/index.vue'
 export { default as Gaode } from './src/Charts/Gaode.vue'
 export { default as Baidu } from './src/Charts/Baidu.vue'
 export { default as Google } from './src/Charts/Google.vue'
+export { default as Editor } from './src/Editor/Editor.vue'

packages/demo/package.json

@@ -14,14 +14,15 @@
   "license": "ISC",
   "dependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
+    "@tinymce/tinymce-vue": "^5.1.1",
+    "@vben/hooks": "workspace:*",
     "@vben/request": "workspace:*",
     "@vben/utils": "workspace:*",
     "@vben/vbencomponents": "workspace:*",
-    "@vben/hooks": "workspace:*",
     "vue": "^3.3.6"
   },
   "devDependencies": {
-    "@vben/types": "workspace:*",
-    "@amap/amap-jsapi-types": "^0.0.13"
+    "@amap/amap-jsapi-types": "^0.0.13",
+    "@vben/types": "workspace:*"
   }
 }

packages/demo/src/Editor/Editor.vue

@@ -0,0 +1,104 @@
+<template>
+  <div class="tinyMCE">
+    <Editor
+      v-model="content"
+      :key="showKey"
+      ref="editor"
+      :api-key="apiKey"
+      :init="editorInit"
+    />
+  </div>
+</template>
+
+<script>
+import Editor from "@tinymce/tinymce-vue";
+import { useAppTheme } from "@vben/hooks";
+import {unref} from "vue";
+
+const { isDark } = useAppTheme()
+
+export default {
+  name: "TinyMCE",
+  components: {
+    Editor,
+  },
+  props: ["echoData"],
+  data() {
+    return {
+      content: "",
+      apiKey: "4y9t8if1rdketjbt5m8mfjotp6zsd2uxgasaexrmdo6ny3qh",
+      editorInit: {
+        language: "zh_CN",
+        selector: 'textarea#open-source-plugins',
+        plugins: 'preview importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media codesample table charmap pagebreak nonbreaking anchor insertdatetime advlist lists wordcount help charmap quickbars emoticons accordion',
+        editimage_cors_hosts: ['picsum.photos'],
+        menubar: 'file edit view insert format tools table help',
+        toolbar: "undo redo | accordion accordionremove | blocks fontfamily fontsize | bold italic underline strikethrough | align numlist bullist | link image | table media | lineheight outdent indent| forecolor backcolor removeformat | charmap emoticons | code fullscreen preview | save print | pagebreak anchor codesample | ltr rtl",
+        autosave_ask_before_unload: true,
+        autosave_interval: '30s',
+        autosave_prefix: '{path}{query}-{id}-',
+        autosave_restore_when_empty: false,
+        autosave_retention: '2m',
+        image_advtab: true,
+        link_list: [
+          { title: 'My page 1', value: 'https://www.tiny.cloud' },
+          { title: 'My page 2', value: 'http://www.moxiecode.com' }
+        ],
+        image_list: [
+          { title: 'My page 1', value: 'https://www.tiny.cloud' },
+          { title: 'My page 2', value: 'http://www.moxiecode.com' }
+        ],
+        image_class_list: [
+          { title: 'None', value: '' },
+          { title: 'Some class', value: 'class-name' }
+        ],
+        importcss_append: true,
+        file_picker_callback: (callback, value, meta) => {
+          /* Provide file and text for the link dialog */
+          if (meta.filetype === 'file') {
+            callback('https://www.google.com/logos/google.jpg', { text: 'My text' });
+          }
+
+          /* Provide image and alt text for the image dialog */
+          if (meta.filetype === 'image') {
+            callback('https://www.google.com/logos/google.jpg', { alt: 'My alt text' });
+          }
+
+          /* Provide alternative source and posted for the media dialog */
+          if (meta.filetype === 'media') {
+            callback('movie.mp4', { source2: 'alt.ogg', poster: 'https://www.google.com/logos/google.jpg' });
+          }
+        },
+        height: 600,
+        image_caption: true,
+        quickbars_selection_toolbar: 'bold italic | quicklink h2 h3 blockquote quickimage quicktable',
+        noneditable_class: 'mceNonEditable',
+        toolbar_mode: 'sliding',
+        contextmenu: 'link image table',
+        skin: unref(isDark) ? 'oxide-dark' : 'oxide',
+        content_css: unref(isDark) ? 'dark' : 'default',
+        content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
+      },
+      showKey: new Date().getTime(),
+    };
+  },
+  watch: {
+    content(newVal) {
+      this.$emit("content", newVal);
+    },
+    echoData: {
+      handler(newVal) {
+        if (newVal) {
+          this.content = newVal;
+        } else {
+          this.content = "";
+          this.showKey = new Date().getTime();
+        }
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
+};
+</script>
+

packages/router/src/routes/modules/demo/editor.ts

@@ -20,6 +20,14 @@ const Editor: RouteRecordItem = {
         title: 'monaco-editor',
       },
     },
+    {
+      path: 'rich-text-editor',
+      name: 'rich-text-editor',
+      component: () => import('@/pages/demo/editor/rich-text-editor.vue'),
+      meta: {
+        title: '富文本编辑器',
+      },
+    },
   ],
 }