前言:最近写东西需要用到ueditor,并且需要是在vue组件中引入。
(本博客默认你已经配置了laravel+vue的项目环境,如果还没有配置好的的小伙伴,可以看看我的另一篇文章,链接:
https://ponents: { UE}
接下来我们就可以直接在template模板中使用UE组件了:
<template lang="html"> <div id="add"> <div id="myueditor"> <UE ref="ue"></UE> </div> </div></template>这里我们使用了ref给组件注册了引用信息,这样我们就可以在这个父组件里调用我们编辑器组件的获取内容方法getUEContent()(这个方法调用了ueditor的getContent()方法,忘记的小伙伴可以去上面或者自己的代码里回顾一下),像这样:
<button @click="getUEContent()">获取内容</button>//模版里定义一个button绑定getUEContent()方法然后注册getUEContent()方法:
methods: { getUEContent() { let content = this.$refs.ue.getUEContent();//在这里调用了子组件ueditor组件的getContent()方法 this.$notify({ title: '获取成功,可在控制台查看!', message: content, type: 'success' }); console.log(content) }}好了,大功告成,赶紧去试试你的编辑器吧!