Skip to content

富文本编辑器

基于tinymce的基础二次封装。这款是一个功能比较强大的富文本,相对的打包体积也会更大一些。

INFO

无需引入,可直接使用

Usage

只做了最基本的封装,包括双向绑定、加载效果、懒加载、国际化、暗黑模式等。可自行优化调整封装组件以达到你想要的目的。

vue
<template>
  <w-tinymce v-model:value="value" />
</template>

Props

名称类型默认值说明
valuestring-双向绑定的值,只有在编辑器 blur 时才会触发
disabledbooleanfalse禁用
heightstring-高度
widthstring100%宽度

Type

暂无

Form Usage

富文本在表单中是经常使用的,所以封装进了w-form里。具体用法如下,很简单。

ts
const formSchemas = [
  // ...
  {
    type: 'Vendor:Tinymce',
    formProp: {
      label: 'Tinymce',
      path: 'formTinymce',
    },
  },
  // ...
]

TODO

  • 媒体:富文本内部的媒体上传,需要配合接口的那种
  • 模板:富文本更好的模板实例,包括一些国际化等
  • props: plugin/toolbar/menubar 或许也可以做成 prop,不过动态加载插件可能需要研究研究了
  • 通用:支持 cdn 用法,为那些需要减小打包体积的开发者

Released under the MIT License.