富文本(WangEditor)

组件名MeWangEditor，集成了WangEditor,编辑器默认高度为500px可通过样式直接覆盖更改,详细说明请参考WangEditor 文档和用于Vue3。

注意

• 扩展组件只存在完整版中，基础模板中不含有，如果想在基础模板中使用，请将对应文件粘贴到代码中使用。
• 当前组件位置@/components/meWangEditor

组件props

props	类型	说明	必填
mode	'simple' | 'default'	模式，默认值为default。 'default'默认模式，集成了 wangEditor 所有功能。 'simple'简洁模式，仅有部分常见功能，但更加简洁易用	否
config	{ toolbar?: Partial<IToolbarConfig>; editor?: Partial<IEditorConfig> }	wangeditor配置，默认值为{}。toolbar为工具栏配置对象， editor为编辑器配置和菜单配置对象。	否
modelValue(v-model)	string	非格式化的 html内容	是
defaultContent	SlateDescendant[](editor.children 获取的内容)	编辑器默认内容,默认值为[],参考设置-json	否
defaultHtml	string	默认html内容，默认值为'',为空时编辑器会使用v-model绑定的值。参考设置-html	否

组件事件

emit	格式	说明
onCreated	(editor: IDomEditor) =>void	编辑器创建完毕时的回调函数。参考onCreated
onChange	(editor: IDomEditor) =>void	编辑器内容、选区变化时的回调函数。参考onChange
onDestroyed	(editor: IDomEditor) =>void	编辑器销毁时的回调函数。参考onDestroyed
onMaxLength	(editor: IDomEditor) =>void	配置编辑器的 maxlength。参考maxLength onMaxLength
onFocus	(editor: IDomEditor) =>void	编辑器 focus 时的回调函数。参考onFocus
onBlur	(editor: IDomEditor) =>void	编辑器 blur 时的回调函数。参考onBlur
customAlert	(s: string, t: string) =>void	自定义编辑器 alert 。如想用 antd 的 message 功能。参考customAlert
customPaste	(editor: IDomEditor, event: ClipboardEvent,(val: boolean) => { res = val})=>void	自定义粘贴。可阻止编辑器的默认粘贴，实现自己的粘贴逻辑。参考customPaste和wangEditor-for-vue3

注意

注意上述组件事件，必须通过 Vue 事件来传递，不可以放在 config.editor 中

示例

<template>
  <div>
    <me-wang-editor v-model="html" :config="config"></me-wang-editor>
  </div>
</template>
<script setup lang="ts" name="WangEditor">
const html = ref('<p>hello word!</p>');
const config = {
  editor: {
    maxLength: 1000,
    ['MENU_CONF']: {
      uploadImage: {
        // 小于该值就插入 base64 格式（而不上传），默认为 0
        base64LimitSize: 2 * 1024 * 1024, // 5mb
      },
    },
  },
};
</script>