今日小知识分享——Vue 中使用UEditor富文本编辑器

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

最近在项目使用了这个编辑器，在vue2中使用的，我就简单整理一下使用流程。

安装vue-editor-wrap

npm i vue-ueditor-wrap

首先去github下载所需压缩包， 或者去我主页下载文件 github下载地址

引用组件、注册组件： 在vue-cli2.0中放在static文件夹下面

新建一个js文件放在components中

export const ueditConfig = {
  autoHeightEnabled: false,
  initialFrameHeight: 300,
  initialFrameWidth: "100%",
  serverUrl: "文件上传地址",
  UEDITOR_HOME_URL: "../../static/UE/",
  toolbars: [
    [
      "source",
      "|",
      "undo",
      "redo",
      "|",
      "bold",
      "italic",
      "underline",
      "strikethrough",
      "superscript",
      "subscript",
      "removeformat",
      "formatmatch",
      "autotypeset",
      "blockquote",
      "pasteplain",
      "|",
      "forecolor",
      "backcolor",
      "insertorderedlist",
      "insertunorderedlist",
      "selectall",
      "cleardoc",
      "|",
      "customstyle",
      "paragraph",
      "fontfamily",
      "fontsize",
      "|",
      "indent",
      "|",
      "justifyleft",
      "justifycenter",
      "justifyright",
      "justifyjustify",
      "|",
      "touppercase",
      "tolowercase",
      "|",
      "link",
      "unlink",
      "|",
      "imagenone",
      "imageleft",
      "imageright",
      "imagecenter",
      "|",
      "simpleupload",
      "insertimage",
      "attachment",
      "insertcode",
      "|",
      "inserttable",
      "date",
      "time",
      "spechars",
      "scrawl",
      "|",
      "searchreplace",
      "drafts"
    ]
  ],
  zIndex: 99999
};

UEDITOR_HOME_URL: "../../static/UE/",这个引用的是第一步中static文件夹下面的文件，引用地址务必写对

在页面中使用的时候，记着使用v-model绑定数据

 <VueUeditorWrap :config="config" v-model="addInfo.en_content"></VueUeditorWrap>

今天周末，写的比较匆忙，今天距离国庆还有五天班，提前祝福祖国生日快乐，掘友们假期快乐，感谢掘友们支持！！！