ueditor图片上传方式处理

2019-09-13 admin

最近项目里需要用到富文本编辑器,同事选择里百度出的ueditor,但是里面自带的图片上传功能需要后台配合,配置成服务器地址,和我们实际情况不是太符合,于是另想办法,搞定图片上传。

重写配置项

首先重写里toolbars配置。最重要的是要把原先的上传图片功能按钮去掉,下面是我用到的配置项

toolbars: [
          [
            "fullscreen",
            "source",
            "undo",
            "redo",
            "bold",
            "italic",
            "underline",
            "fontborder",
            "strikethrough",
            "superscript",
            "subscript",
            "removeformat",
            "formatmatch",
            "autotypeset",
            "blockquote",
            "pasteplain",
            "|",
            "forecolor",
            "backcolor",
            "insertorderedlist",
            "insertunorderedlist",
            "selectall",
            "cleardoc",
            "mergeright", //右合并单元格
            "mergedown", //下合并单元格
            "deleterow", //删除行
            "deletecol", //删除列
            "splittorows", //拆分成行
            "splittocols", //拆分成列
            "splittocells", //完全拆分单元格
            "deletecaption", //删除表格标题
            "inserttitle", //插入标题
            "mergecells", //合并多个单元格
            "deletetable", //删除表格
            "cleardoc", //清空文档
            "insertparagraphbeforetable", //"表格前插入行"
            "fontfamily", //字体
            "fontsize", //字号
            "paragraph", //段落格式
            "inserttable", //插入表格
            "edittable", //表格属性
            "edittd", //单元格属性
            "link" //超链接
          ]
        ]

更多配置可参考官网

添加初始化方法

初始化ueditor的时候触发一个方法,因为我的项目是用vue写的,而且封装了一层ueditor,所以就对外暴露了一个beforeInit方法。

<fw-ueditor-wrap
  v-model="mainBody"
  :config="myConfig"
  @beforeInit="addCustomDialog"
  :key="1"
></fw-ueditor-wrap>
// 添加自定义弹窗
    addCustomDialog(editorId) {
      let that = this;
      window.UE.registerUI(
        "test-dialog",
        function(editor, uiName) {
          // 参考http://ueditor.baidu.com/doc/#COMMAND.LIST
          var btn = new window.UE.ui.Button({
            name: "dialog-button",
            title: "上传图片",
            cssRules: `background-image: url('/image/upload.png') !important;background-size: cover;`,
            onclick: function() {
              // 渲染dialog
              that.dialogVisible = true;
              editor.execCommand(uiName);
            }
          });

          return btn;
        },
        100 /* 指定添加到工具栏上的那个位置,默认时追加到最后 */,
        editorId /* 指定这个UI是哪个编辑器实例上的,默认是页面上所有的编辑器都会添加这个按钮 */
      );
    }

其实就是在toolbar工具栏后面又加了一个自定义的按钮,实现上传功能。

element弹窗设置

弹窗我用的是element的弹窗,使用方式参考element官网弹窗。并且使用了element的upload上传组件

<el-dialog
      title="上传图片"
      v-if="dialogVisible"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <el-upload
        class="upload-demo"
        drag
        accept=".png, .jpg"
        :headers="headers"
        :action="uploadAddr"
        :beforeUpload="beforeAvatarUpload"
        :on-success="uploadImageSuccess"
        :on-error="uploadImageError"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处,或
          <em>点击上传</em>
        </div>
        <div class="el-upload__tip" slot="tip">
          只能上传jpg/png文件,且不超过5M
        </div>
      </el-upload>
    </el-dialog>

关键的就是上传成功后需要触发uploadFile方法,将上传成功的图片插入到富文本编辑器中

uploadFile(file) {
//关键
      let editor = document.querySelector(".edui-default").getAttribute("id");
      window.UE.getEditor(editor).execCommand("insertimage", {
        src: file.url,
        width: "100",
        height: "100"
      });
      this.dialogVisible = false;
    },
    // eslint-disable-next-line no-unused-vars
    uploadImageSuccess(response, file, fileList) {
      if (response) {
        this.$message({
          message: "上传成功",
          type: "success"
        });
        let fileObj = {
          name: response.originalName,
          url: response.url
        };
        // this.fileList.push(fileObj);
        this.uploadFile(fileObj);
      } else {
        this.$message({
          message: "上传失败",
          type: "warning"
        });
      }
    }

大功告成,搞定!

[转载]原文链接:https://segmentfault.com/a/1190000020379630

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-75059.html

文章标题:ueditor图片上传方式处理

相关文章
微信JSSDK上传图片
前不久微信公开了一些接口,其中有一个uploadImage接口用于上传图片,一般和chooseImage接口配合使用。先调用chooseImage接口让用户选择一张或者多张图片,用户选择完毕后微信会返回被选中图片的id,再把图片id传给up...
2017-03-29
JS动态修改图片的URL(src)的方法
本文实例讲述了JS动态修改图片的URL(src)的方法。分享给大家供大家参考。具体如下: 下面的JS代码可以动态修改图片地址,以显示一张新的图片,实际上是通过修改图片的src属性来实现的 &lt;!DOCTYPE html&gt; &lt;...
2017-03-22
最简单的JavaScript图片轮播代码(两种方法)
通过改变每个图片的opacity属性: 素材图片: 代码一: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta cha...
2017-03-21
Element el-upload上传组件详解
upload上传是前端开发很常用的一个功能,在Vue开发中常用的Element组件库也提供了非常好用的upload组件。 基本用法 代码: &lt;el-upload :action=&quot;uploadActionUrl&quot;&...
2018-03-18
javascript异常处理
你可以使用抛出异常声明和try…catch 语句。 throw statement try…catch statement 抛出异常 使用throw抛出异常。 当你抛出一个异常,您指定包含值的表达式被抛出: throw &quot;Erro...
2015-11-12
javascript异步文件上传(兼容IE8+)
在非html5的情况下是无法用ajax把文件推送到后端的,只能通过form表单提交。但是form表单提交后浏览器会根据响应头与状态码对当前页面进行渲染、下载或跳转等行为,返回text、html、json等类型的内容时浏览器会对当前页面进行渲...
2017-04-05
javascript记住用户名和登录密码(两种方式)
下面主要通过代码给大家展示下javascript记住用户名和登录密码,具体代码内容请看下文。 第一种方式: CONTENT login.html welcome.html cookie.js common.js login.html &lt...
2017-03-29
JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】
本文实例讲述了JS常见创建类的方法。分享给大家供大家参考,具体如下: Javascript是一种基于对象的语言,你遇到的所有东西几乎都是对象。但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有Class。(不过,ES6引...
2017-04-05
H5页面实现下载文件(apk、txt等)的三种方式
需求描述 接到的原始需求是这样的,有一个H5页面,页面中有个“点击下载”的按钮,点击之后,完成下载特定的apk。 大概是下面这样的👇: 需求分析 接到需求的时候我偷乐了一下,这个H5页面最大的优点是不在微信中使用(微信好坑,各种限制,基...
2018-07-18
localResizeIMG先压缩后使用ajax无刷新上传(移动端)
下面通过文字说明和代码分析的方式给大家分享移动端图片上传之localResizeIMG先压缩后ajax无刷新上传,具体实现过程请看下文。 现在科技太发达,移动设备像素越来越高,随便一张照片2M+,但是要做移动端图片上传和pc上略有不同,移动...
2017-03-29
回到顶部