vue项目怎么安装百度的ueditor富文本编辑器

如果你要跨域,就不要用了,【单图上传】需要解决跨域问题的前后端,不然不能用!

前端部分

1、首先去下载编辑器

http://ueditor.baidu.com/website/download.html

2、然后,把他放到static文件夹内!

image.png

3、新建组件,引入js

<template>
  <div class="editors">
    <script ref="ueditorElem"
            id="editor"
            type="text/plain">

    </script>
  </div>
</template>
<script>
import '../../../static/ueditor/ueditor.parse'
import '../../../static/ueditor/ueditor.config'
import '../../../static/ueditor/ueditor.all'
import '../../../static/ueditor/lang/zh-cn/zh-cn'

export default {
  name: 'ueditor',
  data () {
    return {
      catchData: '',
      config: {
        initialFrameWidth: null,
        initialFrameHeight: 300
      }
    }
  },
  mounted () {
    this.ue = window.UE.getEditor('editor', this.config)
  }
}
</script>
<style lang="less" scoped>
.editors {
  width: 100%;
  height: 600px;
  position: relative;
}
</style>

这一步完成会导致报错!

image.png

4、修改ueditor.config.js,内的路径

(function () {
  /**
         * 编辑器资源文件根路径。它所表示的含义是:以编辑器实例化页面为当前路径,指向编辑器资源文件(即dialog等文件夹)的路径。
         * 鉴于很多同学在使用编辑器的时候出现的种种路径问题,此处强烈建议大家使用"相对于网站根目录的相对路径"进行配置。
         * "相对于网站根目录的相对路径"也就是以斜杠开头的形如"/myProject/ueditor/"这样的路径。
         * 如果站点中有多个不在同一层级的页面需要实例化编辑器,且引用了同一UEditor的时候,此处的URL可能不适用于每个页面的编辑器。
         * 因此,UEditor提供了针对不同页面的编辑器可单独配置的根路径,具体来说,在需要实例化编辑器的页面最顶部写上如下代码即可。当然,需要令此处的URL等于对应的配置。
         * window.UEDITOR_HOME_URL = "/xxxx/xxxx/";
         */

  var URL = window.UEDITOR_HOME_URL || getUEBasePath()

修改成,

(function () {
  /**
         * 编辑器资源文件根路径。它所表示的含义是:以编辑器实例化页面为当前路径,指向编辑器资源文件(即dialog等文件夹)的路径。
         * 鉴于很多同学在使用编辑器的时候出现的种种路径问题,此处强烈建议大家使用"相对于网站根目录的相对路径"进行配置。
         * "相对于网站根目录的相对路径"也就是以斜杠开头的形如"/myProject/ueditor/"这样的路径。
         * 如果站点中有多个不在同一层级的页面需要实例化编辑器,且引用了同一UEditor的时候,此处的URL可能不适用于每个页面的编辑器。
         * 因此,UEditor提供了针对不同页面的编辑器可单独配置的根路径,具体来说,在需要实例化编辑器的页面最顶部写上如下代码即可。当然,需要令此处的URL等于对应的配置。
         * window.UEDITOR_HOME_URL = "/xxxx/xxxx/";
         */
        window.UEDITOR_HOME_URL = '/static/ueditor/'
  var URL = window.UEDITOR_HOME_URL || getUEBasePath()

/static/ueditor/是你的static下的ueditor文件路径

image.png

好了!这里前端部分就可以了!

但是粘贴图片和上传图片是不可用的,这里需要用到后端功能

后端部分

我们把php的文件夹放到服务器

然后打开ueditor.config.js,新增函数,+++号部分为新加的

(function () {
  window.UEDITOR_HOME_URL = '/static/ueditor/' 
  window.UEDITOR_IMG_URL = ' 图片上传后端地址 
  var URL = window.UEDITOR_HOME_URL || getUEBasePath()
  var imgupURL = window.UEDITOR_IMG_URL //++++
  /**
         * 配置项主体。注意,此处所有涉及到路径的配置别遗漏URL变量。
         */
  window.UEDITOR_CONFIG = {

    // 为编辑器实例添加一个路径,这个不能被注释
    UEDITOR_HOME_URL: URL,
    // 服务器统一请求接口路径

    serverUrl: imgupURL + 'php/controller.php',//+++++++

你会发现还不行,是因为跨域了!

需要在controller.php 上添加跨域header

header("Access-Control-Allow-Origin: *");

好了试下吧!

相关内容

发表评论

验证码:
点击我更换图片

最新评论