laravel+vue组合的项目中引入ueditor方式(打包成组件形式)

来自:互联网
时间:2020-05-27
阅读:

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

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

https://www.freexyz.cn/article/122369.htm )

1、下载editor

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

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

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

laravel+vue组合的项目中引入ueditor方式(打包成组件形式)

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

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

laravel+vue组合的项目中引入ueditor方式(打包成组件形式)

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

laravel+vue组合的项目中引入ueditor方式(打包成组件形式)

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

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

laravel+vue组合的项目中引入ueditor方式(打包成组件形式)

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

返回顶部
顶部