工作笔记四——vueJS在移动端使用富文本编辑器-优快云博客

本文详细介绍了在vue移动端项目中如何使用vue-html5-editor富文本编辑器，包括项目初始化、编辑器安装、自定义工具栏、样式修改以及图片处理。通过示例代码展示了如何解决常见问题，如图片上传后的大小适配。提供了项目的git地址以供参考。

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

本文主要介绍vue移动端使用富文本编辑器的使用及常见问题处理。参考组件vue-html5-editor。

本例主要基于vue-cli脚手架创建。更多vue相关应用请参考：https://github.com/JerryYuanJ/a-vue-app-template

1.项目创建与初始化

创建一个vue-cli项目，建议在安装的时候不要使用ESLINT做代码检查，练习的项目不需要这种检查机制，会很浪费时间。还有一些自动化测试的插件也最好不要装，影响效率。

在安装好脚手架的依赖后，要执行 npm install vue-html5-editor -S 来安装这个富文本插件，由于这个富文本插件的图标是依赖font-awesome.css的，所以要npm install font-awesome.css 安装这个css然后在main.js中引入这个css import "font-awesome/css/font-awesome.css"。

2.使用vue-html5-editor富文本编辑器

新建一个common文件夹用于存放我们的工具类js文件，然后将下面的代码copy进去：

/**
 * author: Joker
 * creationDate: 2018/1/22
 * usage:
 */
import Vue from 'vue'
import VueHtml5Editor from 'vue-html5-editor'
export default function () {
  let opt = {
    // 全局组件名称，使用new VueHtml5Editor(options)时该选项无效
    name: "vue-html5-editor",
    // 是否显示模块名称，开启的话会在工具栏的图标后台直接显示名称
    showModuleName: true,
    // 自定义各个图标的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: {
      // 文件最大体积，单位字节  
      sizeLimit: 512 * 1024 * 10,
      // 上传参数,默认把图片转为base64而不上传
      // upload config,default null and convert image to base64
      upload: {
        url: null,
        headers: {},
        params: {},
        fieldName: {}
      },
      // 压缩参数,默认使用localResizeIMG进行压缩,设置为null禁止压缩
      // width和height是文件的最大宽高
      compress: {
        width: 600,
        height: 600,
        quality: 80
      },
      // 响应数据处理,最终返回图片链接
      uploadHandler(responseText){
        //default accept json data like  {ok:false,msg:"unexpected"} or {ok:true,data:"image url"}
        var json = JSON.parse(responseText);
        console.info(json);
        if (!json.ok) {
          alert(json.msg)
        } else {
          return json.data
        }
      }