关闭

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(十三)集成 UEditor 百度富文本编辑器

标签: vueueditorgithubwebpackfungleo
4759人阅读 评论(14) 收藏 举报
分类:

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(十三)集成 UEditor 百度富文本编辑器

前情回顾

通过前面系统的学习,我相信大家都能够对 vue 项目有了一个基本的认知。现在是不是已经开始上手做自己的项目了呢?呵呵,当然这是极好的。但是我们一般用 vue 来制作管理后台,在制作管理后台的时候,不可避免的,我们需要用到富文本编辑器。

我尝试过 github 上的若干富文本编辑器,虽然能够实现一部分需求,但是还是不能充分满足我的需求。而百度推出的 UEditor 编辑器口碑不错,文档充分,还是很不错的选择(百度能有良心产品,不容易啊!)。但是 UEditor 没有 npm 安装,需要我们自己手工引入进来。这个到底怎么解决呢,我查找了一些资料,把这些给理顺了。今天出这个文章给遇到这个问题的朋友参考。

我还是在我先前的代码上加上这部分内容。源码参考:https://github.com/fengcms/vue-demo-cnodejs

准备集成 UEditor 编辑器

下载 UEditor 编辑器 源码

首先,下载 UEditor 源码。我这边下载的是 UEditor 1.4.3.3 PHP UTF-8版本 下载地址

下载之后,把资源放到 /static/ue/ 目录下。文档结构如下:

目录结构

编辑 UEditor 编辑器 配置文件

我们打开 ueditor.config.js 找到 window.UEDITOR_HOME_UR 将它设置为:

window.UEDITOR_HOME_URL = "/static/ue/";

然后我们可以给一些默认的参数,比如编辑器的默认宽高等:

,initialFrameWidth: null
,initialFrameHeight: 480

上面的编码风格也是满奇葩的,还好还好

其他的配置参数,请参考官方文档进行配置:http://fex.baidu.com/ueditor/

集成到 UEditor 编辑器到我们的系统中

main.js 引用 UEditor

我们打开 /src/main.js 文件,在合适位置插入下面的代码:

// 配置百度编辑器
import '../static/ue/ueditor.config.js'
import '../static/ue/ueditor.all.min.js'
import '../static/ue/lang/zh-cn/zh-cn.js'
import '../static/ue/ueditor.parse.min.js'

如果不知道合适位置是什么位置,可以参考我的 github 源码。我不能每次都解释,或者粘贴全部代码过来。

创建 UEditor VUE 组件

我们在 /src/components/ 目录下创建 ue.vue 文件,作为我们的编辑器组件文件。

文件内容如下:

<template>
  <div>
    <script id="editor" type="text/plain"></script>
  </div>
</template>
<script>
  export default {
    name: 'ue',
    data () {
      return {
        editor: null
      }
    },
    props: {
      value: '',
      config: {}
    },
    mounted () {
      const _this = this
      this.editor = window.UE.getEditor('editor', this.config)
      this.editor.addListener('ready', function () {
        _this.editor.setContent(_this.value)
      })
    },
    methods: {
      getUEContent () {
        return this.editor.getContent()
      }
    },
    destroyed () {
      this.editor.destroy()
    }
  }
</script>

好,这段代码不难,应该能够理解。如果不能够理解也没关系,只需要知道下面这段代码是接受我们的参数的就可以了。

    props: {
      value: '',
      config: {}
    },

其中 value 是默认的编辑器的文字。一般我们留空即可,而 config 是编辑器的配置参数。这里就是上一节中讲的那些配置,这里可以接受个性配置参数。

好,这个文件扔这里不管了。

在其他页面引用该组件

我们创建一个页面,路由配置以及其他内容不表,不清楚看我 github 代码演示。

内容如下:

<template>
  <div>
    <Uediter :value="ueditor.value" :config="ueditor.config" ref="ue"></Uediter>
    <input type="button" value="显示编辑器内容(从控制台查看)" @click="returnContent">
  </div>
</template>
<script>
  import Uediter from '@/components/ue.vue'
  export default {
    components: {Uediter},
    data () {
      return {
        dat: {
          content: ''
        },
        ueditor: {
          value: '编辑器默认文字',
          config: {}
        }
      }
    },
    methods: {
      returnContent () {
        this.dat.content = this.$refs.ue.getUEContent()
        console.log(this.dat.content)
      }
    }
  }
</script>

这里,我们将组件引用进来,并且可以配置一些参数。我不习惯把配置参数放在根下面,所以搞了一个:

        ueditor: {
          value: '编辑器默认文字',
          config: {}
        }

亲测成功,我没有配置上传图片等接口对接,不过这是后端的工作。其他的,比如本地存储之类的,都是没有问题的。

这里需要注意的是,编辑器的内容不能实时的保存进我们的 dat.content 里面,需要触发一下 returnContent 方法,才可以获取到这个数据,实际开发中,点击提交按钮时触发一下即可

最终效果如下:

vue + ueditor 实现效果

参考了很多人的资料,在这里一一感谢:

  1. Vue.js结合Ueditor
  2. vue2.0项目中使用Ueditor富文本编辑器示例

2017年09月07日补充

ueditor.value 是可以接收 html 代码的。我们在编辑的时候,把拿到的数据,给灌到这里,就可以在编辑器正确的显示出来了。之前忘记说明这个事情了。

如果文章由于我学识浅薄,导致您发现有严重谬误的地方,请一定在评论中指出,我会在第一时间修正我的博文,以避免误人子弟。

本文由 FungLeo 原创,允许转载,但转载必须保留首发链接。

8
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

vue集成百度UEditor富文本编辑器

在前端开发的项目中。难免会遇到需要在页面上集成一个富文本编辑器。那么。如果你有这个需求。希望可以帮助到你vue是前端开发者所追捧的框架,简单易上手,但是基于vue的富文本编辑器大多数太过于精简。于是我...
  • psd_html
  • psd_html
  • 2017-06-16 00:13
  • 13089

node -- 使用UEditor富文本编辑器

最近在做一个微信素材编辑器的小项目,使用到了UEditor编辑器,使用中出现了许多问题。 1.介绍 UEditor是由百度web前端研发部开发所见即所得富文本web编辑器, 具有轻量,可定制,注重用户...
  • a1104258464
  • a1104258464
  • 2016-08-17 15:56
  • 8992

UEditor-前端使用心得(前后端分离实践)

记得差不多就是去年的这个时候,我从原来的单位辞职。原因很简单,二十三四岁,正式一个该奋斗的年纪。虽然家里的条件可以允许自己不必太努力,但是唯有自己拥有赚更多钱的能力,才会让自己觉得心安。思来想去,选择...
  • houtailei
  • houtailei
  • 2017-05-13 22:13
  • 2588

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(一)基础知识概述

前言 2016年,我写了一系列的 VUE 入门教程,当时写这一系列博文的时候,我也只是一个菜鸟,甚至在写的过程中关闭了代码审查,否则通不过校验。 本来写这一系列的博文只是为了给自己看的,但...
  • kchangfu
  • kchangfu
  • 2017-12-02 22:01
  • 95

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(一)基础知识概述

前言 2016年,我写了一系列的 VUE 入门教程,当时写这一系列博文的时候,我也只是一个菜鸟,甚至在写的过程中关闭了代码审查,否则通不过校验。 本来写这一系列的博文只是为了给自己看的,但没想到的...
  • mck477
  • mck477
  • 2017-11-16 15:24
  • 93

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(九)再把内容页面渲染出来

前情回顾 在上一篇博文《Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(八)渲染一个列表出来先》中,我们已经成功的把一个列表给渲染出来了。我们从文章中留下...
  • kchangfu
  • kchangfu
  • 2017-12-02 22:19
  • 106

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(七)初识 *.vue 文件

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(七)初识 *.vue 文件前情回顾在上一篇文章《Vue2+VueRouter2+Webpack+Axios 构建...
  • FungLeo
  • FungLeo
  • 2017-08-26 16:14
  • 8662

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(七)初识 *.vue 文件

前情回顾 在上一篇文章《Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(六)将接口用 webpack 代理到本地》中,我们顺利的将接口代理到了本地。需要说...
  • kchangfu
  • kchangfu
  • 2017-12-02 22:16
  • 69

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(十四)在项目中使用 jQuery

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(十四)在项目中使用 jQuery前情回顾在上一篇博文中,我们讲到了,如何在 vue 项目中 使用百度的 UEdi...
  • FungLeo
  • FungLeo
  • 2017-09-07 11:32
  • 4258

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(二)安装 nodejs 环境以及 vue-cli 构建初始项目

本文受益匪浅 首发地址:http://blog.csdn.net/fungleo/article/details/77584701 在上一篇《Vue2+VueRouter2+Webpa...
  • Miss739999536
  • Miss739999536
  • 2017-11-03 10:15
  • 169
    个人资料
    • 访问:1113766次
    • 积分:12072
    • 等级:
    • 排名:第1440名
    • 原创:213篇
    • 转载:39篇
    • 译文:1篇
    • 评论:841条
    站内搜索
    博客专栏
    文章分类
    友情链接
    最新评论