uve 使用百度ueditor自定义图片上传,在线图片插入,在线图片管理

最新推荐文章于 2024-06-24 10:27:56 发布

辉煌仪奇

最新推荐文章于 2024-06-24 10:27:56 发布

阅读量1k

点赞数 4

分类专栏：前端 vue 百度ueditor 文章标签： vue html

本文链接：https://blog.csdn.net/qq_38327141/article/details/117171125

版权

前端同时被 3 个专栏收录

17 篇文章 0 订阅

订阅专栏

vue

7 篇文章 0 订阅

订阅专栏

百度ueditor

1 篇文章 0 订阅

订阅专栏

前言

本帖所有内容均用于学习使用,如有涉及侵权,请看到后联系我进行删帖

上图片

在这里插入图片描述

环境

“axios”: “^0.21.1”,
“element-ui”: “^2.4.5”,
“less”: “^3.9.0”,
“less-loader”: “^5.0.0”,
“vue-baidu-map”: “^0.21.22”,
“vue”: “^2.6.11”

涉及项目相关,只列举该自定义组件涉及相关包

自定义组件

1.上传

1.1代码

<template>
  <el-upload
      class="upload-demo"
      :action="serverUrl"
      :http-request="UploadImage"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      drag
      multiple
      list-type="picture"
      accept="image/jpg,image/png,image/jpeg,image/ico,image/webp,image/bmp"
      :auto-upload="true">
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
   <!-- 下面提示就自己定义了-->
    <div slot="tip" class="el-upload__tip">只能上传jpg/jpeg/png/ico/bmp/webp文件，且不超过500kb</div>
  </el-upload>
</template>

<!--js-->
<script>
//导入axios
import axios from "axios";

export default {
  name: "upfileimage",
  //调用组件传入参数
  props: {
    serverUrl: {
      type: String,
      default() {
        //给定默认值
        return '/picture'
      }
    },
  },
  //定义变量
  data() {
    return {};
  },
  //定义函数
  methods: {
    //自定义el-upload 上传方法
    UploadImage(param) {
      //得到上传文件数据
      const formData = new FormData()
      formData.append('file', param.file)
      // 用axios上传
      axios({
        method: "POST",
        url: this.serverUrl,
        headers: {'Content-Type': 'multipart/form-data'},
        data: formData,
      })
          .then((response) => {
            param.onSuccess();  // 上传成功的图片会显示绿色的对勾
            this.uploadFileSuccess(response, param.file.name)
          })
          .catch((error) => {
            console.log(error);// 上传失败的图片会消失
            this.$message.error(param.file.name + "上传失败！请再试一次")
            param.onError()
          });
    },
    //删除文件时操作
    handleRemove(file, fileList) {
      console.log(file, fileList);

    },
    //点击图片时动作
    handlePreview(file) {

      this.$alert('<div style="width: 100%;height: 100%"><p>图片名:</p><p style="color: green">' + file.name + '</p><p>图片链接</p><p  style="color: green;word-wrap:break-word">' + file.url + '</p></div>',
          '图片详情', {dangerouslyUseHTMLString: true})
    },
    //上传后服务器返回数据解析
    uploadFileSuccess(response, file) {
      const obj = response.data
      if (obj.code == 200) {
        this.$message.success(file + "上传成功！")
        this.$emit('pictureurl', obj.reason.data.url)
      } else {
        this.$message.error(file + "上传失败！请联系管理员")
      }
    },

  }
}
</script>
<!--样式-->
<style lang="less" scoped>
/deep/ .el-upload {
  width: 100%;
  height: 100%;
}

/deep/ .el-upload-dragger {
  width: 100%;

}
</style>

1.2组件调用说明

1.调用例子

<div class="upfileimage">
<upfileimage
:serverUrl="url"
@pictureurl="uppictureurl">
</upfileimage>

2.参数说明

参数名类型默认值是否必填
serverUrl String ‘/picture’ 否

3.事件说明

事件名说明参数
pictureurl 组件上传成功后处理服务器下发数据得到url后传出 url[type:String]

参数名	类型	默认值	是否必填
serverUrl	String	‘/picture’	否

事件名	说明	参数
pictureurl	组件上传成功后处理服务器下发数据得到url后传出	url[type:String]

2.百度ueditor

2.1 代码

<template>
  <div class="rootclass" ref="getheight">
    <!--    设置百度ueditor自定义按键功能实现媒介按键-->
    <div style="display: none!important;">
      <el-button id="uploadpictures" @click="uploadpicturesopen" style="display: none!important;">上传图片</el-button>
      <el-button id="onlinepictures" @click="onlinepicturesopen" style="display: none!important;">在线图片</el-button>
      <el-button id="picturemanagement" @click="picturemanagementopen" style="display: none!important;">在线图片</el-button>
    </div>
    <!--    导入图片上传组件 弹窗样式-->

    <el-dialog

        title="图片上传"
        :visible.sync="uploadpictures"
        destroy-on-close
        center>
      <div class="upfileimage">

        <upfileimage
            :serverUrl="url"
            @pictureurl="uppictureurl"
        ></upfileimage>
      </div>
    </el-dialog>
    <!--    在线图片 弹窗样式-->

    <el-dialog

        title="在线图片"
        v-if="onlinepicturesshow"
        :visible.sync="onlinepictures"
        @closed="onlinepicturesclosed"

        center>
      <div class="picturemanagement">
         <!--        懒加载方式导入图片-->
        <ul class="infinite-list" v-infinite-scroll="load">
          <li v-for="(key,i) in count" class="infinite-list-item">
            <div style="width: 30%;height: 100%;float: left;">
              <img
                  :src="key.url"
                  style="width: 100%;height: 100%">
            </div>
            <div style="width: 50%;height: 100%;float: left;">
              <ul class="ullift">
                <li>
                  <p><span style="color:#409EFF;">图片名称:</span>{{ key.name }}</p>

                </li>
                <li>

                  <p><span style="color:#409EFF;">图片地址:</span> <a :href=key.url
                                                                  style="text-decoration:none;color: black;"
                                                                  target="view_window">点击此处查看</a></p>
                </li>
              </ul>
              <ul class="ulright">
                <li>

                  <p><span style="color:#409EFF;">是否启用:</span>{{ key.isenable }}</p>
                </li>
                <li>
                  <p><span style="color:#409EFF;">创建时间:</span>{{ key.createtime }}</p>

                </li>
              </ul>
            </div>
            <div style="width: 20%;height: 100%;float: left;">

              <el-button style="margin-top: 25% !important;" @click="Insertpicture(key)">插入图片</el-button>
            </div>
          </li>
        </ul>
      </div>
    </el-dialog>
    <!--    管理图片 弹窗样式-->
    <el-dialog
        title="管理图片"
        v-if="picturemanagementshow"
        :visible.sync="picturemanagement"
        @closed="picturemanagementlosed"
        destroy-on-close
        center>
      <div class="picturemanagement">
        <!--        懒加载方式导入图片-->
        <ul class="infinite-list" v-infinite-scroll="load">
          <li v-for="(key,i) in count" class="infinite-list-item">
            <div style="width: 30%;height: 100%;float: left;">
              <img
                  :src="key.url"
                  style="width: 100%;height: 100%">
            </div>
            <div style="width: 50%;height: 100%;float: left;">
              <ul class="ullift">
                <li>
                  <p><span style="color:#409EFF;">图片名称:</span>{{ key.name }}</p>

                </li>
                <li>

                  <p>
                    <span style="color:#409EFF;">图片地址:</span>
                    <a :href=key.url style="text-decoration:none;color: black;" target="view_window">点击此处查看</a>
                  </p>
                </li>
              </ul>
              <ul class="ulright">
                <li>

                  <p><span style="color:#409EFF;">是否启用:</span>{{ key.isenable }}</p>
                </li>
                <li>
                  <p><span style="color:#409EFF;">创建时间:</span>{{ key.createtime }}</p>

                </li>

              </ul>
            </div>
            <div style="width: 20%;height: 100%;float: left;">
              <el-button @click="picturemanagementdelete(key)" disabled>删除</el-button>
              <el-button @click="picturemanagementmodify(key,true)">启用</el-button>
              <el-button @click="picturemanagementmodify(key,false)">关闭</el-button>
            </div>
          </li>
        </ul>
      </div>
    </el-dialog>
    <vue-ueditor-wrap v-if="ueditorisenable" v-model="msg" :config="editorConfig" @ready="ready"
                      @before-init="addCustomUI">
    </vue-ueditor-wrap>
  </div>
</template>

<script>
//引入百度ueditor插件
import VueUeditorWrap from 'vue-ueditor-wrap'
//引入自定义上传图片插件
import upfileimage from "@/components/upfileimage";
import axios from "axios";
//引入axios插件
export default {
  name: "baiduueditor",
  //注册插件
  components: {
    VueUeditorWrap,
    upfileimage
  },
  //百度ueditor配置数据以及图片上传地址
  props: {
    //百度ueditor配置
    editorConfig: {
      type: Object,
      default() {
        return {

          // 初始容器高度
          initialFrameHeight: 500,
          // 初始容器宽度
          initialFrameWidth: '100%',
          // 访问 UEditor 静态资源的根路径，可参考 https://hc199421.gitee.io/vue-ueditor-wrap/#/faq
          UEDITOR_HOME_URL: '/static/UEditor/',
          // 是否自动长高
          autoHeightEnabled: false,
          //是否保持toolbar不动
          autoFloatEnabled: false,
          // 隐藏元素路径
          elementPathEnabled: false,
          //自定义菜单
          toolbars: [[
            // 'anchor', //锚点
            'undo', //撤销
            'redo', //重做
            'bold', //加粗

            // 'snapscreen', //截图
            'italic', //斜体
            'underline', //下划线
            'strikethrough', //删除线
            'subscript', //下标
            'fontborder', //字符边框
            'superscript', //上标
            'formatmatch', //格式刷
            // 'source', //源代码
            'blockquote', //引用
            // 'pasteplain', //纯文本粘贴模式
            // 'selectall', //全选
            // 'print', //打印
            // 'preview', //预览
            'horizontal', //分隔线
            'removeformat', //清除格式
            'time', //时间
            'date', //日期
            'unlink', //取消链接
            'inserttable', //插入表格
            'insertrow', //前插入行
            'insertcol', //前插入列
            'mergeright', //右合并单元格
            'mergedown', //下合并单元格
            'deleterow', //删除行
            'deletecol', //删除列
            'splittorows', //拆分成行
            'splittocols', //拆分成列
            'splittocells', //完全拆分单元格
            'deletecaption', //删除表格标题
            'inserttitle', //插入标题
            'mergecells', //合并多个单元格
            'deletetable', //删除表格

            'insertparagraphbeforetable', //"表格前插入行"
            'insertcode', //代码语言
            'fontfamily', //字体
            'fontsize', //字号
            'paragraph', //段落格式
            //'simpleupload', //单图上传
            'insertimage', //多图上传
            'edittable', //表格属性
            'edittd', //单元格属性
            'link', //超链接
            //'emotion', //表情
            'spechars', //特殊字符
            'searchreplace', //查询替换
            'map', //Baidu地图
            //'gmap', //Google地图
            // 'insertvideo', //视频
            'indent', //首行缩进
            'lineheight', //行间距
            'justifyleft', //居左对齐
            'justifyright', //居右对齐
            'justifycenter', //居中对齐
            'justifyjustify', //两端对齐
            'forecolor', //字体颜色
            'backcolor', //背景色
            'insertorderedlist', //有序列表
            'insertunorderedlist', //无序列表
            'fullscreen', //全屏
            'directionalityltr', //从左向右输入
            'directionalityrtl', //从右向左输入
            'rowspacingtop', //段前距
            'rowspacingbottom', //段后距
            'pagebreak', //分页
            // 'insertframe', //插入Iframe
            'imagenone', //默认
            'imageleft', //左浮动
            'imageright', //右浮动
            // 'attachment', //附件
            'imagecenter', //居中
            // 'wordimage', //图片转存
            'edittip ', //编辑提示
            // 'customstyle', //自定义标题
            'autotypeset', //自动排版
            // 'webapp', //百度应用
            'touppercase', //字母大写
            'tolowercase', //字母小写
            'background', //背景
            'template', //模板
            // 'scrawl', //涂鸦
            // 'music', //音乐
            'drafts', // 从草稿箱加载
            // 'charts', // 图表
            'cleardoc', //清空文档
            'help', //帮助
          ]],
          editorInstance: null,

        }
      }
    },
    //图片上传,访问,修改访问地址
    serverurls: {
      type: String,
      default() {
        return ''
      }
    },
  },
  //内部数据
  data() {
    return {
      url: this.serverurls,
      //百度ueditor加载使能
      ueditorisenable: false,
      //在线图片插件是否加载
      onlinepicturesshow: true,
      //图片管理插件是否加载
      picturemanagementshow: true,
      //参数 给服务器辨别是管理插件获取图片还是在线插件获取图片
      managemark: false,
      //懒加载列表
      count: [],
      // 懒加载上限
      maxcount: 1,
      //上传图片插件是否显示
      uploadpictures: false,
      //在线图片插件是否显示
      onlinepictures: false,
      // 管理图片插件是否显示
      picturemanagement: false,
      //百度ueditor编辑值
      msg: null,

    }
  },
  methods: {
    //打开上传图片dialog
    uploadpicturesopen() {
      this.uploadpictures = true

    },
    //打开在线图片dialog
    onlinepicturesopen() {
      this.onlinepicturesshow = true
      this.onlinepictures = true

    },
    打开管理图片dialog
    picturemanagementopen() {
      this.picturemanagementshow = true
      this.picturemanagement = true
      this.managemark = true


    },
    //关闭在线图片dialog
    onlinepicturesclosed() {
      //清空数据
      this.count = []
      this.maxcount = 1
      //销毁组件
      this.onlinepicturesshow = false
    },
    //关闭在线图片dialog
    picturemanagementlosed() {
      //清空数据
      this.count = []
      this.maxcount = 1
      this.picturemanagementshow = false
      this.managemark = false
    },
    //加载图片
    load() {
      if (this.maxcount >= this.count.length) {
        axios({
          method: "Get",
          url: this.serverurls,
          headers: {
            "Content-type": "application/json;charset=UTF-8",
          },
          params: {
            length: this.count.length,
            mark: this.managemark,
          }
        })
            .then((response) => {
              var obj = response.data
              if (obj.code == 200) {
                this.maxcount = obj.reason.data.maxcount
                this.count = this.count.concat(obj.reason.data.datalist)

              } else {
                this.$message.error('网络出问题了,请联系管理员')
              }
            })
            .catch((error) => {
              // console.log(error);
              // alert("错误")
              this.$message.error('网络出问题了,请稍后再试')
            });
      }
    },
    //在线图片插入图片
    Insertpicture(key) {
      this.editorInstance.setContent('<p><img height="50" width="50" style="width: 50px;height: 50px" src=' + key.url + '/></p>', true);
    },
    picturemanagementdelete(key) {
    },
    picturemanagementmodify(key, mark) {
      if (key.isenable == mark) {
        this.$message.error(mark ? "状态是启用状态,无法修改" : "状态是禁用状态,无法修改")
      } else {
        axios({
          method: "Put",
          url: this.serverurls,
          headers: {
            "Content-type": "application/json;charset=UTF-8",
          },
          data: {
            id: key.id,
            isenable: mark
          }
        })
            .then((response) => {
              var obj = response.data
              if (obj.code == 200) {
                key.isenable = obj.reason.data.state
                this.$message.success(obj.reason.data.msg)
              } else {
                this.$message.error('网络出问题了,请联系管理员')
              }
            })
            .catch((error) => {
              // console.log(error);
              // alert("错误")
              this.$message.error('网络出问题了,请稍后再试')
            });
      }
    },
    //百度ueditor初始化完成
    ready(editorInstance) {
      this.editorInstance = editorInstance
      this.$emit('ready', editorInstance)

    },
    addCustomUI(editorId, editorConfig) {

      // 1.自定义上传图片按钮
      window.UE.registerUI('uploadpictures' + editorId, function (editor, uiName) {
        // 注册按钮执行时的 command 命令，使用命令默认就会带有回退操作
        editor.registerCommand(uiName, {
          execCommand: () => {

          }
        })

        // 创建一个 button
        var btn = new window.UE.ui.Button({
          // 按钮的名字
          name: uiName,
          // 提示
          title: '上传图片',
          // 需要添加的额外样式，可指定 icon 图标，图标路径参考常见问题 2
          cssRules: "background-image: url('./static/upload.png') !important;background-size: cover;",
          // 点击时执行的命令
          onclick: function () {
            // 这里可以不用执行命令，做你自己的操作也可
            // fileimage
            document.querySelector("#uploadpictures").click()
          }
        })
        // 当点到编辑内容上时，按钮要做的状态反射
        editor.addListener('selectionchange', function () {
          var state = editor.queryCommandState(uiName)
          if (state === -1) {
            btn.setDisabled(true)
            btn.setChecked(false)
          } else {
            btn.setDisabled(false)
            btn.setChecked(state)
          }
        })

        // 因为你是添加 button，所以需要返回这个 button
        return btn
      }, 0 /* 指定添加到工具栏上的哪个位置，默认时追加到最后 */, editorId /* 指定这个 UI 是哪个编辑器实例上的，默认是页面上所有的编辑器都会添加这个按钮 */)

      // 2. 自定义表格居中按钮
      window.UE.registerUI('onlinepictures' + editorId, function (editor, uiName) {
        // 注册按钮执行时的 command 命令，使用命令默认就会带有回退操作
        editor.registerCommand(uiName, {
          execCommand: function () {

          }
        })

        // 创建一个 button
        var btn = new window.UE.ui.Button({
          // 按钮的名字
          name: uiName,
          // 提示
          title: '在线图片',
          // 需要添加的额外样式，可指定 icon 图标，图标路径参考常见问题 2
          cssRules: "background-image: url('/static/onlinepictures.png') !important;background-size: cover;",
          // 点击时执行的命令
          onclick: function () {
            document.querySelector("#onlinepictures").click()
          }
        })

        // 当点到编辑内容上时，按钮要做的状态反射
        editor.addListener('selectionchange', function () {
          var state = editor.queryCommandState(uiName)
          if (state === -1) {
            btn.setDisabled(true)
            btn.setChecked(false)
          } else {
            btn.setDisabled(false)
            btn.setChecked(state)
          }
        })

        // 因为你是添加 button，所以需要返回这个 button
        return btn
      }, 1 /* 指定添加到工具栏上的哪个位置，默认时追加到最后 */, editorId /* 指定这个 UI 是哪个编辑器实例上的，默认是页面上所有的编辑器都会添加这个按钮 */)
      window.UE.registerUI('picturemanagement' + editorId, function (editor, uiName) {
        // 注册按钮执行时的 command 命令，使用命令默认就会带有回退操作
        editor.registerCommand(uiName, {
          execCommand: function () {

          }
        })

        // 创建一个 button
        var btn = new window.UE.ui.Button({
          // 按钮的名字
          name: uiName,
          // 提示
          title: '管理图片',
          // 需要添加的额外样式，可指定 icon 图标，图标路径参考常见问题 2
          cssRules: "background-image: url('/static/picturemanagement.png') !important;background-size: cover;",
          // 点击时执行的命令
          onclick: function () {
            // 这里可以不用执行命令，做你自己的操作也可
            document.querySelector("#picturemanagement").click()
          }
        })

        // 当点到编辑内容上时，按钮要做的状态反射
        editor.addListener('selectionchange', function () {
          var state = editor.queryCommandState(uiName)
          if (state === -1) {
            btn.setDisabled(true)
            btn.setChecked(false)
          } else {
            btn.setDisabled(false)
            btn.setChecked(state)
          }
        })

        // 因为你是添加 button，所以需要返回这个 button
        return btn
      }, 2 /* 指定添加到工具栏上的哪个位置，默认时追加到最后 */, editorId /* 指定这个 UI 是哪个编辑器实例上的，默认是页面上所有的编辑器都会添加这个按钮 */)

    },
    uppictureurl(url) {
      this.editorInstance.setContent('<p><img height="50" width="50" style="width: 50px;height: 50px" src=' + url + '/></p>', true);
    },
    addtets() {
      // this.editorInstance.setContent('<img src="http://img.baidu.com/hi/jx2/j_0003.gif"/>', true);
      this.centerDialogVisible = true
      this.$message("click")
    },


  },
  //页面加载完成后
  mounted() {
    this.$nextTick(() => { // 页面渲染完成后的回调
      this.ueditorisenable = true
      // 给百度ueditor赋值高度
      this.editorConfig.initialFrameHeight = this.$refs.getheight.offsetHeight - 80;
    })
    // console.log('%c注意：本Demo提供的serverUrl是为了方便小伙伴们体验图片文件等上传功能。\n请勿在生产环境使用此serverUrl！！！', 'background:#f33;color:#fff')
  },
  //监视器
  watch: {
    //监视器，监听msg值变化 回传内容
    msg(val, newval) {
      // console.log(val)
      // console.log(newval)
      this.$emit('contenu', val, newval)
    }
  }
}
</script>

<style lang="less" scoped>
.rootclass {
  width: 100%;
  height: 100%;
}

.upfileimage {
  margin: 0 auto;

}

.picturemanagement {
  height: 50vh;
  margin: 0 auto;
  overflow: hidden;

  .infinite-list {
    padding: 0 !important;
    height: 100%;
    width: 100%;
    overflow: auto;

    li {
      width: 98%;
      height: 30%;
      list-style-type: none;
      border: 1px solid #3276b1;

      div .el-button {
        width: 98%;
        margin: 0 !important;
        margin-top: 5px !important;
      }
    }


  }

  .infinite-list::-webkit-scrollbar {
    display: none;
  }

}

.ullift {
  width: 50%;
  height: 100%;
  float: left;
  padding-left: 0 !important;

  li {
    height: 49% !important;
    margin: 0 !important;
    overflow: auto;

    p {
      word-wrap: break-word;
    }

  }

  li::-webkit-scrollbar {
    display: none;
  }
}

.ulright {
  width: 50%;
  height: 100%;
  float: right;
  padding-left: 0 !important;

  li {
    height: 49% !important;
    margin: 0 !important;
    overflow: auto;

    p {
      word-wrap: break-word;
    }


  }

  li::-webkit-scrollbar {
    display: none;
  }
}
</style>

2.2组件调用说明

1.调用例子

<div style="height: 100%;width: 100%">
<bai-du-ueditor
:serverurls="serverUrl"
@contenu="contenu"
@ready="ready">
</bai-du-ueditor>
</div>

2.参数说明

参数名类型默认值是否必填说明
serverurls String ‘’ 否上传,管理等功能服务器地址

3.事件说明

事件名说明参数
contenu 百度ueditor内容变化后得到的内容 val[type:String],newval[type:String]
ready 百度ueditor初始化后得到的ueditor对象 editorInstance[type:Object]

参数名	类型	默认值	是否必填	说明
serverurls	String	‘’	否	上传,管理等功能服务器地址

事件名	说明	参数
contenu	百度ueditor内容变化后得到的内容	val[type:String],newval[type:String]
ready	百度ueditor初始化后得到的ueditor对象	editorInstance[type:Object]

参考,引用组件

vue-ueditor-wrap
vue2文档地址及model
vue3文档地址及model
UEditor 配置
UEditor官网配置说明

附:
1.这是一个不会配置百度ueditor后端的程序渣偷懒的产物,此博客用于记录和学习本次开发使用中想到的方法

2.本帖所有内容均属于原创,转载请注明出处

啰嗦两句,如果要取消百度ueditor图片组件的功能,就去UEditor/dialogs/image/image.html 里面屏蔽23,24,25行代码,如果不想去改或者找不到,就直接下载我的资源吧,去我的资源里面找找
如此下图

对本帖有疑问,使用过程中出现问题,可以私信我或加我微信,备注:ueditor

在这里插入图片描述

辉煌仪奇

关注

4
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
uve 使用百度ueditor自定义图片上传,在线图片插入,在线图片管理

uve 使用百度ueditor自定义图片上传,在线图片插入,在线图片管理==前言==环境自定义组件1.上传1.1代码1.2组件调用说明2.百度ueditor2.1 代码2.2组件调用说明参考,引用组件==**2.本帖所有内容均属于原创,转载请注明出处**==对本帖有疑问,使用过程中出现问题,可以私信我或加我微信,备注:ueditor前言本帖所有内容均用于学习使用,如有涉及侵权,请看到后联系我进行删帖环境“axios”: “^0.21.1”,“element-ui”: “^2.4.5”,“l
复制链接

扫一扫