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

最新推荐文章于 2025-02-26 15:13:38 发布

Zuo_Ruo

最新推荐文章于 2025-02-26 15:13:38 发布

阅读量2.5k

点赞数 1

分类专栏：富文本编辑器文章标签： vue.js html5 前端

本文链接：https://blog.youkuaiyun.com/Zuo_Ruo/article/details/134419850

版权

本文介绍了如何在Vue项目中使用vue-html5-editor富文本编辑器。首先通过安装并引入到main.js中，接着在组件中进行配置。如果觉得main.js过于拥挤，可以将其配置分离到单独的文件。在使用过程中遇到按钮缺失的问题，原因是缺少font-awesome图标库，通过下载并全局引入解决。最后展示了编辑器成功运行的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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