import{o as t,c as a,a as n}from"./app.c38d1953.js";const s='{"title":"Editor 富文本组件","description":"","frontmatter":{},"headers":[{"level":2,"title":"用法","slug":"用法"},{"level":2,"title":"Editor 属性","slug":"editor-属性"},{"level":2,"title":"Editor 事件","slug":"editor-事件"},{"level":2,"title":"Editor 方法","slug":"editor-方法"}],"relativePath":"components/editor.md","lastUpdated":1721206001124}',e={},o=n('

Editor 富文本组件

基于 wangeditor 封装。

目前项目中的 editor 只是做了简单的封装，需要开发者根据实际情况，自行配置 editorConfig 属性，如，上传图片功能。

可自行阅读 wangeditor文档

Editor 组件位于 src/components/Editor 内

用法

<script setup lang="ts">\nimport { Editor } from '@/components/Editor'\nimport { ref} from 'vue'\n\nconst defaultHtml = ref('<p>hello <strong>world</strong></p>')\n\nconst change = (html: string) => {\n  console.log(html)\n}\n</script>\n\n<template>\n  <Editor v-model="defaultHtml" ref="editorRef" @change="change" />\n</template>\n\n

Editor 属性

属性说明类型可选值默认值
editorId富文本组件唯一值，必填项string-wangeEditor-1
height高度string/number-500px
editorConfigwangeditor 组件的所有配置项IEditorConfig--
modelValue内容双向绑定，支持v-modelstring--

Editor 事件

方法名说明回调参数
change内容改变时，返回 editor 实例editor: IDomEditor

Editor 方法

方法名说明回调参数
getEditorRef获取 editor 实例() => Promise<IDomEditor>
',13);e.render=function(n,s,e,p,r,d){return t(),a("div",null,[o])};export default e;export{s as __pageData};