当前位置:网站首页>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>')
}
}
}
},
边栏推荐
- Wechat applet video sharing platform system graduation design completion (1) development outline
- [Oracle final review] addition, deletion and modification of tablespaces, tables, constraints, indexes and views
- Use dosbox to run the assembly super detailed step "suggestions collection"
- 消除IBM P750小机上的黄色报警灯[通俗易懂]
- Three methods of MySQL backup
- Esp32-c3 introductory tutorial question ⑩ - error: implicit declaration of function 'ESP_ blufi_ close‘;
- 文字编辑器 希望有错误的句子用红色标红,文字编辑器用了markdown
- How to use PS to extract image color and analyze color matching
- QQmlApplicationEngine
- 719. Find the distance of the number pair with the smallest K
猜你喜欢

A good programmer is worth five ordinary programmers!

After 22 years in office, the father of PowerShell will leave Microsoft: he was demoted by Microsoft for developing PowerShell

Wechat applet video sharing platform system graduation design (2) applet function

Leetcode(81)——搜索旋转排序数组 II

【愚公系列】2022年07月 Go教学课程 001-Go语言前提简介

Troubleshooting ideas that can solve 80% of faults

300+篇文献!一文详解基于Transformer的多模态学习最新进展

UE4 用spline畫正圓

SteamOS 3.3 Beta 发布,Steam Deck 中文键盘终于来了

Redis(7)----数据库与过期键
随机推荐
Radian to angle, angle to radian in MATLAB
Win10 uninstall CUDA
工业软件讲堂-三维CAD设计软件的核心技术解析----讲坛第二次讲座
QQmlApplicationEngine
Leetcode interview question 16.11 Diving board
快速排序基本思路(通俗易懂+例子)「建议收藏」
Tower safety monitoring system unattended inclination vibration monitoring system
Please, stop painting star! This has nothing to do with patriotism!
Leetcode(154)——寻找旋转排序数组中的最小值 II
Esp32-c3 introductory tutorial question ⑪ - ESP tls: create_ ssl_ handle failed, tls_ io_ instance->options. trusted_ certs null
How to write controller layer code gracefully?
cJSON 使用详解
饭卡 HDU2546
Leetcode 面试题 16.17. 连续数列
719. 找出第 K 小的数对距离
719. Find the distance of the number pair with the smallest K
Wechat applet video sharing platform system graduation design (2) applet function
微信小程序视频分享平台系统毕业设计毕设(7)中期检查报告
Basic idea of quick sorting (easy to understand + examples) "suggestions collection"
Uncover the whole link communication process of dewu customer service im