资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

laravel+vue组合项目中如何引入ueditor-创新互联

这篇文章主要介绍laravel+vue组合项目中如何引入ueditor，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

目前成都创新互联已为1000多家的企业提供了网站建设、域名、网页空间、网站托管维护、企业网站设计、阳泉网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

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组件，这里为了方便喜欢“偷懒”小伙伴们?，就不放图片了，直接上代码（是不是很贴心）

好了，我们的公共编辑器组件就已经定义好啦。

可能会有些小伙伴觉得ueditor的工具栏实在是太多了，好多都是自己几乎用不到的，放在那里占地方不说，还降低了我们项目的加载速度，这里也许有些看过ueditor.config.js 配置文件的小伙伴应该会看到这样一项配置：

laravel+vue组合项目中如何引入ueditor

这里我们看到它的注释已经明确的告诉我们它的作用了：工具栏上的所有的功能按钮和下拉框，可以在new编辑器的实例时选择自己需要的重新定义

所以很简单了，想要精简编辑器的小伙伴们可以直接在我们的公共ueditor组件的生命周期函数mounted里覆盖此配置就好啦，附上一个我自己配置的代码：

mounted() {
　　window.UEDITOR_CONFIG.toolbars = [[
　　　　'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', 　　　　'|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', '|',
　　　　'rowspacingtop', 'rowspacingbottom', 'lineheight', '|', 'fontfamily', 'fontsize'
　　]]
　　this.editor = UE.getEditor(this.id)
}

4、使用ueditor组件

到这里我们已经可以直接在我们其他任意的vue组件里使用我们的公共组件了：

在script标签中直接引入公共组件的UEditor.vue 文件，像这样：import UE from '../editor/UEditor.vue';

然后注册该组件：

components: {
　　UE
}

接下来我们就可以直接在template模板中使用UE组件了：


　　
　　　　
　　　　　　
　　　　
　　

这里我们使用了ref给组件注册了引用信息，这样我们就可以在这个父组件里调用我们编辑器组件的获取内容方法getUEContent()(这个方法调用了ueditor的getContent()方法，忘记的小伙伴可以去上面或者自己的代码里回顾一下)，像这样：

获取内容//模版里定义一个button绑定getUEContent()方法

然后注册getUEContent()方法：

methods: {
　　getUEContent() {
　　　　let content = this.$refs.ue.getUEContent();//在这里调用了子组件ueditor组件的getContent()方法
　　　　this.$notify({
　　　　　　title: '获取成功，可在控制台查看！',
　　　　　　message: content,
　　　　　　type: 'success'
　　　　});
　　　　console.log(content)
　　}

｝

以上是“laravel+vue组合项目中如何引入ueditor”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！


当前名称：laravel+vue组合项目中如何引入ueditor-创新互联
文章路径：http://cdkjz.cn/article/cssiid.html
返回首页 了解更多建站资讯

相关资讯

多年建站经验

多一份参考，总有益处

联系快上网，免费获得专属《策划方案》及报价

咨询相关问题或预约面谈，可以通过以下方式与我们联系

大客户专线   成都：13518219792   座机：028-86922220

在线咨询 提交需求
友情链接 交换友情链接
成都石膏隔墙板四川雕琢时光成都谷歌推广机柜租用网站建设开发商城网站成都服务器机柜租用四川胜锦安防简阳服务器托管软文平台

成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220

成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图