vue 整合 vue-ueditor-wrap 富文本编辑器

 VUE   高蒙   阅读(59)   评论(0)   2019-03-01 11:10:56    vue vue-ueditor-wrap 


vue整合百度的富文本编辑器 

材料:  

vue2.0

vue-ueditor-wrap

vue-ueditor-wrap 下载地址: https://pan.baidu.com/s/1h73_MGkCSJ_JmlBucRkBUQ

密码:ocd3

把下载的压缩包解压 放到你的vue项目的 static 里面 并且在里面创建文件夹 UEditor


在你需要富文本编辑器的页面引入VueUeditorWrap组件

import VueUeditorWrap from 'vue-ueditor-wrap'

注册组件:

components: {
  VueUeditorWrap
}

页面中挂载:

<vue-ueditor-wrap v-model="msg" :config="myConfig"></vue-ueditor-wrap>
data () {
  return {
    msg: '<h2><img src="http://img.baidu.com/hi/jx2/j_0003.gif"/>Vue + UEditor + v-model双向绑定</h2>',
    myConfig: {
      // 编辑器不自动被内容撑高
      autoHeightEnabled: false,
      // 初始容器高度
      initialFrameHeight: 240,
      // 初始容器宽度
      initialFrameWidth: '100%',
      // 上传文件接口(这个地址是我为了方便各位体验文件上传功能搭建的临时接口,请勿在生产环境使用!!!)
      // UEditor 资源文件的存放路径,如果你使用的是 vue-cli 生成的项目,通常不需要设置该选项,vue-ueditor-wrap 会自动处理常见的情况,如果需要特殊配置,参考下方的常见问题2
      UEDITOR_HOME_URL: '/static/UEditor/'
    }
  }
}

这样你就可以在页面中看到你加载出来的富文本编辑器了


当然富文本编辑器里面少不了上传图片这个功能,如何正常的使用这个功能我们应该怎么配置

步骤如下:


1、复制文件到你网站的更目录

QQ截图20190301105820.png

把这个文件复制到你的网站更目录

2、修改文件

    1、 打开你复制的文件夹找到文件controller.php

    2、在你的文件有如下代码:

      header('Access-Control-Allow-Origin: http://localhost:8080'); //设置http://www.baidu.com允许跨域访问
       header('Access-Control-Allow-Headers: X-Requested-With,X_Requested_With'); //设置允许的跨域header

请把前面的注释去掉  并且修改成:

Access-Control-Allow-Origin: http://localhost:8080'

默认的是:

Access-Control-Allow-Origin: http://www.baidu.com'

修改完成后保存

3、打开文件Uploader.class.php 这个文件 

    打开并且找到如下代码:

public function getFileInfo()
{
return array(
"state" => $this->stateInfo,
"url" => $this->fullName,
"title" => $this->fileName,
"original" => $this->oriName,
"type" => $this->fileType,
"size" => $this->fileSize
);
}

修改成如下代码:
public function getFileInfo()
{
return array(
"state" => $this->stateInfo,
"url" => "http://test.seed.com/".$this->fullName,
"title" => $this->fileName,
"original" => $this->oriName,
"type" => $this->fileType,
"size" => $this->fileSize
);
}
这边的域名为你的网站域名


服务器上的修改完成接下来修改我们的前端的代码

在static/UEditor 里面找到  ueditor.config.js  然后找到 
// 服务器统一请求接口路径
        , serverUrl: URL + "php/controller.php"
        
        修改成你现在网站上面的路径 例如 serverUrl: "http://test.seed.com/Upload/controller.php"



相关文章



我要评论


站长昵称:(*)

输入内容:


评论列表


高蒙

男,程序猿一枚

 

人生要是没有理想, 那跟一条咸鱼有什么分别。


关于我

  http://www.shuchengxian.com

高蒙个人博客是以PHP技术为主的程序员个人博客。博客主要发布php开发中遇到的问题以及解决办法,同时个人博客也分享网站模板素材,jquery插件等方面素材。


站点声明:相关侵权、举报、投诉及建议等,请发E-mail:936594075#qq.com(#替换成@)。

Copyright © 2018, www.shuchengxian.com, All rights reserved. 个人博客皖公网安备 34152302000022号 皖ICP备15015490号

关键词:个人博客,PHP博客,PHP博客程序,高蒙博客,高蒙个人博客,php程序员博客,程序员个人博客