在VUE中使用富文本编辑器ueditor

1.搭建Vue脚手架

参考文章 链接

2.去ueditor官网下载ueditor

本文选择的是1.4.3. 3 Jsp UTF-8版本

将下载好的ueditor 文件夹放入到Vue项目的static文件夹中(这里将文件夹重命名为UE了)

3.修改ueditor.config.JS文件

添加

     window.UEDITOR_HOME_URL = "/static/ue/"

注意这里的url一定要写对,不然会出现看不到工具栏所有图标的问题。。。

在想要使用uedit的页面中

//html
<!--ueditor-->
     <div class="hello">
      <div id="editor" type="text/plain" style="width:100%;"></div>
     </div>

//js
import "../../static/ue/ueditor.config.js";
import "../../static/ue/ueditor.all.js";
import "../../static/ue/lang/zh-cn/zh-cn.js";
import "../../static/ue/ueditor.parse.js";
export default {
  name: "hello",
  data() {
    return {
      msg: "ueditor"
    };
  },
  mounted() {
    this.ue = UE.getEditor("editor");
  }
};

ueditor 就加载到页面中了

关于上传图片显示 “后端配置项没有正常加载,上传插件不能正常使用!”的问题,需要在
ueditor.config.JS 中修改 serverUrl: URL + "apiurl" 成后台接口路径即可

posted @ 2018-06-19 13:30  不酸不菜不多鱼  阅读(2025)  评论(4编辑  收藏  举报