前言:最近写东西需要用到ueditor,并且需要是在vue组件中引入。

(本博客默认你已经配置了laravel+vue的项目环境,如果还没有配置好的的小伙伴,可以看看我的另一篇博客,链接:

http://www.cnblogs.com/meng1314-shuai/p/7136049.html 

1、下载editor

这个直接去ueditor的官网下载其PHP版本的就可以了,没什么好说的

2、移到项目目录中(主要讲如何放置配置文件和静态资源文件)

打开下载好的ueditor目录,如果版本没有错也没出什么问题,应该就会看到如下目录及文件

这里面:ueditor.all.js、ueditor.config.js、ueditor.parse.js以及lang/zh-cn/zh-cn.js 是我们需要拿来在vue中加载的配置文件,所以我直接放在了resources/assets/js目录下(当然这里我们推荐的是引入这些配置文件对应的.min.js的文件,如果有的话。。。还有放置的目录也可以自己定义,

不过这里我们为了方便区分和引入,所以就按前面说的目录来放了),像这样

当然,放置好了配置文件,剩下的四个目录我们就直接放在laravel默认的静态资源目录public/js下面,像这样:

 3、定义公共的ueditor组件(方面多处引用)

这里同样为了方便引入,我们直接在ueditor的配置文件的同级目录下新建UEditor.vue组件

然后编写我们的ueditor组件,这里为了方便喜欢“偷懒”小伙伴们

laravel+vue组合的项目中引入ueditor(打包成组件形式)的更多相关文章

  1. 在vue项目中引入jquery

    在vue项目中引入jquerycnpm install jquery --save在main.js中引入,加入下面这行代码:import 'jquery'注:有些项目是按需加载的,在main.js里面 ...

  2. 【vue】如何在 Vue-cli 创建的项目中引入 iView

    根据vue项目的搭建教程,以下记录如何在Vue-cli创建的项目中引入iView. 1)iView的安装,在项目下使用 npm 安装iView cnpm install  iview  --save ...

  3. 【vue】如何在 Vue-cli 创建的项目中引入iView

    根据vue项目的搭建教程,一下记录下如何在Vue-cli创建的项目中引入iView. 1)安装iView,在项目下 cnpm install  iview  --save 2 ) 在 webpack ...

  4. 在vue项目中引入阿里图标库小记

    使用Vue技术栈开发不仅效率高,而且很友好,而且还有很多基于vue的UI框架,例如:element等,但是这类框架美中不足的是,图标太少.为了解决这个问题,不得不引入第三方字体库,今天以阿里图标库为例 ...

  5. vue项目中引入Sass

    Sass作为目前成熟,稳定,强大的css扩展语言,让越来越多的前端工程师喜欢上它.下面介绍了如何在vue项目 中引入Sass. 首先在项目文件夹执行命令 npm install vue-cli -g, ...

  6. 前端学习笔记系列一:10整体移动vscode代码块、VSCode 使用 stylus,配置格式化设置、在vue项目中引入bootstrap

    1.整体移动vscode代码块 凭借操作的经验我们能够轻松地知道将代码整体往右移只需选中代码按Tab键即可.其实往左移也很简单: 选中之后按下 shift+Tab键 即可. 2.VSCode 使用 s ...

  7. vue2.0中引入UEditor的一些坑。。。。

    开发后台系统的时候,富文本编辑器肯定是必不可少的,然后呢~在天朝当然要属百度编辑器(UEditor)最成熟了,功能全面,文档齐全(相对),ui优美(...,对于程序员来说)等等许多方面(MMP,还不是 ...

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

    http://blog.csdn.net/sophie_u/article/details/76223978 以在vue中引入mui第三方库为例: 虽然针对vue,有单独的vue-mui库可以使用,但 ...

  9. vue-cli项目中引入第三方插件

    前言 最近有小伙伴问道如何在vue-cli项目中引入第三方插件或者库,例如如果想在项目中使用jQuery中的Ajax请求数据呢?或者我想使用Bootstrap框架呢?等等这些问题,本篇博客将带你学习如 ...

随机推荐

  1. .net core中引用webservice,并忽略https证书验证

    1.打开vs, 工具-->扩展和更新 下载这个 2. 在admin下右键,添加-->connected service 选择wsdl文件路径,或者服务的url,比如https://**** ...

  2. Xamarin App文件(apk)大小和启动时间的影响因素

    Xamarin开发的时候大家都有一个疑问,就是apk文件会不会特别的大,启动会不会很慢.答案是肯定的,文件肯定大,启动肯定会慢,但是具体大多少.具体慢多少,有什么因素可以使apk文件稍微小一点.可以使 ...

  3. js获取页面宽高

    网页可见区域宽:document.body.clientWidth网页可见区域高:document.body.clientHeight网页可见区域宽:document.body.offsetWidth ...

  4. 活动页怎么切图photoshop

    一 切固定大小的单个图片 1.用pc打开图像 2.按ctrl+A(全选) 3.点击 选择 ->变换选区 ->拉参考线(把参考线放到最中央)->按回车 ->ctrl+d(取消全选 ...

  5. angularJS loading 载入画面

    在请求网络的时候,显示loading画面 1. 使用http的interceptor,截断处理所有的http请求和响应,以及错误.在request的时候设置$rootScope.loading=Tru ...

  6. Cordova各个插件使用介绍系列(一)—$cordovaSms发送短信

    详情链接地址:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/cordova-1-cordovasms/ 这是调用手机发送短信的插件 ...

  7. docker 私有仓库搭建

    知识基础:ubuntu系统安装,docker安装,了解docker的基础知识 下载镜像(如果下载2版本以上的需要配置ssl证书,这里先用0.9.1的演示) root@ubuntu:/# docker ...

  8. Redis 数据类型介绍

    http://qifuguang.me/2015/09/29/Redis%E4%BA%94%E7%A7%8D%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B%E4%BB%8B% ...

  9. java高并发锁的3种实现

    初级技巧 - 乐观锁 乐观锁适合这样的场景:读不会冲突,写会冲突.同时读的频率远大于写. 以下面的代码为例,悲观锁的实现: Java代码   public Object get(Object key) ...

  10. 安装Dubbo注册中心(Zookeeper-3.4.6)

    样例视频教程:http://www.roncoo.com/course/view/f614343765bc4aac8597c6d8b38f06fd Dubbo建议使用Zookeeper作为服务的注册中 ...