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

网络编程 2024/11/17 佚名

2 0 1

极乐门资源网 Design By www.ioogu.com

前言：最近写东西需要用到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组件，这里为了方便喜欢“偷懒”小伙伴们"htmlcode">

<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() { // 获取内容方法
　　　　return this.editor.getContent()
　　}
　　}
}
</script>

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

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

这里我们看到它的注释已经明确的告诉我们它的作用了：工具栏上的所有的功能按钮和下拉框，可以在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组件了：

<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)
　　}

｝

好了，大功告成，赶紧去试试你的编辑器吧！

laravel,vue,ueditor,组件

标签：

laravel,vue,ueditor,组件

极乐门资源网 Design By www.ioogu.com

极乐门资源网 免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

极乐门资源网 Design By www.ioogu.com

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

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

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年11月17日

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

laravel,vue,ueditor,组件

JavaScript定时器常见用法实例分析

解决Layui 表格自适应高度的问题

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

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接