富文本组件wangeditor
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>
