vue中使用富文本编辑器ueditor

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

  2. 在vue-cli2.0中放在static文件夹下面
    在这里插入图片描述

  3. 新建一个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
};

4.UEDITOR_HOME_URL: "../../static/UE/",这个引用的是第一步中static文件夹下面的文件,地址务必写对
5. 在页面中使用的时候

在这里插入图片描述在这里插入图片描述

 <VueUeditorWrap
            :config="config"
            v-model="addInfo.en_content"
          ></VueUeditorWrap>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值