当前位置:网站首页>The text editor hopes to mark the wrong sentences in red, and the text editor uses markdown
The text editor hopes to mark the wrong sentences in red, and the text editor uses markdown
2022-07-02 18:40:00 【Woo, Allen】
Text editor I hope there are wrong sentences marked in red , Text editor used markdown
Rich text is a little difficult
<div class="markDownBlock">
<Markdown @on-ready="onReadyMarkdown" v-model="allQues"></Markdown>
<!-- @on-ready="onReadyMarkdown"-->
<Markdown isPreview="true" class="topMarkDown" v-model="errorContent"></Markdown>
<!-- <Markdown class="topMarkDown" v-model="changedContent"></Markdown>-->
</div>
Two markdown One for previewing position: absolute; On the top of the editor On the right , Mask the original editor preview
The one shown should get Edited value , Then mark the wrong sentence red
.markDownBlock{
position: relative;
}
.topMarkDown{
position: absolute;
top: 0;
/*left: ;*/
right: 0;
width: 50%;
}
When parsing Check if there is any repetition
parse () {
// let res= QuestionParser.getEachSub(this.allQues)
let res = QuestionParser.parseQues(this.allQues)
console.log(res)
this.errorHappen = false
this.parsedQuesList = res
// this.parsedQuesList.
this.errorContent = this.allQues
for (let o of this.parsedQuesList) {
// shortTitle
let parsedDataTrimed = o.title.trim()
for (let dbData of this.allQuesListDb) {
if (dbData == null) {
continue
}
let shortTitle = dbData.shortTitle
if (shortTitle == null) {
console.log(' No title ')
console.log('dbData')
console.log(dbData)
continue
}
let shortTitleDbTrimed = dbData.shortTitle.trim()
// let parsedDataTrimed= o.title.trim()
if (shortTitleDbTrimed == parsedDataTrimed) {
console.log(' It's the same ')
console.log(' In the database ')
console.log(shortTitleDbTrimed)
console.log(' Now it is resolved ')
console.log(parsedDataTrimed)
this.errorHappen = true
// this.allQues=this.allQues.replace(shortTitleDbTrimed,
// '<span style=\'color: red;\' >' + shortTitleDbTrimed + '</span>')
this.errorContent = this.errorContent.replace(shortTitleDbTrimed,
'<span style=\'color: red;\' >' + shortTitleDbTrimed + '</span>')
}
}
}
},
边栏推荐
- Unity学习shader笔记[八十一]简单的颜色调整后处理(亮度,饱和度,对比度)
- Redis(7)----数据库与过期键
- What is cloud primordial? This time, I can finally understand!
- Chrome officially supports MathML, which is enabled in chromium dev 105 by default
- [Northwestern Polytechnic University] information sharing of the first and second postgraduate examinations
- 在支付宝账户上买基金安全吗
- Radian to angle, angle to radian in MATLAB
- options should NOT have additional properties
- 300+ documents! This article explains the latest progress of multimodal learning based on transformer
- UE4 用spline画正圆
猜你喜欢
Wechat nucleic acid detection appointment applet system graduation design completion (4) opening report
Wechat applet video sharing platform system graduation design (2) applet function
RDK simulation experiment
Leetcode interview question 16.17 Continuous sequence
exness深度好文:动性系列-黄金流动性实例分析(五)
Ue4 dessine un cercle avec une ligne de contour
QT official example: QT quick controls - Gallery
Steamos 3.3 beta release, steam deck Chinese keyboard finally came
再放宽!这些应届生,可直接落户上海
Ali was wildly asked by the interviewer on three sides. Redis dared not write 'proficient' on his resume anymore
随机推荐
@Component 拿不到dao层
MySQL about only_ full_ group_ By limit
Babbitt | metauniverse daily must read: can you buy a virtual anchor for 1000 yuan? Is this the live gospel of small businesses or "cutting leeks"
什么是云原生?这回终于能搞明白了!
Server PHP environment building tutorial, PHP server environment building graphic explanation
UE4 用spline畫正圓
Meal card hdu2546
NM01-独立于总线协议的NM模块功能概述与API定义
Leetcode interview question 16.17 Continuous sequence
iframe嵌套详解
Leetcode interview question 16.15 Abacus wonderful calculation
Eliminate the yellow alarm light on IBM p750 small computer [easy to understand]
Radian to angle, angle to radian in MATLAB
UE4 用spline画正圆
Esp32-c3 introductory tutorial question ⑪ - ESP tls: create_ ssl_ handle failed, tls_ io_ instance->options. trusted_ certs null
RDK仿真实验
国金证券是国企吗?在国金证券开户资金安全吗?
Wechat applet video sharing platform system graduation design completion (8) graduation design thesis template
300+篇文献!一文详解基于Transformer的多模态学习最新进展
Pit encountered during installation of laravel frame