当前位置:网站首页>wangeditor富文本组件-复制可用
wangeditor富文本组件-复制可用
2022-07-06 09:15:00 【iatkotworld】
功能介绍:
本文记录了wangeditor最基本的用法,其他更多用法可去官网查找。
整体思路:
Typescript 开发的 Web 富文本编辑器, 轻量、简洁、易用、开源免费(摘自官网)。
具体实现:
一、安装:
npm i wangeditor --save
二、引入并使用:
<template>
<div>
<div ref="richText" style="height: 100%;"></div>
</div>
</template>
<script>
// 导入富文本编辑器
import wangeditor from 'wangeditor';
export default {
name: "richtext",
data() {
return {
richTextEditor: {
},
};
},
mounted() {
// 调用
this.initRichText();
},
methods: {
// 富文本框初始化
initRichText() {
this.richTextEditor = new WangEditor(self.$refs.richText);
// 配置菜单栏,删减菜单,调整顺序
this.richTextEditor.config.menus = [
'head', // 标题
'bold', // 加粗
'fontSize', // 字号
'fontName', // 字体
'italic', // 斜体
'underline', // 下划线
'strikeThrough', // 删除线
'indent', // 缩进
'lineHeight', // 行高
'foreColor', // 文字颜色
'backColor', // 背景色
'link', // 链接
'list', // 序列
'todo', // 待办事项
'justify', // 对齐
'quote', // 引用
// 'emoticon',
// 'image', // 图片
// 'video',
'table', // 表格
// 'code', // 代码
'splitLine', // 分割线
'undo', // 撤销
'redo', // 恢复
];
// 使用base64保存图片
this.richTextEditor.config.uploadImgShowBase64 = true;
// 隐藏网络图片
this.richTextEditor.config.showLinkImg = false;
// 配置全屏功能按钮不展示
// this.richTextEditor.config.showFullScreen = true;
// 设置编辑器内容区域的高度
this.richTextEditor.config.height = 150;
// 设置富文本的z-index
this.richTextEditor.config.zIndex = 105;
// 禁止自动选中
this.richTextEditor.config.focus = false;
// 修改 placeholder 的提示文字
this.richTextEditor.config.placeholder = '';
// 菜单栏提示为下标
// this.richTextEditor.config.menuTooltipPosition = 'bottom';
// 去除复制过来文本的默认样式
this.richTextEditor.config.pasteFilterStyle = true;
this.richTextEditor.create();
this.richTextEditor.config.onchange = this.richTextChange;
// 赋值
const myHtml = '<p>123</p>';
this.richTextEditor.txt.html(myHtml);
},
// 富文本框内容发生改变,取值
richTextChange(newHtml) {
console.log(newHtml);
// 获取 html
console.log(this.richTextEditor.txt.html());
// 获取 text 文本
console.log(this.richTextEditor.txt.text());
},
}
};
</script>
三、使用(表单验证,结合element-ui使用):
非空验证,设置一个隐藏input组件,负责使用验证提示。
<template>
<el-form ref="form" :model="form" :rules="rules" size="small" label-position="top" >
<el-form-item label="内容" prop="noticeContent" >
<el-input v-if="false" v-model="form.content" readonly />
<div ref="richText" class="richText" style="height: 100%;"/>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
// 自定义验证
const contentLength = (rule, value, callback) => {
if (value === '') {
callback(new Error('内容不可为空');
} else {
if (this.richTxt.length > 100) {
callback(new Error('字数不可超过100字');
}
callback();
}
};
return {
form: {
content: ''
},
// 表单验证
rules: {
// 公告内容
content: [
{
validator: contentLength, trigger: 'change' }
]
},
richTxt: '',
// 富文本编辑组件
richTextEditor: {
},
};
},
watch: {
// 公告内容校验监听
'form.content': {
handler() {
// 调用表单验证
this.$refs.form.validateField('content');
}
}
},
mounted() {
this.initRichText();
},
methods: {
// 富文本框初始化
initRichText() {
// 省略上面初始化的代码
// 绑定change事件
this.richTextEditor.config.onchange = this.richTextChange;
},
// 富文本框内容复制
richTextChange(newHtml) {
this.richTxt = this.richTextEditor.txt.text();
this.form.content= newHtml;
}
}
};
</script>
边栏推荐
猜你喜欢
Machine learning -- census data analysis
C语言读取BMP文件
QT creator test
引入了junit为什么还是用不了@Test注解
Integration test practice (1) theoretical basis
Did you forget to register or load this tag 报错解决方法
vs2019 桌面程序快速入门
Deoldify project problem - omp:error 15:initializing libiomp5md dll,but found libiomp5md. dll already initialized.
wangeditor富文本引用、表格使用问题
QT creator custom build process
随机推荐
AcWing 179. Factorial decomposition problem solution
02-项目实战之后台员工信息管理
Project practice - background employee information management (add, delete, modify, check, login and exit)
Why can't STM32 download the program
报错解决 —— io.UnsupportedOperation: can‘t do nonzero end-relative seeks
Leetcode 461 Hamming distance
机器学习--人口普查数据分析
Punctual atom stm32f103zet6 download serial port pin
Summary of numpy installation problems
MySQL and C language connection (vs2019 version)
JDBC原理
QT creator runs the Valgrind tool on external applications
【kerberos】深入理解kerberos票据生命周期
QT creator custom build process
Remember the interview algorithm of a company: find the number of times a number appears in an ordered array
Deoldify project problem - omp:error 15:initializing libiomp5md dll,but found libiomp5md. dll already initialized.
保姆级出题教程
Unable to call numpy in pycharm, with an error modulenotfounderror: no module named 'numpy‘
02 staff information management after the actual project
安装numpy问题总结