1、富文本组件wangEditor
<template> <div class="editor"> <div ref="wangEditor"></div> <span class="wordNumber">{{ TiLength }}/{{ maxlength }}</span> </div> </template> <script> import E from 'wangeditor' export default { name: 'editor', data() { return { TiLength: 0, content: '', editor: null, info_: null, editorHtml: null, } }, model: { prop: 'value', event: 'change', }, watch: { isClear(val) { if (val) { this.editor.txt.clear() } }, value(value) { if (value) { document.querySelector('.placeholder').style.display = 'none' } else { document.querySelector('.placeholder').style.display = 'block' } if (value != this.editor.txt.html()) { this.editor.txt.html(this.value) } }, }, props: { value: { type: String, default: '', }, //业务中我们经常会有添加操作和编辑操作,添加操作时,我们需清除上一操作留下的缓存 isClear: { type: Boolean, default: false, }, disabled: { type: Boolean, default: false, }, placeholder: { type: String, default: '', }, maxlength: { type: Number, default: 1000, }, }, methods: { insertHtml(value) { this.editor.cmd.do('insertHtml', value) }, initE() { this.editor = new E(this.$refs.wangEditor) this.editor.config.height = 400 this.editor.config.pasteFilterStyle = false this.editor.config.uploadImgTimeout = 5000 // 设置上传图片超时时间 this.editor.config.uploadImgShowBase64 = true // 上传base64图片 this.editor.config.showLinkImg = false this.editor.zIndex.baseZIndex = 100 if (this.disabled) { this.editor.disable() } this.editor.config.onchange = (html) => { let reg = /<[^<>]+>/g //去标签 // var reg = /<(?!img).*?>/g //去除img以外的所有标签 let value = html.replace(reg, '') value = value.replace(/ /gi, '') //将空格全部替换 this.TiLength = value.length //文字长度显示 console.log(this.TiLength, ' this.TiLength') if (Number(this.TiLength) <= Number(this.maxlength)) { this.info_ = html // 绑定当前逐渐地值 } if (Number(this.TiLength) > Number(this.maxlength)) { //当长度大于10时,只截取10之前的内容并赋值 console.log(value) this.info_ = value.slice(0, this.maxlength) // 绑定当前逐渐地值 console.log(this.info_) return } // this.editor.txt.html(this.info_) if (value) { document.querySelector('.placeholder').style.display = 'none' } else { document.querySelector('.placeholder').style.display = 'block' } this.$emit('change', this.info_) // 将内容同步到父组件中 // this.info_ = html // 绑定当前逐渐地值 } this.editor.config.menus = [ 'head', // 标题 'bold', // 粗体 'fontSize', // 字号 'fontName', // 字体 'italic', // 斜体 'underline', // 下划线 'strikeThrough', // 删除线 'foreColor', // 文字颜色 'backColor', // 背景颜色 'link', // 插入链接 'list', // 列表 'justify', // 对齐方式 'quote', // 引用 'emoticon', // 表情 'image', // 插入图片 'table', // 表格 'code', // 插入代码 'undo', // 撤销 'redo', // 重复 ] this.editor.create() this.$refs.wangEditor.addEventListener('input', this.inputEvent) }, inputEvent() { let html = this.editor.txt.html() // if (html === '' || html === '<p><br></p>') { this.editor.config.onchange(html) // } }, }, mounted() { this.initE() }, } </script> <style lang="scss" scoped> .editor { position: relative; .warnText { font-size: 14px; color: red; text-align: left; } .wordNumber { color: #909399; background: #fff; text-align: right; z-index: 100; right: 10px; bottom: 5px; font-size: 12px; position: absolute; } } </style>
2、页面使用
<template> <div class=""> <el-card shadow="never" class="body-2" :body-style="{ padding: '12px' }"> <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="mt-4"> <el-row class="mt-3"> <el-col :span="24"> <el-form-item prop="wangEditor" label="富文本组件:"> <editor v-model="form.wangEditor" :isClear="isClear" :placeholder="'请输入'"></editor> </el-form-item> </el-col> </el-row> </el-form> </el-card> </div> </template> <script> import editor from '@/components/wangEditor' export default { components: { editor, }, data() { return { isClear: false, form: { wangEditor: null, }, rules: { wangEditor: [{ required: true, message: '请输入富文本', trigger: 'blur' }], }, } }, computed: {}, created() {}, mounted() { this.isClear = true }, methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { this.isClear = false } else { return false } }) }, }, } </script> <style lang="scss"> </style>
3、展示效果
<template>
<div class="editor">
<div ref="wangEditor"></div>
<span class="wordNumber">{{ TiLength }}/{{ maxlength }}</span>
</div>
</template>
<script>
import E from 'wangeditor'
export default {
name: 'editor',
data() {
return {
TiLength: 0,
content: '',
editor: null,
info_: null,
editorHtml: null,
}
},
model: {
prop: 'value',
event: 'change',
},
watch: {
isClear(val) {
if (val) {
this.editor.txt.clear()
}
},
value(value) {
if (value) {
document.querySelector('.placeholder').style.display = 'none'
} else {
document.querySelector('.placeholder').style.display = 'block'
}
if (value != this.editor.txt.html()) {
this.editor.txt.html(this.value)
}
},
},
props: {
value: {
type: String,
default: '',
},
//业务中我们经常会有添加操作和编辑操作,添加操作时,我们需清除上一操作留下的缓存
isClear: {
type: Boolean,
default: false,
},
disabled: {
type: Boolean,
default: false,
},
placeholder: {
type: String,
default: '',
},
maxlength: {
type: Number,
default: 1000,
},
},
methods: {
insertHtml(value) {
this.editor.cmd.do('insertHtml', value)
},
initE() {
this.editor = new E(this.$refs.wangEditor)
this.editor.config.height = 400
this.editor.config.pasteFilterStyle = false
this.editor.config.uploadImgTimeout = 5000 // 设置上传图片超时时间
this.editor.config.uploadImgShowBase64 = true // 上传base64图片
this.editor.config.showLinkImg = false
this.editor.zIndex.baseZIndex = 100
if (this.disabled) {
this.editor.disable()
}
this.editor.config.onchange = (html) => {
let reg = /<[^<>]+>/g //去标签
// var reg = /<(?!img).*?>/g //去除img以外的所有标签
let value = html.replace(reg, '')
value = value.replace(/ /gi, '') //将空格全部替换
this.TiLength = value.length //文字长度显示
console.log(this.TiLength, ' this.TiLength')
if (Number(this.TiLength) <= Number(this.maxlength)) {
this.info_ = html // 绑定当前逐渐地值
}
if (Number(this.TiLength) > Number(this.maxlength)) {
//当长度大于10时,只截取10之前的内容并赋值
console.log(value)
this.info_ = value.slice(0, this.maxlength) // 绑定当前逐渐地值
console.log(this.info_)
return
}
// this.editor.txt.html(this.info_)
if (value) {
document.querySelector('.placeholder').style.display = 'none'
} else {
document.querySelector('.placeholder').style.display = 'block'
}
this.$emit('change', this.info_) // 将内容同步到父组件中
// this.info_ = html // 绑定当前逐渐地值
}
this.editor.config.menus = [
'head', // 标题
'bold', // 粗体
'fontSize', // 字号
'fontName', // 字体
'italic', // 斜体
'underline', // 下划线
'strikeThrough', // 删除线
'foreColor', // 文字颜色
'backColor', // 背景颜色
'link', // 插入链接
'list', // 列表
'justify', // 对齐方式
'quote', // 引用
'emoticon', // 表情
'image', // 插入图片
'table', // 表格
'code', // 插入代码
'undo', // 撤销
'redo', // 重复
]
this.editor.create()
this.$refs.wangEditor.addEventListener('input', this.inputEvent)
},
inputEvent() {
let html = this.editor.txt.html()
// if (html === '' || html === '<p><br></p>') {
this.editor.config.onchange(html)
// }
},
},
mounted() {
this.initE()
},
}
</script>
<style lang="scss" scoped>
.editor {
position: relative;
.warnText {
font-size: 14px;
color: red;
text-align: left;
}
.wordNumber {
color: #909399;
background: #fff;
text-align: right;
z-index: 100;
right: 10px;
bottom: 5px;
font-size: 12px;
position: absolute;
}
}
</style>