vue3使用wangeditor富文本编辑器

npm下载

 1 npm i wangeditor -S         

在要使用的页面导入

1 import EWangEditor from "wangeditor";
2 import {onMounted, reactive} from "vue";

定义

 复制下面的代码，放到上面截图的位置即可

 1   setup() {
 2     let data = reactive({});
 3     onMounted(() => {
 4       let editor = new EWangEditor("#editor");
 5       editor.config.uploadImgShowBase64 = true;
 6       editor.config.onchangeTimeout = 400;
 7 
 8       editor.config.customAlert = (err) => {
 9         console.log(err);
10       };
11 
12       editor.customConfig = editor.customConfig
13           ? editor.customConfig
14           : editor.config;
15 
16       editor.customConfig.onchange = (html) => {
17         data.editorContent = html;
18         console.log(html);
19       };
20         //以下为新增
21       const menuItem = [  //工具栏里有哪些工具
22         "head",
23         "bold",
24         "fontSize",
25         "fontName",
26         "italic",
27         "underline",
28         "indent",
29         "lineHeight",
30         "foreColor",
31         "backColor",
32         "link",
33         "list",
34         "justify",
35         "image",
36         "video",
37       ];
38 
39       editor.config.menus = [...menuItem]; /* 应用设置好的工具栏 */
40 
41       editor.config.colors = ["#000000", "#eeece0", "#1c487f", "#4d80bf"];  /* 文字颜色、背景色可以选择哪些颜色? */
42 
43       editor.config.fontNames = [ /* 字体工具提供哪些字体? */
44         "黑体",
45         "仿宋",
46         "楷体",
47         "标楷体",
48         "华文仿宋",
49         "华文楷体",
50         "宋体",
51         "微软雅黑",
52       ];
53 
54       editor.config.height = 500;  //你可能发现这个编辑器是没法用样式调高度的?
55       //新增至此
56       editor.create();
57     });
58 
59   }

使用

1 <div name="editor" id="editor" ref="editor"></div>

运行