wangeditor富文本编辑器
wangeditor富文本编辑器
wangeditor富文本编辑器
官网地址: wangeditor富文本编辑器

安装在Vue3中

1
2
npm install @wangeditor/editor --save
npm install @wangeditor/editor-for-vue@next --save

配置项总体

1
2
3
4
const customConfig = {
    excludeKeys:[], // 排除工具栏
    MENU_CONF:{}, // 菜单配置
}

排除工具栏

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 需要排查那个就在excludeKeys中写那个

let excludeKeys = [
  'group-image',
  'blockquote',
  'bgColor',
  'color',
  'group-more-style',
  'fontFamily',
  'bulletedList',
  'numberedList',
  'lineHeight',
  'todo',
  'emotion',
  'insertLink',
  'group-video',
  'insertTable',
  'codeBlock',
  'divider',
  'fullScreen',
  // 'group-image',
  // 排除菜单组，写菜单组 key 的值即可
]

菜单配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
MENU_CONF: {
  // 行高
  lineHeight: {
    lineHeightList: ['2', '2.5', '3', '3.5']
  },
  // 字体
  fontFamily: {
    fontFamilyList: ['黑体', '楷体']
  },
  //  单个文件的最大体积限制，默认为 2M
  uploadImage: {
    maxFileSize: 2 * 1024 * 1024 // 1M
  },
  // 文字颜色
  color: {
    colors: ['#000', '#333', '#666']
  }
},

在avue框架中使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
const option = {
  column: [
    {
      label: '内容',
      prop: 'content',
      type: 'input',
      span: 12,
      component: 'avue-ueditor',
      action: '/blade-resource/oss/endpoint/put-file',
      propsHttp: {res: 'data', url: 'link'},
      hide: true,
      minRows: 4,
      customConfig: {
        // placeholder: '22222222',
        MENU_CONF: {
          // 行高
          lineHeight: {
            lineHeightList: ['2', '2.5', '3', '3.5']
          },
          // 字体
          fontFamily: {
            fontFamilyList: ['黑体', '楷体']
          },
          //  单个文件的最大体积限制，默认为 2M
          uploadImage: {
            maxFileSize: 2 * 1024 * 1024 // 1M
          },
          // 文字颜色
          color: {
            colors: ['#000', '#333', '#666']
          }
        },
        excludeKeys: [
          // 'group-image',
          'blockquote',
          'bgColor',
          'color',
          'group-more-style',
          'fontFamily',
          'bulletedList',
          'numberedList',
          // 'lineHeight',
          'todo',
          'emotion',
          'insertLink',
          'group-video',
          'insertTable',
          'codeBlock',
          'divider',
          'fullScreen'
        ]
      },
    }
  ]
}

底部

没有了