使用环境vue3 + ts  ，添加了字数限制

尝试了两种，使用方法类似（参考文档），工具栏图标有不同，最后选用了第一种。

一、wangeditor 安装

 npm i wangeditor --save

使用

这里封装了个简单组件

<template><div class="editor-container"><div id="editor"></div><div :class="overflow ? 'editorText alert' : 'editorText'" v-if="maxLength > 0">{{ editorLen }} / {{ maxLength }}</div></div>
</template><script lang="ts" setup>
import { ref, onMounted, defineExpose, watch } from 'vue'
import EWangEditor from 'wangeditor'   //引入const props = defineProps({htmls: {  type: String,default: ''},height: {          //编辑框高度type: Number,default: 200},maxLength: {       //字数限制type: Number,default: -1},placeholder: {type: String,default: '请输入内容...'},menuList: {        // 工具栏配置           type: Array,default: () => []}
})
const emit = defineEmits(['contentChange'])
const editor = ref()
const editorLen = ref(0)       //字数统计
const overflow = ref(false)    //文本溢出const initEditor = function () {    //初始化 创建实例if (editor.value) returnelse {
//这里的EWangEditor同引入时的名称一致editor.value = new EWangEditor('#editor')editor.value.customConfig = editor.value.customConfig? editor.value.customConfig: editor.value.config
//change监听  做字数限制处理editor.value.customConfig.onchange = (html) => {console.log(html, 'editor change')if (props.maxLength > 0) {let reg = /<[^<>]+>/g                     //去标签let value = html.replace(reg, '')value = value.replace(/&nbsp;/gi, '')    //去空格editorLen.value = value.lengthoverflow.value = value.length > props.maxLength}editor.value.editorContent = htmlemit('contentChange', editor.value.txt.html())}editor.value.config.menus = [...props.menuList]editor.value.config.height = props.heighteditor.value.config.placeholder = props.placeholdereditor.value.config.showFullScreen = falseeditor.value.create()resetEditor()console.log(editor.value, 'editor.value')}
}onMounted(() => {initEditor()
})
//设置初始内容
const resetEditor = function (val?: string) {editor.value.txt.html(val || props.htmls)
}
//销毁
const destroyEditor = function () {editor.value.destroy()editor.value = null
}
//清空
const clearEditor = function () {editor.value.txt.clear()
}defineExpose({ clearEditor,  destroyEditor, resetEditor })</script><style scoped>
.editor-container {width: 100%;position: relative;
}
.editorText {position: absolute;bottom: 0;right: 10px;color: #909399;z-index: 10001;
}
.alert {color: #f56c6c;
}
:deep(.vcp-fullscreen-toggle) {          //这里隐藏了 全屏display: none;
}
</style>

效果图：

我这里工具栏按需求只放了自己需要的功能 

二、vue-quill-editor安装

npm install vue-quill-editor --save

全局引入：

 //引入quill-editor编辑器import VueQuillEditor from 'vue-quill-editor'import 'quill/dist/quill.core.css'import 'quill/dist/quill.snow.css'import 'quill/dist/quill.bubble.css'Vue.use(VueQuillEditor)

使用

此处代码不全，不可正常运行，使用参考文档

 <quill-editor  class="editor"  v-model="content" ref="customQuillEditor" :options="editorOption" />const toolbarOptions = [["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线["blockquote", "code-block", "formula"], // 引用  代码块 插入公式[{ header: 1 }, { header: 2 }], // 1、2 级标题[{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表[{ script: "sub" }, { script: "super" }], // 上标/下标[{ indent: "-1" }, { indent: "+1" }], // 缩进[{ direction: "rtl" }], // 文本方向[{ size: [false,"14px","16px","18px","20px","22px","26px","28px","30px"] }], // 字体大小[{ header: [1, 2, 3, 4, 5,6, false] }], // 标题[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色[{ font: ["SimSun","SimHei","Microsoft-YaHei","KaiTi","FangSong","Arial","Times-New-Roman","sans-serif",] }], // 字体种类[{ align: [] }], // 对齐方式["clean"], // 清除文本格式["link", "image", "video", "report"] // 链接、图片、视频、自定义行为
]const editorOption = {placeholder:'你想说什么？',toolbar: {container: toolbarOptions,  // 工具栏}
}

效果图：