Vue cli项目,使用富文本编辑器WangEditor,8小时摸爬滚打后,弃坑Tinymce、UEditor、Quill

一共尝试了 Tinymce、UEditor、Quill等好几种编辑器,最终觉得最满意的是 WangEditor。

 

1、Tinymce

开源项目ElementAdmin自带的例子,图片上传 竟然存的是 base64。

没有看出,怎么指定后端url。

另外,这个开源项目的缺陷,很多组件都是作者自己封装第三方开源组件,这样经过二次包装的,自己再使用,感觉不灵活。

而且必须读懂 别人怎么封装的,但是 这个作者封装的代码也挺多的。

 

我看网上,别人封装第三方组件,就几句话,配置也比较清晰。

所以最后弃坑了。

 

2、UEditor

这个是尝试时间最久的。

很久以前,后端项目,用传统jquery,引入UEditor有很大的难题,给编辑器返回config.json。

这次,学习了在vue中引入UEditor,网上还有 NEditor 以及 vue中引入UEditor 3套版本以上。

 

摸索了好久之后,最终解决后端返回 config.json 大难题。

需要使用官方jar包里 的ActionEnter,关键点是 有回调。

不能直接给前台返回config.json文件

@RequestMapping("/serverUrl")

    // @ResponseBody

    public Object test(HttpServletRequest request, HttpServletResponse response,

            @RequestParam(value = "action") String action,

            @RequestParam(value = "upfile", required = false) MultipartFile file) throws Exception {

        switch (action) {

        case "config"// 加载返回ueditor配置文件conf/config.json

            // return getConfig();

            return config(request, response);

        case "uploadImage"// 上传图片

            return uploadImage(request, file);

        case "uploadVideo"// 上传视频

            return "视频处理方法";

        case "uploadFile"// 上传文件

            return "文件处理方法";

        default:

            return "无效action";

        }

    }

public String config(HttpServletRequest request, HttpServletResponse response) throws IOException {

        String rootPath = request.getSession().getServletContext().getRealPath("/");

        // TODO 封装 PathKit.getClassPath()

        // String configPath = PathKit.getClassPath()+ "config.json";

        String configPath = resourceLoader.getResource("config.json").getFile().getAbsolutePath();

        // PrintWriter out = response.getWriter();

        String exec = new ActionEnter(request, rootPath, configPath).exec();

        // out.write(exec);

        return exec;

    }

 

3、Quill

简单用了下,不符合自己的需要。

 

4、WangEditor

最终搞定了,看起来也不错,网友封装的也简单好用。感谢。

参考:https://www.cnblogs.com/huge1122/p/11346115.html

关于在vue项目中使用wangEditor

 

以下代码经过自己验证

安装:npm install wangeditor --save

 

模版:

<template lang="html">

  <div class="editor">

    <div ref="toolbar" class="toolbar">

    </div>

    <div ref="editor" class="text">

    </div>

  </div>

</template>

 

<script>

  import E from 'wangeditor'

  export default {

    name: 'editoritem',

    data() {

      return {

        // uploadPath,

        editor: null,

        info_: null

      }

    },

    model: {

      prop: 'value',

      event: 'change'

    },

    props: {

      value: {

        type: String,

        default''

      },

      isClear: {

        type: Boolean,

        defaultfalse

      }

    },

    watch: {

      isClear(val) {

        // 触发清除文本域内容

        if (val) {

          this.editor.txt.clear()

          this.info_ = null

        }

      },

      value: function(value) {

        if (value !== this.editor.txt.html()) {

          this.editor.txt.html(this.value)

        }

      }

      //value为编辑框输入的内容,这里我监听了一下值,当父组件调用得时候,如果给value赋值了,子组件将会显示父组件赋给的值

    },

    mounted() {

      this.seteditor()

      this.editor.txt.html(this.value)

    },

    methods: {

      seteditor() {

        // http://192.168.2.125:8080/admin/storage/create

        this.editor = new E(this.$refs.toolbar, this.$refs.editor)

        this.editor.customConfig.uploadImgShowBase64 = false // base 64 存储图片

        this.editor.customConfig.uploadImgServer = 'http://localhost:8093/api/tp/photoUpload/upload'// 配置服务器端地址

        this.editor.customConfig.uploadImgHeaders = { }// 自定义 header

        this.editor.customConfig.uploadFileName = 'file' // 后端接受上传文件的参数名

        this.editor.customConfig.uploadImgMaxSize = 2 1024 1024 // 将图片大小限制为 2M

        this.editor.customConfig.uploadImgMaxLength = 6 // 限制一次最多上传 3 张图片

        this.editor.customConfig.uploadImgTimeout = 3 60 1000 // 设置超时时间

 

        // 配置菜单

        this.editor.customConfig.menus = [

          'head'// 标题

          'bold'// 粗体

          'fontSize'// 字号

          'fontName'// 字体

          'italic'// 斜体

          'underline'// 下划线

          'strikeThrough'// 删除线

          'foreColor'// 文字颜色

          'backColor'// 背景颜色

          'link'// 插入链接

          'list'// 列表

          'justify'// 对齐方式

          'quote'// 引用

          'emoticon'// 表情

          'image'// 插入图片

          'table'// 表格

          'video'// 插入视频

          'code'// 插入代码

          'undo'// 撤销

          'redo'// 重复

          'fullscreen' // 全屏

        ]

 

        this.editor.customConfig.uploadImgHooks = {

          fail: (xhr, editor, result) => {

            // 插入图片失败回调

          },

          success: (xhr, editor, result) => {

            // 图片上传成功回调

          },

          timeout: (xhr, editor) => {

            // 网络超时的回调

          },

          error: (xhr, editor) => {

            // 图片上传错误的回调

          },

          customInsert: (insertImg, result, editor) => {

            // 图片上传成功,插入图片的回调

            //result为上传图片成功的时候返回的数据,这里我打印了一下发现后台返回的是data:[{url:"路径的形式"},...]

            // console.log(result.data[0].url)

            //insertImg()为插入图片的函数

             //循环插入图片

             console.log("图片上传返回:"+result)

            // for (let i = 0; i < 1; i++) {

              //

              let url = result.fileName

              insertImg(url)

            // }

          }

        }

        this.editor.customConfig.onchange = (html) => {

          this.info_ = html // 绑定当前逐渐地值

          this.$emit('change'this.info_) // 将内容同步到父组件中

        }

        // 创建富文本编辑器

        this.editor.create()

      }

    }

  }

</script>

 

<style lang="css">

  .editor {

    width: 100%;

    margin: 0 auto;

    position: relative;

    z-index: 0;

  }

  .toolbar {

    border: 1px solid #ccc;

  }

  .text {

    border: 1px solid #ccc;

    min-height: 300px;

  }

</style>

 

 

具体页面使用

  import EditorBar from'@/components/WEditor/index'

  components: {EditorBar },

  <editor-bar v-model="form.content" :isClear="false" @change="change"></editor-bar>

模版里处理,后端返回的json:

{"fileName":"https://jtn-piaoju-test.oss-cn-beijing.aliyuncs.com/2019/09/jtn15175821466971.jpg","success":true}

customInsert: (insertImg, result, editor) => {

            // 图片上传成功,插入图片的回调

            //result为上传图片成功的时候返回的数据,这里我打印了一下发现后台返回的是data:[{url:"路径的形式"},...]

            // console.log(result.data[0].url)

            //insertImg()为插入图片的函数

             //循环插入图片

             console.log("图片上传返回:"+result)

            // for (let i = 0; i < 1; i++) {

              //

              let url = result.fileName

              insertImg(url)

            // }

          }

 

从前到后,解决富文本,主要是图片上传问题,花费了8小时左右。

中秋节,有1天都在解决这个问题,最晚的时候,弄到晚上11点。

最后还是 弃坑了,UEditor有 use strict严格模式下的报错问题。

不严格校验后, 虽然不报错了,但是 图片上传成功了,但是“临门一脚”  图片回显还是有问题。

 

 

最后,感谢网友。

经过这么长时间的实践,终于找到了满意的解决方案。

 

相关错误记录:

vue-cli创建的项目中引入第三方库报错 'caller', 'calle', and 'arguments' properties may not be...

有兴趣可以参考:https://blog.csdn.net/Sophie_U/article/details/76223978

Neditor是基于Ueditor的一款现代化界面的富文本编辑器。 

https://demo.neditor.notadd.com/

 

https://github.com/caiya/vue-neditor-wrap

 

https://www.jb51.net/article/135817.htm

Vue2.0中集成UEditor富文本编辑器的方法

©️2020 CSDN 皮肤主题: 猿与汪的秘密 设计师: 上身试试 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值