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

前言:最近写东西需要用到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() { // 获取内容方法
    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)
  }

}

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

(0)

相关推荐

  • laravel-admin 与 vue 结合使用实例代码详解

    由于 Laravel-admin 采用的是 pjax 的方式刷新页面,意味着很多页面刷新的操作,并不是刷新整个 document,而是从服务器拿到部分 document,再通过类似 $("#pjax-container").html(newPart) 的方式更新的. 这就造成一个问题,每次 pjax 刷新,都会破坏 vue 的 dom 映射. 所以理论上有2种方法解决: 重新绑定一下 vue 的映射关系 在某些页面禁止 pjax 1 太难搞,而且没啥资料,放弃.2 的话比较可行. 部分

  • vue中使用ueditor富文本编辑器

    最近在做后台管理系统的时候遇到要使用富文本编辑器.最后选择了ueditor,我的项目使用 vue+vuex+vue-router+webpack+elementUI的方案完成框架的搭建, 1.下载UEditor官网最新的jsp版本的包,下载完成解压之后得到一个utf8-jsp的文件夹,里面包含的内容如下: 2.将这个文件夹改名为ueditor,并且移入自己项目中的static文件夹下,修改ueditor.config.js文件夹中的内容,如下图: 3.编写子组件 <template> <

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

    前言:最近写东西需要用到ueditor,并且需要是在vue组件中引入. (本博客默认你已经配置了laravel+vue的项目环境,如果还没有配置好的的小伙伴,可以看看我的另一篇文章,链接: https://www.jb51.net/article/122369.htm) 1.下载editor 这个直接去ueditor的官网下载其PHP版本的就可以了,没什么好说的 2.移到项目目录中(主要讲如何放置配置文件和静态资源文件) 打开下载好的ueditor目录,如果版本没有错也没出什么问题,应该就会看到

  • 在vue项目中引入高德地图及其UI组件的方法

    引入高德地图: 打开index.html,引用高德地图的JavaScript API: <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=你的API key"></script> 在"key="这里添加你申请的key,key不需要加引号. 引入高德地图UI组件,只需要在上面代码后面再加一串代码: <script

  • 在idea中将java项目中的单个类打包成jar包操作

    JAR文件的全称是Java Archive File,即Java档案文件.JAR文件是一种压缩文件,与常见的ZIP压缩文件兼容,被称为JAR包. JAR文件与zip文件的主要区别是在JAR文件中默认包含了一个名为META-INF/MANIFEST.MF的清单文件,这个清单文件是在生成JAR文件时系统自动创建的. 打包jar包 1.先创建一个要打包成jar包的类 2.File -> Project Structrue -> Artifacts -> + -> JAR -> fr

  • vue项目中引入js-base64方式

    目录 vue引入js-base64 1.安装md5依赖 2.在需要使用md5的组件中使用直接使用md5 使用Base64编码解码 1.下载包 2.在你需要解码(编码)的文件中引用 3.使用方法 vue引入js-base64 1.安装md5依赖 npm install --save js-base64 或者 cnpm install --save js-base64 2.在需要使用md5的组件中使用直接使用md5 let Base64 = require('js-base64').Base64;

  • vue 2.0项目中如何引入element-ui详解

    前言 本文主要介绍了关于在vue 2.0项目中引入element-ui的相关内容,从新建vue项目到引入组件Element介绍的非常详细,下面话不多说了,来一起看看详细的介绍吧. 一.新建项目 1.查看 node和npm是不是已经安装好命令:node -v  npm -v (没有安装的先安装环境); 2.npm install -g cnpm --registry=https://registry.npm.taobao.org  (安装国内的淘宝镜像文件,后面的安装npm可以全部改为cnpm)

  • 在 Vue 项目中引入 tinymce 富文本编辑器的完整代码

    项目中原本使用的富文本编辑器是 wangEditor,这是一个很轻量.简洁编辑器 但是公司的业务升级,想要一个功能更全面的编辑器,我找了好久,目前常见的编辑器有这些: UEditor:百度前端的开源项目,功能强大,基于 jQuery,但已经没有再维护,而且限定了后端代码,修改起来比较费劲 bootstrap-wysiwyg:微型,易用,小而美,只是 Bootstrap + jQuery... kindEditor:功能强大,代码简洁,需要配置后台,而且好久没见更新了 wangEditor:轻量.

  • 在vue项目中引入highcharts图表的方法(详解)

    npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个chart.vue组件 <template> <div class="x-bar"> <div :id="id" :option="option"></div> </div> </templa

  • vue项目中引入noVNC远程桌面的方法

    1 .首先,先简单介绍一下概念. VNCServer 是一个为了满足分布式用户共享服务器资源,而在服务器开启的一项服务,对应的客户端软件有图形化客户端 VNCViewer,而 noVNC 则是 HTML5 VNC 客户端,它采用 HTML 5 WebSocket, Canvas 和 JavaScript 实现. noVNC 被普遍用在各大云计算.虚拟机控制面板中.noVNC 采用 WebSockets 实现,但是当前大多 VNC 服务器不支持 WebSocket,所以 noVNC 不能直连 VN

  • 在Vue项目中引入腾讯验证码服务的教程

    什么是腾讯验证码?它长这个样子--:point_down: 最近公司项目要求引入腾讯云验证,要求是这样的: 为了防止别人恶意刷短信验证码,当用户短时间内多次获取验证码的时候,需要调用腾讯验证码,验证成功后会继续自动发送验证码 ,刚开始的我听的一脸蒙蔽,网上搜索也没有多少相关的文章,然而现在我接通啦,发现是很简单点事(或许就是因为太简单了所以没有人写2333-) 不多BB,开始吧! 先看文档的接口调用流程: (文档地址: cloud.tencent.com/document/pr- ) 总共分成几

  • vue项目中应用ueditor自定义上传按钮功能

    由于上传地址问题,需要自定义上传按钮,效果如图 由于在页里面没有操作dom,所以想到了用vue的 自定义事件绑定$emit .$on来把点击事件传递给ueditor. 首先是给ueditor添加自定义按钮: 1,打开ueditor.all.js,找到btnCmds,大概在27854行,如下图,在数组添加一个自定义的按钮名称,我写的是"love" ueditor.all.js 2,给按钮添加事件 还是在ueditor.all.js文件内找到commands指令 给刚才定义的按钮扩展事件,

随机推荐