Liv Web2文档

富文本

用于表单编辑富文本内容。

全局配置

在全局配置组件属性。

RichText组件属性配置

app.provide(RICH_TEXT_KEY, {
  toolbar: {
    mode: 'default',
    defaultConfig: {
      // 需要排除掉的菜单
      excludeKeys: ['fullScreen'],
    },
  },
  editor: {
    mode: 'default',
    defaultConfig: {
      placeholder: '请输入富文本...',
      MENU_CONF: {
        emotion: {
          emotions: '😀 😃 😄'.split(' '),
        },
        uploadImage: {
          // 单个文件的最大体积限制，默认为 2M
          maxFileSize: 1 * 1024 * 1024,
          // 最多可上传几个文件，默认为 100
          maxNumberOfFiles: 10,
        },
      },
    },
  },
});

业务注入

在全局注入处理文件业务。

注入文件上传地址

app.provide(FILE_UPLOAD_URL_KEY, '/api/file/upload');

注入文件上传header

app.provide(FILE_UPLOAD_HEADER_KEY, {
  Authorization: import.meta.env.VITE_AUTHORIZATION,
  'Blade-Auth': import.meta.env.VITE_BLADE_AUTH,
});

注入文件上传data

app.provide(FILE_UPLOAD_DATA_KEY, {
  action: 'upload',
  rename: true,
  belongOrgId: 'ruralLivingEnv',
  folder: `${new Date().getFullYear()}-${new Date().getMonth() + 1}`,
  flag: true,
});

注入处理文件上传response业务

app.provide(HANDLE_FILE_RESPONSE_KEY, response => {
  return response.data.fileUrl;
});

注入处理文件地址业务

app.provide(HANDLE_FILE_URLS_KEY, urls => {
  return (
    urls
      ?.split(',')
      ?.map(
        url =>
          `${import.meta.env.VITE_FILE_URL}/ruralLivingEnv/fileControll/downLoadFile?swfName=${url}`,
      ) ?? []
  );
});

基础用法

富文本配置

Rich Text基于WangEditor封装，你可以通过toolbar和editor属性对工具栏和编辑器进行配置。

属性

属性名	说明	类型	默认值
modelValue / v-model	输入的富文本内容	`string`	—
toolbar	工具栏配置	`RichTextToolBarProps`	—
editor	编辑器配置	`RichTextEditorProps`	—

RichTextToolBarProps

属性名	说明	类型	默认值
mode	工具栏模式	`enum`	default
style	工具栏样式	`string \| CSSProperties`	—
defaultConfig	工具栏默认配置	`Partial<IToolbarConfig>`	—

更多IToolbarConfig参数请查阅官方文档。

RichTextEditorProps

属性名	说明	类型	默认值
mode	编辑器模式	`enum`	default
style	编辑器样式	`string` / `CSSProperties`	—
defaultConfig	编辑器默认配置	`Partial<IEditorConfig>`	—

更多IEditorConfig参数请查阅官方文档。

类型声明

import type { IEditorConfig, IToolbarConfig } from '@wangeditor/editor';
import type { CSSProperties } from 'vue';

export type RichTextToolBarProps = {
  /**
   * 工具栏模式
   * @defaultValue 'default'
   */
  mode?: 'default' | 'simple';
  /**
   * 工具栏样式
   */
  style?: string | CSSProperties;
  /**
   * 工具栏默认配置
   * @see https://www.wangeditor.com/v5/toolbar-config.html
   */
  defaultConfig?: Partial<IToolbarConfig>;
};

export interface RichTextEditorProps {
  /**
   * 编辑器模式
   * @defaultValue 'default'
   */
  mode?: 'default' | 'simple';
  /**
   * 编辑器样式
   */
  style?: string | CSSProperties;
  /**
   * 编辑器默认配置
   * @see https://www.wangeditor.com/v5/editor-config.html
   */
  defaultConfig?: Partial<IEditorConfig>;
}

/**
 * 富文本组件属性
 */
export interface RichTextProps {
  /**
   * 工具栏配置
   * @remarks 可以通过该属性配置富文本的工具栏
   * @see https://www.wangeditor.com/v5/for-frame.html#%E4%BD%BF%E7%94%A8-1
   */
  toolbar?: RichTextToolBarProps;
  /**
   * 编辑器配置
   * @remarks 可以通过该属性配置富文本的编辑器
   * @see https://www.wangeditor.com/v5/for-frame.html#%E4%BD%BF%E7%94%A8-1
   */
  editor?: RichTextEditorProps;
}

富文本 ​

全局配置 ​

业务注入 ​

基础用法 ​

富文本配置 ​

属性 ​

RichTextToolBarProps ​

RichTextEditorProps ​

富文本