vue中如何使用ueditor？_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.在组件中使用

<template>
    <vue-ueditor-wrap v-model="msg" :config="myConfig"></vue-ueditor-wrap>
<template>
<script >
import {
  ref,
  toRefs,
  reactive,
  computed,
  watchEffect,
  onMounted,
  onUnmounted,
} from "vue";
 
import { useRouter } from "vue-router";
export default {
  name: "Ueditor",
  setup(props, context) {
    let msg = ref("");
    let myConfig = {
      // 编辑器不自动被内容撑高
      autoHeightEnabled: false,
      toolbars: [
        [
          "undo", //撤销
          "redo", //重做
          "bold", //加粗
          "indent", //首行缩进
          "snapscreen", //截图
          "italic", //斜体
          "underline", //下划线
          "strikethrough", //删除线
          "subscript", //下标
          "superscript", //上标
          "formatmatch", //格式刷
          "pasteplain", //纯文本粘贴模式
          "selectall", //全选
          "horizontal", //分隔线
          "removeformat", //清除格
          "inserttitle", //插入标题
          "cleardoc", //清空文档
          "insertcode", //代码语言
          "fontfamily", //字体
          "fontsize", //字号
          "paragraph", //段落格式
          "simpleupload", //单图上传
          "insertimage", //多图上传
          "spechars", //特殊字符
          "justifyleft", //居左对齐
          "justifyright", //居右对齐
          "justifycenter", //居中对齐
          "justifyjustify", //两端对齐
          "insertorderedlist", //有序列表
          "insertunorderedlist", //无序列表
          "fullscreen", //全屏
          "rowspacingtop", //段前距
          "rowspacingbottom", //段后距
          "pagebreak", //分页
          "imagenone", //默认
          "imageleft", //左浮动
          "imageright", //右浮动
          "attachment", //附件
          "imagecenter", //居中
          "wordimage", //图片转存
          "lineheight", //行间距
          "edittip ", //编辑提示
          "customstyle", //自定义标题
          "autotypeset", //自动排版
          "touppercase", //字母大写
          "tolowercase", //字母小写
          "template", //模板
          "scrawl", //涂鸦
        ],
      ],
      // 初始容器高度
      initialFrameHeight: 300,
      // 初始容器宽度
      initialFrameWidth: "100%",
      // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
      serverUrl: "/api/upload/index",
      // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况
      UEDITOR_HOME_URL: "/public/static/ueditor/",
    };
 
    // 返回数据
    return {
      msg,
    };
  },
};
</script>

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

7.效果图

 8.其他配置请参考UEditor Docs