使用环境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) return
else {
//这里的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(/ /gi, '') //去空格
editorLen.value = value.length
overflow.value = value.length > props.maxLength
}
editor.value.editorContent = html
emit('contentChange', editor.value.txt.html())
}
editor.value.config.menus = [...props.menuList]
editor.value.config.height = props.height
editor.value.config.placeholder = props.placeholder
editor.value.config.showFullScreen = false
editor.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, // 工具栏
}
}