前言:最近写东西需要用到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. java并发编程(Exchanger)

    package org.bianqi.demo1; import java.util.concurrent.Exchanger; import java.util.concurrent.Executo ...

  2. 软件测试基础(软件测试分类和工具组)firebug、firepath的安装

    白盒测试:需要了解内部结构和代码 黑盒测试:不关心内部结构和代码 灰盒测试:介于白盒黑盒之间 静态测试:测试时不执行被测试软件 动态测试:测试时执行被测试软件 单元测试:测试软件的单元模块 集成测试: ...

  3. 浅谈this那些事

    一直以来,对this的讨论都是热门话题.有人说掌握了this就掌握了JavaScript的80%,说法有点夸张,但可见this的重要性.本人至今也是记录了很多关于this的零碎笔记,今天就来个小结. ...

  4. 基于C#的接口自动化测试(一)

    其实就是找个地方然后给关键的代码做个笔记什么的-- 字符串访问API接口,访问方法为POST: string url = URL; string RequestParam = Param; strin ...

  5. Bash shell执行命令的优先级

    1.别名2.关键字:if.function.while .until等3.函数4.内置命令5.可执行程序或脚本 别关函内可 =-=-=-=-=Powered by Blogilo

  6. python网络爬虫之LXML与HTMLParser

    Python lxml包用于解析html和XML文件,个人觉得比beautifulsoup要更灵活些 Lxml中的路径表达式如下: 在下面的表格中,我们已列出了一些路径表达式以及表达式的结果: 路径表 ...

  7. python 最佳实践与资源汇总

    python 最佳实践 (部分) 一. 结构化工程 文件 功能 README.rst readme LICENSE 许可证 setup.py 打包和发布管理 requirements.txt 开发依赖 ...

  8. 用ingress的方式部署jenkins,启动后提示没有下载插件,未解决

    [root@node2 .docker]# docker logs 5c3dd117a10dRunning from: /usr/share/jenkins/jenkins.warwebroot: E ...

  9. select change事件给其它元素赋值,本select的value或tex

    select change事件给其它元素赋值,本select的value或textonchange='$("#areaname").val($("option:selec ...

  10. Android 音乐播放

    android简单音乐播放控制代码 这个几个月业余时间一直在做一个android项目,里面涉及到了音乐播放功能.很简单那种,播放.暂停.上一曲.下一曲.音量调节等. 音乐播放主要使用的对象是Media ...