当前位置:网站首页>Wangeditor rich text component - copy available
Wangeditor rich text component - copy available
2022-07-06 11:33:00 【iatkotworld】
wangeditor Rich text component
Function is introduced :
This article records wangeditor The most basic usage , For more usage, please go to the official website .
The whole idea :
Typescript Developed Web Rich text editor , Light weight 、 concise 、 Easy to use 、 Free open source ( From website ).
Concrete realization :
One 、 install :
npm i wangeditor --save
Two 、 Introduce and use :
<template>
<div>
<div ref="richText" style="height: 100%;"></div>
</div>
</template>
<script>
// Import rich text editor
import wangeditor from 'wangeditor';
export default {
name: "richtext",
data() {
return {
richTextEditor: {
},
};
},
mounted() {
// call
this.initRichText();
},
methods: {
// Rich text box initialization
initRichText() {
this.richTextEditor = new WangEditor(self.$refs.richText);
// Configuration menu bar , Cut the menu , Adjust the order
this.richTextEditor.config.menus = [
'head', // title
'bold', // In bold
'fontSize', // Font size
'fontName', // typeface
'italic', // Italics
'underline', // Underline
'strikeThrough', // Delete line
'indent', // Indent
'lineHeight', // Row height
'foreColor', // Text color
'backColor', // Background color
'link', // link
'list', // Sequence
'todo', // To do list
'justify', // alignment
'quote', // quote
// 'emoticon',
// 'image', // picture
// 'video',
'table', // form
// 'code', // Code
'splitLine', // Split line
'undo', // revoke
'redo', // recovery
];
// Use base64 Save the picture
this.richTextEditor.config.uploadImgShowBase64 = true;
// Hide web pictures
this.richTextEditor.config.showLinkImg = false;
// Configure the full screen function button not to display
// this.richTextEditor.config.showFullScreen = true;
// Set the height of the editor content area
this.richTextEditor.config.height = 150;
// Set the of rich text z-index
this.richTextEditor.config.zIndex = 105;
// Disable automatic selection
this.richTextEditor.config.focus = false;
// modify placeholder The prompt text of
this.richTextEditor.config.placeholder = '';
// The menu bar prompt is subscript
// this.richTextEditor.config.menuTooltipPosition = 'bottom';
// Remove the default style of copied text
this.richTextEditor.config.pasteFilterStyle = true;
this.richTextEditor.create();
this.richTextEditor.config.onchange = this.richTextChange;
// assignment
const myHtml = '<p>123</p>';
this.richTextEditor.txt.html(myHtml);
},
// The content of the rich text box changes , Value
richTextChange(newHtml) {
console.log(newHtml);
// obtain html
console.log(this.richTextEditor.txt.html());
// obtain text Text
console.log(this.richTextEditor.txt.text());
},
}
};
</script>
3、 ... and 、 Use ( Form validation , combination element-ui Use ):
Non empty verification , Set a hidden input Components , Be responsible for using the verification prompt .
<template>
<el-form ref="form" :model="form" :rules="rules" size="small" label-position="top" >
<el-form-item label=" Content " 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() {
// Custom validation
const contentLength = (rule, value, callback) => {
if (value === '') {
callback(new Error(' The content cannot be empty ');
} else {
if (this.richTxt.length > 100) {
callback(new Error(' The number of words cannot exceed 100 word ');
}
callback();
}
};
return {
form: {
content: ''
},
// Form validation
rules: {
// Announcement content
content: [
{
validator: contentLength, trigger: 'change' }
]
},
richTxt: '',
// Rich text editing component
richTextEditor: {
},
};
},
watch: {
// Announcement content verification monitoring
'form.content': {
handler() {
// Call form validation
this.$refs.form.validateField('content');
}
}
},
mounted() {
this.initRichText();
},
methods: {
// Rich text box initialization
initRichText() {
// Omit the initialization code above
// binding change event
this.richTextEditor.config.onchange = this.richTextChange;
},
// Copy the contents of the rich text box
richTextChange(newHtml) {
this.richTxt = this.richTextEditor.txt.text();
this.form.content= newHtml;
}
}
};
</script>
边栏推荐
- [Blue Bridge Cup 2017 preliminary] buns make up
- [download app for free]ineukernel OCR image data recognition and acquisition principle and product application
- Kept VRRP script, preemptive delay, VIP unicast details
- yarn安装与使用
- 误删Path变量解决
- When you open the browser, you will also open mango TV, Tiktok and other websites outside the home page
- What does usart1 mean
- SQL时间注入
- 机器学习--人口普查数据分析
- Heating data in data lake?
猜你喜欢
Vs2019 first MFC Application
Valentine's Day flirting with girls to force a small way, one can learn
人脸识别 face_recognition
Pytoch Foundation
Why can't I use the @test annotation after introducing JUnit
Mtcnn face detection
Integration test practice (1) theoretical basis
AcWing 1298. Solution to Cao Chong's pig raising problem
4. Install and deploy spark (spark on Yan mode)
Rhcsa certification exam exercise (configured on the first host)
随机推荐
Codeforces Round #753 (Div. 3)
搞笑漫画:程序员的逻辑
L2-001 紧急救援 (25 分)
Django running error: error loading mysqldb module solution
Word排版(小计)
How to configure flymcu (STM32 serial port download software) is shown in super detail
L2-007 家庭房产 (25 分)
Library function -- (continuous update)
QT creator custom build process
AcWing 1294. Cherry Blossom explanation
SQL时间注入
Double to int precision loss
Test objects involved in safety test
Classes in C #
Picture coloring project - deoldify
DICOM: Overview
One click extraction of tables in PDF
Face recognition_ recognition
[蓝桥杯2020初赛] 平面切分
QT creator create button