minimce

minimce / 富文本编辑器 tinymce封装

Features

EN

• √ Offline ready.
• √ Support for uploading local image, local audio and local video, seamless integration for Imgpond and Filepool.
• √ Support for converting HTML into text.
• √ Register globally or within scope. Config only once for common settings.

CN

• √ 支持离线 断网环境可用
• √ 支持本地图片/本地音频/本地视频上传 无缝集成imgpond/filepool
• √ 支持html转普通文本 使用场景：将前n个字符作为缩略简介 n值可配置
• √ 全局安装/单独引入 通用参数支持全局配置

Installation

$ yarn add minimce

Dependencies：vue element-ui

Optional: imgpond filepool

import { Minimce } from 'minimce'
components: { Minimce }

Globally:

import Minimce from 'minimce'
Vue.use(Minimce)

Quick Start

<Minimce v-model=""/>

Attribute	Description	Way Of Configuration	Type	Accepted Values	Default
value / v-model	双绑	props	String
apiKey	tinymce api key	global，props	String	https://www.tiny.cloud/auth/signup/
disabled	是否禁用（禁用模式不可编辑，保留工具栏）	props	Boolean
readonly	是否只读（只读模式仅展示html，相当于预览）	props	Boolean
html2text	是否开启html转普通文本功能	global，props	Boolean		false
text	value对应的普通文本（仅在html2text为true时有效）	props	String
textMaxlength	普通文本取自前多少个字符（设置为Infinity则不设上限）	global，props	Number		30
Imgpond	上传图片插件（配置后自动开启功能）	global	Vue Component
Filepool	上传文件插件（配置后自动开启功能）	global	Vue Component
audioMenuItem	是否显示音频上传按钮（仅在配置了Filepool时有效）	global，props	Boolean		true
MobileLink	插入移动端页面链接插件（配置后自动开启功能）	global	Vue Component

Imgpond

You can use Imgpond to upload local images.

import Imgpond from 'imgpond'
Vue.use(Imgpond)

import Minimce from 'minimce'
Vue.use(Minimce, {
  Imgpond: Imgpond.Imgpond //默认导出的是普通对象 Imgpond.Imgpond才是组件本身
})

Filepool

You can use Filepool to upload local audio and video.

import Filepool from 'filepool'
Vue.use(Filepool)

import Minimce from 'minimce'
Vue.use(Minimce, {
  Filepool: Filepool.Filepool //默认导出的是普通对象 Filepool.Filepool才是组件本身
})

MobileLink

tinymce的插入链接功能只能插入普通链接 如果需要定制化需求 比如想要插入的链接是移动端某个页面的链接 可以自定义一个组件

组件通过this.$eventBus.emit('insertTag', `<div/>`)插入标签

import { EventBus } from 'plain-kit'
Vue.use(EventBus) //需要事件总线通信

import MobileLink from '@/components/MobileLink'
import Minimce from 'minimce'

Vue.use(Minimce, {
  MobileLink
})

Notice

• element-ui老版本可能存在Imgpond的图片无法清除的问题