cloydlau / faim

Element Plus & Element UI isomorphic UI component library, more than Element.
MIT License
8 stars 3 forks source link

How to use ReRichText #1

Closed lxccc812 closed 11 months ago

lxccc812 commented 11 months ago

Before you start, please make sure to:

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 commented 11 months ago

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

cloydlau commented 11 months ago

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 commented 11 months ago

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.