vue中引入ueditor富文本编辑器的方法与遇到的问题及解决方法

下载ueditor

度娘轻松就能找到下载地址,不过我还是放一个:下载地址,因为我后台用的是PHP,所以我下载的是PHP的版本。

使用

  1. 下载下来的东西是一个压缩包,将其解压放在vue项目的static目录,且他的目录如下
    在这里插入图片描述

  2. 找到ueditor.config.js文件,修改其中的配置
    在这里插入图片描述
    这里需要注意的是必须要在utf8-php后面加上/,否则会报错,ueditor富文本框不会显示。
    当然你按照上面的步骤配置后,富文本框是能显示的,但是图片上传功能是不能使用的,控制台报错如下:
    在这里插入图片描述

  3. 我后台是用的PHP,在我的PHP项目中,我也引入了ueditor,所以在vue中我需要做的就是将请求地址指向我PHP项目下的ueditor里
    依旧是在ueditor.config.js文件里:
    在这里插入图片描述

  4. 在我的PHP项目中ueditor的配置如下:
    ueditor.config.js文件下的所有配置我都没有更改
    config.json文件中需要修改如下内容:
    在这里插入图片描述
    划线第一条:图片上传提交地址
    第二条和第三条都有注释(文件本身就有)

  5. 以上就是ueditor的配置,再就是vue中该怎么使用的问题

    1. main.js文件中引入ueditor相关的js文件
      import '../static/utf8-php/ueditor.config'
      import '../static/utf8-php/ueditor.all.js'
      import '../static/utf8-php/lang/zh-cn/zh-cn.js'
      import '../static/utf8-php/ueditor.parse.js'
      
    2. 创建一个ueditor的组件:
      	<template>
      		 <div class="editor_box">
      		 	<div id="editor" type="text/plain"></div>
      		 </div>
      	</template>
      
      <script>
        export default {
          name: 'ueditor',
          data () {
            return {
              editor: null
            }
          },
          props: {
            value: '',
            config: {}
          },
          mounted () {
            this.editor = window.UE.getEditor('editor', this.config);
            // this.editor.addListener('ready', () => {
            //   this.editor.setContent(this.value)
            // })
          },
          methods: {
            getUEContent () {
              // return this.editor.getContent()
            }
          },
          destroyed () {
            this.editor.destroy()
          }
        }
      </script>
      
      <style scoped lang="scss">
        .editor_box{
          width: 100%;
          height: 100%;
          #editor{
            width: 100%;
            height: 100%;
          }
        }
        .edui-default .edui-editor{
          width: 100% !important;
        }
      </style>
      
    3. 在需要使用富文本框的地方再引用这个组件就OK了,vue组件的引用就不用多说了吧。
  6. 这样ueditor在vue中也能实现图片上传功能了,我还报了跨域请求的错,这时候找到PHP项目中的ueditor的配置文件controller.php文件:
    在这里插入图片描述
    我还没有验证是上面一条产生效果还是下面一条,不过我估计是下面一条,上面一条文件里本身是有的,但是被注释掉了。

    但是这样多图上传是OK的,但是单图上传会出错,我实在是没找到解决办法了,就只能再摸索摸索了。

原文链接:加载失败,请重新获取