富文本

二次封装富文本-Tinymce, 演示效果

  • 开箱即用
  • 支持富文本效果实时预览
  • 支持富文本源码预览
  • 支持拖拽图片上传
  • 支持自定义工具栏图标
  • 支持部分markdown语法

TIP

如果使用插入图片功能,需配合后端文件上传接口使用;图片上传成功后,会以该图片完整的url地址的形式插入到富文本内容当中。

基础示例

<template>
  <tinymce  @change="change" upload_url="文件存储接口地址" />
</template>

<script>
import Tinymce from '@/components/base/tinymce'

export default {
  components: {
    Tinymce,
  },
  methods: {
    // 监听富文本内容变化
    change(val) {
      console.log(val)
    },
  },
}
</script>

props

参数 类型 默认值 说明
height Number 500 富文本高度
width Number —— 富文本宽度
defaultContent String —— 富文本默认内容
upload_url String —— 图片上传地址
showMenubar Boolean true 是否展示左上方的中文菜单栏
toolbar String undo redo | formatselect | bold italic strikethrough forecolor backcolor formatpainter | link image | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | removeformat | preview fullscreen code 自定义工具栏图标

events

方法名 参数 说明
change val 监听富文本的内容变化

TIP

更多用法请参考Tinymce

上次更新: 10/24/2019, 3:28:13 PM