Vue使用vue-html5-editor的 富文本编辑器

1、安装vue-html5-editor

npm install vue-html5-editor --save

2、安装完毕之后引入到项目中

这个是编辑的main.js，按照官方说明 vue-html5-editor: 一个vue的html5富文本编辑器插件 以全局引入的方式引入的

import VueHtml5Editor from 'vue-html5-editor'

Vue.use(VueHtml5Editor, {
  // 全局组件名称，使用new VueHtml5Editor(options)时该选项无效
  name: 'vue-html5-editor',
  // 是否显示模块名称，开启的话会在工具栏的图标后台直接显示名称
  showModuleName: false,
  // 自定义各个图标的class，默认使用的是font-awesome提供的图标
  icons: {
    text: 'fa fa-pencil',
    color: 'fa fa-paint-brush',
    font: 'fa fa-font',
    align: 'fa fa-align-justify',
    list: 'fa fa-list',
    link: 'fa fa-chain',
    unlink: 'fa fa-chain-broken',
    tabulation: 'fa fa-table',
    image: 'fa fa-file-image-o',
    hr: 'fa fa-minus',
    eraser: 'fa fa-eraser',
    undo: 'fa-undo fa',
    'full-screen': 'fa fa-arrows-alt',
    info: 'fa fa-info'
  },
  // 配置图片模块
  image: {
    // 文件最大体积，单位字节  max file size
    sizeLimit: 512 * 1024,
    // 上传参数,默认把图片转为base64而不上传
    upload: {
      url: 'http://localhost:8080/files/upload',
      headers: {},
      params: {},
      fieldName: 'file'
    },
    // 压缩参数,默认使用localResizeIMG进行压缩,设置为null禁止压缩
    compress: null,
    // 响应数据处理,最终返回图片链接
    uploadHandler(responseText) {
      var json = JSON.parse(responseText)
      return json.data.fileurl
    }
  },
  // 语言，内建的有英文（en-us）和中文（zh-cn）
  language: 'zh-cn',
  // 自定义语言
  i18n: {
    'zh-cn': {
      'align': '对齐方式',
      'image': '图片',
      'list': '列表',
      'link': '链接',
      'unlink': '去除链接',
      'table': '表格',
      'font': '文字',
      'full screen': '全屏',
      'text': '排版',
      'eraser': '格式清除',
      'info': '关于',
      'color': '颜色',
      'please enter a url': '请输入地址',
      'create link': '创建链接',
      'bold': '加粗',
      'italic': '倾斜',
      'underline': '下划线',
      'strike through': '删除线',
      'subscript': '上标',
      'superscript': '下标',
      'heading': '标题',
      'font name': '字体',
      'font size': '文字大小',
      'left justify': '左对齐',
      'center justify': '居中',
      'right justify': '右对齐',
      'ordered list': '有序列表',
      'unordered list': '无序列表',
      'fore color': '前景色',
      'background color': '背景色',
      'row count': '行数',
      'column count': '列数',
      'save': '确定',
      'upload': '上传',
      'progress': '进度',
      'unknown': '未知',
      'please wait': '请稍等',
      'error': '错误',
      'abort': '中断',
      'reset': '重置'
    }
  },
  // 隐藏不想要显示出来的模块
  hiddenModules: [
    'info'
  ],
  // 自定义要显示的模块，并控制顺序
  visibleModules: [
    'text',
    'color',
    'font',
    'align',
    'list',
    'link',
    'unlink',
    'tabulation',
    'image',
    'hr',
    'eraser',
    'undo',
    'full-screen',
    'info'],
  modules: {}
})

2.5、没错当然还有另外一种方法

其实也不算另外一种方法，如果你觉得你觉得你的main.js太长的话也可以将他单独分离出来

（其实我也只是看他不爽而已）

新建文件夹VueHtml5Editor

在文件夹中新建文件  vue-html5-editor-config（取名自己规范点就行）

// vue-html5-editor-config.js

export default {
    // 全局组件名称，使用new VueHtml5Editor(options)时该选项无效
    name: 'vue-html5-editor',
    // 是否显示模块名称，开启的话会在工具栏的图标后台直接显示名称
    showModuleName: false,
    // 自定义各个图标的class，默认使用的是font-awesome提供的图标
    icons: {
        text: 'fa fa-pencil',
        color: 'fa fa-paint-brush',
        font: 'fa fa-font',
        align: 'fa fa-align-justify',
        list: 'fa fa-list',
        link: 'fa fa-chain',
        unlink: 'fa fa-chain-broken',
        tabulation: 'fa fa-table',
        image: 'fa fa-file-image-o',
        hr: 'fa fa-minus',
        eraser: 'fa fa-eraser',
        undo: 'fa-undo fa',
        'full-screen': 'fa fa-arrows-alt',
        info: 'fa fa-info'
    },
    // 配置图片模块
    image: {
        // 文件最大体积，单位字节  max file size
        sizeLimit: 10 * 1024 * 1024,
        // 上传参数,默认把图片转为base64而不上传
        upload: {
            url: 'http://localhost:8080/files/upload',
            method: 'post', // 请求方式
            data: {}
        },
        // 压缩参数,默认使用localResizeIMG进行压缩,设置为null禁止压缩
        compress: null,
        // 响应数据处理,最终返回图片链接
        uploadHandler(responseText) {
            var json = JSON.parse(responseText)
            return json.data
        }
    },
    // 语言，内建的有英文（en-us）和中文（zh-cn）
    language: 'zh-cn',
    // 自定义语言
    i18n: {
        'zh-cn': {
            'align': '对齐方式',
            'image': '图片',
            'list': '列表',
            'link': '链接',
            'unlink': '去除链接',
            'table': '表格',
            'font': '文字',
            'full screen': '全屏',
            'text': '排版',
            'eraser': '格式清除',
            'info': '关于',
            'color': '颜色',
            'please enter a url': '请输入地址',
            'create link': '创建链接',
            'bold': '加粗',
            'italic': '倾斜',
            'underline': '下划线',
            'strike through': '删除线',
            'subscript': '上标',
            'superscript': '下标',
            'heading': '标题',
            'font name': '字体',
            'font size': '文字大小',
            'left justify': '左对齐',
            'center justify': '居中',
            'right justify': '右对齐',
            'ordered list': '有序列表',
            'unordered list': '无序列表',
            'fore color': '前景色',
            'background color': '背景色',
            'row count': '行数',
            'column count': '列数',
            'save': '确定',
            'upload': '上传',
            'progress': '进度',
            'unknown': '未知',
            'please wait': '请稍等',
            'error': '错误',
            'abort': '中断',
            'reset': '重置'
        }
    },
    // 隐藏不想要显示出来的模块
    hiddenModules: [
        'info'
    ],
    // 自定义要显示的模块，并控制顺序
    visibleModules: [
        'text',
        'color',
        'font',
        'align',
        'list',
        'link',
        'unlink',
        'tabulation',
        'image',
        'hr',
        'eraser',
        'undo',
        'full-screen',
        'info'],
    modules: {}
}

然后在main.js中将他引入

// 富文本编辑器
import VueHtml5EditorConfig from './vuehtml5editor/vue-html5-editor-config.js'
import VueHtml5Editor from 'vue-html5-editor'

Vue.use(VueHtml5Editor, VueHtml5EditorConfig)

3、在模块中引入

模块 contents.vue

<template>
  <div id="contents">
    <h1>添加内容</h1>
    <br>
    <vue-html5-editor :content="content" @change="updateData" :height="500" :z-index="1000" :auto-height="true" :show-module-name="false"></vue-html5-editor>
  </div>
</template>


<script>

export default {
  name: 'Contents',
  data () {
    return {
      id: '',
      content: ''
    }
  },
  methods: {
    updateData (e) {
      this.content = e
    }
  }
}
</script>

<style scoped>

</style>

4、最后一步

运行起来以后，会发现，有框，但按钮不在，因为这是个坑。

按钮是个开源组件 font-awesome

这个开源组件就是个图标库，有多种引入方式，我所采用是css全局引入的方式，

先下载了http://www.fontawesome.com.cn/download/font-awesome-4.7.0.zip

解压放入 src/assets（你的静态资源文件夹），再到App.vue的style引入

5、效果展示