vue使用ueditor

1.首先进入gitee（gitee网址快）中拉代码（git clone）

https://gitee.com/msea/ueditor

2.在下载的文件中打开终端

1. 检查是否安装grunt，如果没有  则运行 npm install -g grunt-cli
2. npm i
3. grunt default

3.执行完第二步就生成一个dist文件，里面有一个index.html可以运行，单独html页面可以参考index.html，在vue中的public文件中创建static文件夹存放dist文件夹并重命名为Ueditor

4.在vue项目中运行npm install vue-ueditor-wrap

5.在main.js中引入import VueUeditorWrap from 'vue-ueditor-wrap'，并挂载app.use(VueUeditorWrap)

6.在组件中使用

1.  
   <template>
2.  
   <vue-ueditor-wrap v-model="msg" :config="myConfig"></vue-ueditor-wrap>
3.  
   <template>
4.  
   <script >
5.  
   import {
6.  
   ref,
7.  
   toRefs,
8.  
   reactive,
9.  
   computed,
10.  
    watchEffect,
11.  
    onMounted,
12.  
    onUnmounted,
13.  
    } from "vue";
14.  
     
15.  
    import { useRouter } from "vue-router";
16.  
    export default {
17.  
    name: "Ueditor",
18.  
    setup(props, context) {
19.  
    let msg = ref("");
20.  
    let myConfig = {
21.  
    // 编辑器不自动被内容撑高
22.  
    autoHeightEnabled: false,
23.  
    toolbars: [
24.  
    [
25.  
    "undo", //撤销
26.  
    "redo", //重做
27.  
    "bold", //加粗
28.  
    "indent", //首行缩进
29.  
    "snapscreen", //截图
30.  
    "italic", //斜体
31.  
    "underline", //下划线
32.  
    "strikethrough", //删除线
33.  
    "subscript", //下标
34.  
    "superscript", //上标
35.  
    "formatmatch", //格式刷
36.  
    "pasteplain", //纯文本粘贴模式
37.  
    "selectall", //全选
38.  
    "horizontal", //分隔线
39.  
    "removeformat", //清除格
40.  
    "inserttitle", //插入标题
41.  
    "cleardoc", //清空文档
42.  
    "insertcode", //代码语言
43.  
    "fontfamily", //字体
44.  
    "fontsize", //字号
45.  
    "paragraph", //段落格式
46.  
    "simpleupload", //单图上传
47.  
    "insertimage", //多图上传
48.  
    "spechars", //特殊字符
49.  
    "justifyleft", //居左对齐
50.  
    "justifyright", //居右对齐
51.  
    "justifycenter", //居中对齐
52.  
    "justifyjustify", //两端对齐
53.  
    "insertorderedlist", //有序列表
54.  
    "insertunorderedlist", //无序列表
55.  
    "fullscreen", //全屏
56.  
    "rowspacingtop", //段前距
57.  
    "rowspacingbottom", //段后距
58.  
    "pagebreak", //分页
59.  
    "imagenone", //默认
60.  
    "imageleft", //左浮动
61.  
    "imageright", //右浮动
62.  
    "attachment", //附件
63.  
    "imagecenter", //居中
64.  
    "wordimage", //图片转存
65.  
    "lineheight", //行间距
66.  
    "edittip ", //编辑提示
67.  
    "customstyle", //自定义标题
68.  
    "autotypeset", //自动排版
69.  
    "touppercase", //字母大写
70.  
    "tolowercase", //字母小写
71.  
    "template", //模板
72.  
    "scrawl", //涂鸦
73.  
    ],
74.  
    ],
75.  
    // 初始容器高度
76.  
    initialFrameHeight: 300,
77.  
    // 初始容器宽度
78.  
    initialFrameWidth: "100%",
79.  
    // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
80.  
    serverUrl: "/api/upload/index",
81.  
    // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况
82.  
    UEDITOR_HOME_URL: "/public/static/ueditor/",
83.  
    };
84.  
     
85.  
    // 返回数据
86.  
    return {
87.  
    msg,
88.  
    };
89.  
    },
90.  
    };
91.  
    </script>

可以看到有一个很重要的配置UEDITOR_HOME_URL，就是刚才存放Ueditor文件夹的目录。

7.效果图

 8.其他配置请参考UEditor Docs

这篇好文章是转载于：学新通技术网