1
// 在 Vue 单文件组件中引入
2
import WangEditor from "@/components/WangEditor/index.vue";

1
<!-- 在模板中使用 -->
2
<template>
3
  <div>
4
    <WangEditor v-model="content" />
5
  </div>
6
</template>
7

8
<script setup>
9
import { ref } from "vue";
10
import WangEditor from "@/components/WangEditor/index.vue";
11

12
const content = ref("");
13
</script>

1
<template>
2
  <div>
3
    <WangEditor
4
      v-model="content"
5
      :config="editorConfig"
6
      @change="handleContentChange"
7
    />
8
  </div>
9
</template>
10

11
<script setup>
12
import { ref, reactive } from "vue";
13
import WangEditor from "@/components/WangEditor/index.vue";
14

15
const content = ref("");
16

17
// 编辑器配置
18
const editorConfig = reactive({
19
  // 工具栏配置
20
  toolbarConfig: {
21
    excludeKeys: ['fullscreen', 'insertVideo'] // 排除不需要的按钮
22
  },
23
  // 编辑区配置
24
  editorConfig: {
25
    placeholder: '请输入内容...',
26
    readOnly: false
27
  },
28
  // 上传图片配置
29
  uploadImgConfig: {
30
    server: '/api/upload',
31
    fieldName: 'file',
32
    maxSize: 2 * 1024 * 1024 // 2MB
33
  }
34
});
35

36
// 内容变化事件
37
function handleContentChange(newContent) {
38
  console.log('内容已更新:', newContent);
39
}
40
</script>

1
const editorConfig = {
2
  toolbarConfig: {
3
    // 自定义工具栏按钮顺序
4
    toolbarKeys: [
5
      'bold', 'italic', 'underline', 'strikeThrough',
6
      'color', 'bgColor',
7
      '|', // 分隔线
8
      'fontSize', 'fontFamily',
9
      '|',
10
      'bulletedList', 'numberedList', 'todo',
11
      '|',
12
      'link', 'image', 'table', 'codeBlock'
13
    ],
14
    // 排除不需要的按钮
15
    excludeKeys: ['fullscreen', 'insertVideo']
16
  }
17
};

1
const editorConfig = {
2
  uploadImgConfig: {
3
    // 上传服务器地址
4
    server: '/api/upload',
5
    // 上传字段名
6
    fieldName: 'file',
7
    // 最大文件大小
8
    maxSize: 2 * 1024 * 1024, // 2MB
9
    // 允许的图片类型
10
    allowedFileTypes: ['image/jpeg', 'image/png', 'image/gif'],
11
    // 自定义上传参数
12
    meta: {
13
      token: 'your-token'
14
    },
15
    // 自定义文件名
16
    customFilename: (file) => {
17
      const timestamp = Date.now();
18
      const ext = file.name.split('.').pop();
19
      return `${timestamp}.${ext}`;
20
    },
21
    // 上传成功回调
22
    onSuccess: (res) => {
23
      console.log('上传成功:', res);
24
      return res.data.url; // 返回图片 URL
25
    },
26
    // 上传失败回调
27
    onFail: (err) => {
28
      console.error('上传失败:', err);
29
    }
30
  }
31
};

1
// 自定义插件示例
2
function myPlugin(editor) {
3
  // 注册命令
4
  editor.registerCommand('myCommand', {
5
    exec: () => {
6
      // 执行命令逻辑
7
      editor.insertText('Hello WangEditor!');
8
    },
9
    undo: () => {
10
      // 撤销命令逻辑
11
      editor.deleteBackward('Hello WangEditor!'.length);
12
    }
13
  });
14

15
  // 添加工具栏按钮
16
  editor.getToolbar().addItem({
17
    key: 'myButton',
18
    title: '我的按钮',
19
    iconSvg: '<svg>...</svg>',
20
    menu: false,
21
    command: 'myCommand'
22
  });
23
}
24

25
// 使用插件
26
editor.use(myPlugin);