vue使用UEditor富文本编辑器

我们在做后台页面的时候,有时候要用到富文本编辑器,载着我用的是UEditor富文本编辑器

首先到官网下载插件  http://ueditor.baidu.com/website/ 

 下载完,解压完包之后 把包名改为  UEditor

 因为我用的是vue-cli3的脚手架,所以把改完名的压缩包放在 public文件夹下static文件夹中

 然后安装依赖 npm install vue-ueditor-wrap

在需要的页面引入 

import VueUeditorWrap from "vue-ueditor-wrap";
export default {
  components: {
    VueUeditorWrap
  },

  在template 里边 调用

<vue-ueditor-wrap v-model="dataList" :config="myCongif"></vue-ueditor-wrap>

  引用了之后我们在页面可以看到 

 控制台会报上传功能不能使用

如果需要配置,需要在static目录UEditor,php,config.json可配置文件上传路径

 以及编辑器的一些配置

myCongif: {
        serverUrl: "", // 上传文件接口
        autoHeightEnabled: true, // 编辑器不自动被内容撑高
        autoFloatEnabled: false,
        initialFrameHeight: "100%", // 初始容器高度
        initialFrameWidth: "100%", // 初始容器宽度
        enableAutoSave: true, //是否关闭本地保存功能
        // UEditor 资源文件的存放路径,如果你使用的是 vue-cli 生成的项目,通常不需要设置该选项,
        //vue-ueditor-wrap 会自动处理常见的情况,如果需要特殊配置,参考下方的常见问题2
        UEDITOR_HOME_URL: "/static/UEditor/"
      },
      dataList: ""

  

原文地址:https://www.cnblogs.com/BySee1423/p/13129464.html