ThEditor富文本编辑器

基于wangeditor二次封装的富文本编辑器，内置了默认url和token填充，支持v-model的方式调用

依赖说明

wangeditor (opens new window) 富文本编辑器(v5)

使用注意

富文本编辑器输出或者生成的HTML都是纯标签,没有内联样式,如果使用样式不统一,请查看项目中对于基础元素的自定义样式是否统一!

基本使用

<template>
  <th-editor v-model="content" height="500" />
</template>

<script>
export default {
  data() {
    return {
      content: '<p>超好用的富文本编辑器</p>'
    }
  },  
}
</script>

效果演示

Api

参数	说明	类型	默认值	可选值
value	文本内容，支持v-model调用	String	--	--
uploadUrl	上传图片、视频地址(需要有效的token)	String	/api/authen/file/up	--
width	组件宽度，默认为auto，支持填写数字，数字+px，百分比，auto四种形式	String,Number	auto	--
height	富文本输入框高度	String,Number	500
placeholder	提示文字	String	请输入...
showWordLimit	显示字数限制,内容过多时不建议使用,可能造成卡顿	Boolean	false
maxlength	最大长度,必须同时开启showWordLimit才有效	String,Number	1500
type	富文本的类型, simple模式下简化菜单	String	'default'	'default' / 'simple'
excludeKeys	不包含的菜单,去除不需要的菜单所有菜单key	Array	--
onlyEnableKeys	仅包含的菜单 谨慎使用	Array	[]
maxlength	长度 默认1500 (不做实际输入控制，长度包含标签长度）	Number	1500
maxImageSize	上传图片时文件最大体积	Number	20
maxVideSize	上传视频时文件最大体积	Number	100
autoFocus	自动focus	Boolean	false
readOnly	是否只读	Boolean	false
uploadStatus	上传状态,需要配合 sync修饰符使用 :upload-status.sync="uploadStatus"; 值为0-待上传 1-上传中 2-上传完成 -1-上传失败	number	0	--

Events

参数	说明	回调参数
init	初始化成功回调	(editor: 富文本实例)
blur	失焦	--
focus	聚焦	--

所有菜单的key

bold, underline, italic, through, code, sub, sup, clearStyle, color, bgColor, fontSize, fontFamily, indent, delIndent, justifyLeft, justifyRight, justifyCenter, justifyJustify, lineHeight, insertImage, deleteImage, editImage, viewImageLink, imageWidth30, imageWidth50, imageWidth100, divider, emotion, insertLink, editLink, unLink, viewLink, codeBlock, blockquote, headerSelect, header1, header2, header3, header4, header5, todo, redo, undo, fullScreen, enter, bulletedList, numberedList, insertTable, deleteTable, insertTableRow, deleteTableRow, insertTableCol, deleteTableCol, tableHeader, tableFullWidth, insertVideo, uploadVideo, editVideoSize, uploadImage, codeSelectLang