How to use ReRichText

[lxccc812]

Before you start, please make sure to:

• [X] Read the doc
• [X] Have tried the latest version
• [X] Search to see if your issue already exists
• [ ] Look for / ask questions on Stack Overflow

Link to minimal reproduction

none

Steps to reproduce

none

What is expected?

FaRichText is introduced in vite,What dependencies do I need to download?Download faim?

What is actually happening?

none

System Info

System:
    OS: Windows 11 10.0.22621
    CPU: (16) x64 AMD Ryzen 7 6800H with Radeon Graphics
    Memory: 2.77 GB / 15.19 GB
  Binaries:
    Node: 16.19.1 - D:\nvm\nodejs\node.EXE
    npm: 8.19.3 - D:\nvm\nodejs\npm.CMD
    pnpm: 8.9.2 - D:\nvm\nodejs\pnpm.CMD
  Browsers:
    Edge: Chromium (120.0.2210.61)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    @arco-design/web-vue: ^2.53.3 => 2.53.3
    @arco-plugins/vite-vue: ^1.4.5 => 1.4.5
    @aws-sdk/client-s3: ^3.468.0 => 3.468.0
    @commitlint/cli: ^17.8.1 => 17.8.1
    @commitlint/config-conventional: ^17.8.1 => 17.8.1
    @tinymce/tinymce-vue: ^5.1.1 => 5.1.1
    @types/lodash: ^4.14.202 => 4.14.202
    @types/nprogress: ^0.2.3 => 0.2.3
    @types/sortablejs: ^1.15.7 => 1.15.7
    @typescript-eslint/eslint-plugin: ^5.62.0 => 5.62.0
    @typescript-eslint/parser: ^5.62.0 => 5.62.0
    @unocss/eslint-config: ^0.58.0 => 0.58.0
    @unocss/preset-attributify: ^0.58.0 => 0.58.0
    @unocss/preset-icons: ^0.58.0 => 0.58.0
    @unocss/preset-wind: ^0.58.0 => 0.58.0
    @videojs-player/vue: ^1.0.0 => 1.0.0
    @vitejs/plugin-vue: ^3.2.0 => 3.2.0
    @vitejs/plugin-vue-jsx: ^2.1.1 => 2.1.1
    @vue/babel-plugin-jsx: ^1.1.5 => 1.1.5
    @vueuse/core: ^9.13.0 => 9.13.0
    axios: ^0.24.0 => 0.24.0
    consola: ^2.15.3 => 2.15.3
    cross-env: ^7.0.3 => 7.0.3
    dayjs: ^1.11.10 => 1.11.10
    echarts: ^5.4.3 => 5.4.3
    eslint: ^8.55.0 => 8.55.0
    eslint-config-airbnb-base: ^15.0.0 => 15.0.0
    eslint-config-prettier: ^8.10.0 => 8.10.0
    eslint-import-resolver-typescript: ^3.6.1 => 3.6.1
    eslint-plugin-import: ^2.29.0 => 2.29.0
    eslint-plugin-prettier: ^4.2.1 => 4.2.1
    eslint-plugin-vue: ^9.19.2 => 9.19.2
    husky: ^8.0.3 => 8.0.3
    less: ^4.2.0 => 4.2.0
    lint-staged: ^13.3.0 => 13.3.0
    lodash: ^4.17.21 => 4.17.21
    mitt: ^3.0.1 => 3.0.1
    nprogress: ^0.2.0 => 0.2.0
    pinia: ^2.1.7 => 2.1.7
    postcss: ^8.4.32 => 8.4.32
    postcss-html: ^1.5.0 => 1.5.0
    postcss-less: ^6.0.0 => 6.0.0
    prettier: ^2.8.8 => 2.8.8
    query-string: ^8.1.0 => 8.1.0
    rollup: ^2.79.1 => 2.79.1
    rollup-plugin-visualizer: ^5.10.0 => 5.11.0
    sortablejs: ^1.15.1 => 1.15.1
    stylelint: ^15.11.0 => 15.11.0
    stylelint-config-rational-order: ^0.1.2 => 0.1.2
    stylelint-config-recommended-vue: ^1.5.0 => 1.5.0
    stylelint-config-standard: ^34.0.0 => 34.0.0
    stylelint-config-standard-scss: ^11.1.0 => 11.1.0
    stylelint-order: ^6.0.3 => 6.0.3
    typescript: ^4.9.5 => 4.9.5
    unocss: ^0.58.0 => 0.58.0
    unplugin-vue-components: ^0.24.1 => 0.24.1
    uuid: ^9.0.1 => 9.0.1
    video.js: ^8.6.1 => 8.6.1
    vite: ^3.2.7 => 3.2.7
    vite-plugin-compression: ^0.5.1 => 0.5.1
    vite-plugin-eslint: ^1.8.1 => 1.8.1
    vite-plugin-imagemin: ^0.6.1 => 0.6.1
    vite-svg-loader: ^3.6.0 => 3.6.0
    vue: ^3.3.10 => 3.3.10
    vue-echarts: ^6.6.2 => 6.6.2
    vue-i18n: ^9.8.0 => 9.8.0
    vue-router: ^4.2.5 => 4.2.5
    vue-tsc: ^1.8.25 => 1.8.25
    vxe-table: ^4.5.14 => 4.5.14
    xe-utils: ^3.5.14 => 3.5.14

Package Manager

pnpm

Any additional comments?

No response

[lxccc812]

Additional note: The project does not use Element Plus, so the faim download failed.

[cloydlau]

Fixed in 0.5.0-beta.20

1. Run pnpm i faim tinymce
2. Minimal demo:

   
   <script setup>
   import { ref } from 'vue';
   import FaRichText from 'faim/dist/components/RichText/index';
   import 'tinymce/skins/ui/oxide/skin.min.css'
   import 'tinymce/themes/silver/theme'
   import 'tinymce/icons/default/icons'

const value = ref();

3. For more consummate demo see: https://github.com/cloydlau/faim/tree/main/demo

[cloydlau]

In order to facilitate users in changing the skin, theme, and icons of TinyMCE, these style resources need to be manually imported by the users. Therefore, when using the FaRichText component, it is also necessary to install TinyMCE additionally. However, FaRichText does not rely on Element, so there is no need to install Element.