前言:最近写东西需要用到ueditor,并且需要是在vue组件中引入。
(本博客默认你已经配置了laravel+vue的项目环境,如果还没有配置好的的小伙伴,可以看看我的另一篇文章,链接:
https://www.jb51.net/article/122369.htm )
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组件,这里为了方便喜欢“偷懒”小伙伴们😄,就不放图片了,直接上代码(是不是很贴心)
<template>
<div :id="id">
</div>
</template>
<style scoped>
</style>
<script>
import './ueditor.config.js'
import './ueditor.all.min.js' //引入相应的配置文件,具体路径请根据自己配置文件放置的路径以及公共组件定义的路径自行修改
import './ueditor.parse.min.js'
import './lang/zh-cn/zh-cn.js'export default {
props: {
},
data(){
return {
id: Math.ceil(Math.random()*100000) + 'editor'
}
},
mounted() {
this.editor = UE.getEditor(this.id) // 获取编辑器实例化的对象
},
methods: {
getUEContent() { // 获取内容方法










