vue-html5-editor深入研究和拓展

这是一款可适用于移动和pc的富文本编辑器，操作性，拓展性灵活性都很强，很棒的一款插件

kiki-chou

3132人浏览 · 2021-07-02 16:31:35

kiki-chou · 2021-07-02 16:31:35 发布

1、介绍
Vue-html5-editor是一个Vue的富文本编辑器插件，简洁灵活可扩展，适用于vue2.0以上版本，支持IE11
github地址：https://github.com/PeakTai/vue-html5-editor
github上有安装和使用说明，代码会贴在文档中，可复制粘贴使用
2、使用
demo是全局引入

npm install vue-html5-editor --save-dev
import Vue from 'vue'
import VueHtml5Editor from 'vue-html5-editor'
Vue.use(VueHtml5Editor,options);

也可作为局部组件使用，方便在不同的场景里使用不同的配置

const editor1 = new VueHtml5Editor(options1)
const app1 = new Vue({
    components:{
        editor1
    }
})
const editor2 = new VueHtml5Editor(options2)
const app2 = new Vue({
    components:{
        editor2
    }
})

demo使用

<vue-html5-editor @change="updateData" :content="content" :height="500" :z-index="1000" :auto-height="true" :show-module-name="false"></vue-html5-editor>

在这里插入图片描述

注：设置固定高度的时候要把:auto-height设为false，自适应高度的话设为true，设置的change事件可以拿到传给后端的内容
options基本配置

Vue.use(VueHtml5Editor, {
    // 全局组件名称，使用new VueHtml5Editor(options)时该选项无效 
    // global component name
    name: "vue-html5-editor",
    // 是否显示模块名称，开启的话会在工具栏的图标后台直接显示名称
    // if set true,will append module name to toolbar after icon
    showModuleName: false,
    // 自定义各个图标的class，默认使用的是font-awesome提供的图标
    // custom icon class of built-in modules,default using 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",
    },
    // 配置图片模块
    // config image module
    image: {
        // 文件最大体积，单位字节  max file size
        sizeLimit: 512 * 1024,
        // 上传参数,默认把图片转为base64而不上传
        // upload config,default null and convert image to base64
        upload: {
            url: null,
            headers: {},
            params: {},
            fieldName: {}
        },
        // 压缩参数,默认使用localResizeIMG进行压缩,设置为null禁止压缩
        // compression config,default resize image by localResizeIMG (https://github.com/think2011/localResizeIMG)
        // set null to disable compression
        compress: {
            width: 1600,
            height: 1600,
            quality: 80
        },
        // 响应数据处理,最终返回图片链接
        // handle response data，return image url
        uploadHandler(responseText){
            //default accept json data like  {ok:false,msg:"unexpected"} or {ok:true,data:"image url"}
            var json = JSON.parse(responseText)
            if (!json.ok) {
                alert(json.msg)
            } else {
                return json.data
            }
        }
    },
    // 语言，内建的有英文（en-us）和中文（zh-cn）
    //default en-us, en-us and zh-cn are built-in
    language: "zh-cn",
    // 自定义语言
    i18n: {
        //specify your language here
        "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": "重置"
        }
    },
    // 隐藏不想要显示出来的模块
    // the modules you don't want
    hiddenModules: [],
    // 自定义要显示的模块，并控制顺序
    // keep only the modules you want and customize the order.
    // can be used with hiddenModules together
    visibleModules: [
        "text",
        "color",
        "font",
        "align",
        "list",
        "link",
        "unlink",
        "tabulation",
        "image",
        "hr",
        "eraser",
        "undo",
        "full-screen",
        "info",
    ],
    // 扩展模块，具体可以参考examples或查看源码
    // extended modules
    modules: {
        //omit,reference to source code of build-in modules
    }
})

注：图标里面使用的icon是取自https://fontawesome.dashgame.com/，font awesome库里面的图标，可用可不用，可自行替换为项目里下载的框架图标，由于demo中使用的是饿了么组件，就替换为饿了么icon图标
到此应该能打开基本的富文本框架了，如下所示：忽略随意匹配的icon
在这里插入图片描述

现在尝试功能实现以及返回数据
在这里插入图片描述

上传图片是上传链接，略有不便，拓展时需重新拓展新的图片上传组件
在这里插入图片描述

注：组件原始图片上传是需要链接，但是所有组件都可拓展，重新拓展一个image组件，隐藏掉之前原始组件image，如图（代码实现下面讲解）

在这里插入图片描述

下面看一下返回数据是否可用
在这里插入图片描述

前端用v-html完全可以渲染，传给后端数据跟常用编辑器传的数据格式一致，可用
下面进行拓展视频音频功能
在这里插入图片描述

拓展功能直接在modules拓展，文档说看源码或者源码中的examples示例，有不懂的可以去查看
拓展功能代码如下（拓展的视频和图片）：

 modules: [
    {
      name: 'video',
      icon: 'el-icon-video-camera',
      i18n: 'video',
      show: true,
      init: function(editor) {
        console.log('emoji module init')
      },
      //vue component
      dashboard: {
        template: '<el-upload style="border: 1px dashed #d9d9d9;border-radius: 6px;cursor: pointer;position: relative;overflow: hidden;" class="avatar-uploader" action="" :http-request="uploadImg"> <i class="el-icon-plus avatar-uploader-icon" style="font-size: 28px;color: #8c939d;width: 178px;height: 178px;line-height: 178px;text-align: center;"></i> </el-upload>',
        data: function() {
          return {
            videoUrl: ''
          }
        },
        methods: {
          uploadImg(file) {
            // 接口调用封装处
            this.videoUrl = 'https://media.w3.org/2010/05/sintel/trailer.mp4'
            this.$parent.execCommand('insertHTML', '<video class="rich-img"  src="' + this.videoUrl + '" autoplay style="max-width:80%" controls x5-video-player-type="h5" x5-video-orientation="portraint">')
          }
        }
      }
    },
    {
      name: 'img',
      icon: 'el-icon-picture',
      i18n: 'img',
      show: true,
      init: function(editor) {
        console.log('emoji module init')
      },
      //vue component
      dashboard: {
        template: '<el-upload class="upload-demo" action="" :http-request="uploadImg"><el-button size="small" type="primary">点击上传</el-button></el-upload>',
        data: function() {
          return {
            imageUrl: ''
          }
        },
        methods: {
          uploadImg(file) {
            // 接口调用封装处
            this.imageUrl = 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
            this.$parent.execCommand('insertHTML', '<img src="' + this.imageUrl + '" style="max-width:80%">')
          }
        }
      }
    }
  ]

注：由于此处并没有调用接口，且也没有压缩图片，所以为了方便，demo展示了固定链接，接口调用按照具体业务调用，拓展中的dashboard中的内容就是你自己自定义的内容，template是选择标签或者上传的展示的样式，下面方法，按照js的模式去书写，execCommand是插入到编辑器内容内，也就是你想要的返回的数据，都是自己定义的，灵活性特别高
特别强调，拓展的组件要在visibleModules注册，不然不会显示
在这里插入图片描述

下面是返回的数据
在这里插入图片描述

注：由于是demo就没有过多的纠正命名问题，可按照命名规范命名

3、总结
vue-html5-editor是一款拓展性特别好，已经灵活性特别强的富文本编辑器，他不仅能实现pc端，以及移动端和钉钉方面的编辑工作，还能实现其他附加功能已实现产品方面各种各样的需求，如果你不想要编辑器中原本的功能或者显示什么功能，都有入口可以隐藏和显示，拓展功能也有入口去拓展，按照规定的格式插入，实现效果非常好，是一款不错的编辑器

注：附上整体配置文件

export default {
  // 全局组件名称，使用new VueHtml5Editor(options)时该选项无效
  // global component name
  name: 'vue-html5-editor',
  // 是否显示模块名称，开启的话会在工具栏的图标后台直接显示名称
  // if set true,will append module name to toolbar after icon
  showModuleName: false,
  // 自定义各个图标的class，默认使用的是font-awesome提供的图标
  // custom icon class of built-in modules,default using font-awesome
  icons: {
    text: 'el-icon-s-order',
    color: 'el-icon-magic-stick',
    font: 'el-icon-edit',
    align: 'el-icon-s-operation',
    list: 'el-icon-film',
    link: 'el-icon-link',
    unlink: 'el-icon-male',
    tabulation: 'el-icon-connection',
    image: 'el-icon-picture-outline',
    hr: 'el-icon-thumb',
    eraser: 'el-icon-present',
    undo: 'el-icon-toilet-paper',
    'full-screen': 'el-icon-film',
    info: 'el-icon-mobile',
    upload: 'el-icon-scissors'
  },
  // 配置图片模块
  // config image module
  image: {
    // 文件最大体积，单位字节  max file size
    sizeLimit: 512 * 1024,
    // 上传参数,默认把图片转为base64而不上传
    // upload config,default null and convert image to base64
    upload: {
      url: 'http://localhost:8080/files/upload',
      headers: {},
      params: {},
      fieldName: 'file'
    },
    // 压缩参数,默认使用localResizeIMG进行压缩,设置为null禁止压缩
    // compression config,default resize image by localResizeIMG (https://github.com/think2011/localResizeIMG)
    // set null to disable compression
    compress: null,
    // 响应数据处理,最终返回图片链接
    // handle response data，return image url
    uploadHandler(responseText) {
      // default accept json data like  {ok:false,msg:"unexpected"} or {ok:true,data:"image url"}
      var json = JSON.parse(responseText)
      return json.data.fileurl
    }
  },
  // 语言，内建的有英文（en-us）和中文（zh-cn）
  // default en-us, en-us and zh-cn are built-in
  language: 'zh-cn',
  date: {
    format: 'YYYY-MM-DD'
  },
  // 自定义语言
  i18n: {
    // specify your language here
    '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: '重置',
      video: '视频',
      img: '图片'
    }
  },
  // 隐藏不想要显示出来的模块
  // the modules you don't want
  hiddenModules: ['image'],
  // 自定义要显示的模块，并控制顺序
  // keep only the modules you want and customize the order.
  // can be used with hiddenModules together
  visibleModules: ['text', 'color', 'font', 'align', 'list', 'link', 'unlink', 'tabulation', 'image', 'hr', 'eraser', 'undo', 'full-screen', 'info', 'emoji', 'video', 'upload', 'img'],
  modules: [
    {
      name: 'emoji',
      icon: 'el-icon-delete-solid',
      i18n: 'emoji',
      show: true,
      init: function(editor) {
        console.log('emoji module init')
      },
      //vue component
      dashboard: {
        template: '<div><button v-for="s in symbols" type="button" @click="insertSymbol(s)">{{s}}</button></div>',
        data: function() {
          return {
            symbols: ['>_<|||', '^_^;', '⊙﹏⊙‖∣°', '^_^|||', '^_^"', '→_→', '..@_@|||||..', '…(⊙_⊙;)…', 'o_o ....', 'O__O', '///^_^.......', '?o?|||', '( ^_^ )? ', '(+_+)?', '（?ε?）? ', 'o_O???', '@_@a', '一 一+', '>"<||||', '‘(*>﹏<*)′']
          }
        },
        methods: {
          insertSymbol: function(symbol) {
            console.log(symbol, 'symbol')
            //$parent is editor component instance
            this.$parent.execCommand('insertHTML', symbol)
          }
        }
      }
    },
    {
      name: 'video',
      icon: 'el-icon-video-camera',
      i18n: 'video',
      show: true,
      init: function(editor) {
        console.log('emoji module init')
      },
      //vue component
      dashboard: {
        template: '<el-upload style="border: 1px dashed #d9d9d9;border-radius: 6px;cursor: pointer;position: relative;overflow: hidden;" class="avatar-uploader" action="" :http-request="uploadImg"> <i class="el-icon-plus avatar-uploader-icon" style="font-size: 28px;color: #8c939d;width: 178px;height: 178px;line-height: 178px;text-align: center;"></i> </el-upload>',
        data: function() {
          return {
            videoUrl: ''
          }
        },
        methods: {
          uploadImg(file) {
            // 接口调用封装处
            this.videoUrl = 'https://media.w3.org/2010/05/sintel/trailer.mp4'
            this.$parent.execCommand('insertHTML', '<video class="rich-img"  src="' + this.videoUrl + '" autoplay style="max-width:80%" controls x5-video-player-type="h5" x5-video-orientation="portraint">')
          }
        }
      }
    },
    {
      name: 'img',
      icon: 'el-icon-picture',
      i18n: 'img',
      show: true,
      init: function(editor) {
        console.log('emoji module init')
      },
      //vue component
      dashboard: {
        template: '<el-upload class="upload-demo" action="" :http-request="uploadImg"><el-button size="small" type="primary">点击上传</el-button></el-upload>',
        data: function() {
          return {
            imageUrl: ''
          }
        },
        methods: {
          uploadImg(file) {
            // 接口调用封装处
            this.imageUrl = 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
            this.$parent.execCommand('insertHTML', '<img src="' + this.imageUrl + '" style="max-width:80%">')
          }
        }
      }
    }
  ]
}

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^