当前位置:网站首页>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>')
}
}
}
},
边栏推荐
- C # detect whether the picture is rotated and modified to the true rotation
- Responses of different people in technology companies to bugs | daily anecdotes
- [Oracle final review] addition, deletion and modification of tablespaces, tables, constraints, indexes and views
- Picking up the camera is the best artistic healing
- 300+篇文献!一文详解基于Transformer的多模态学习最新进展
- 一款简约PHP个人发卡程序V4.0版本
- 微信小程序视频分享平台系统毕业设计毕设(8)毕业设计论文模板
- 又一所双非改考408,会爆冷么?南昌航空大学软件学院
- The official docker image running container in version 1.5.1 can be set to use MySQL 8 driver?
- UE4 用spline画正圆
猜你喜欢
![[Northwestern Polytechnic University] information sharing of the first and second postgraduate examinations](/img/15/298ea6f7367741e1e085007c498e51.jpg)
[Northwestern Polytechnic University] information sharing of the first and second postgraduate examinations

Wechat nucleic acid detection and appointment applet system graduation design (3) background function

Leetcode 面试题 16.11. 跳水板

昨天阿里学长写了一个责任链模式,竟然出现了无数个bug

Uncover the whole link communication process of dewu customer service im

Leetcode interview question 17.04 Vanishing numbers

Wechat nucleic acid detection appointment applet system graduation design completion (4) opening report

什么是云原生?这回终于能搞明白了!

如何清理废弃pv和其对应的文件夹

Steamos 3.3 beta release, steam deck Chinese keyboard finally came
随机推荐
Troubleshooting ideas that can solve 80% of faults
Wechat applet video sharing platform system graduation design completion (1) development outline
微信小程序视频分享平台系统毕业设计毕设(7)中期检查报告
Steamos 3.3 beta release, steam deck Chinese keyboard finally came
PR曲线和ROC曲线概念及其区别
微信小程序视频分享平台系统毕业设计毕设(4)开题报告
微信核酸检测预约小程序系统毕业设计毕设(2)小程序功能
Relax again! These fresh students can settle directly in Shanghai
Win10 uninstall CUDA
The official docker image running container in version 1.5.1 can be set to use MySQL 8 driver?
Leetcode(154)——寻找旋转排序数组中的最小值 II
微信核酸检测预约小程序系统毕业设计毕设(3)后台功能
Export Excel files using npoi
Leetcode interview question 17.04 Vanishing numbers
Chrome officially supports MathML, which is enabled in chromium dev 105 by default
ESP32-C3入门教程 问题篇⑪——esp-tls: create_ssl_handle failed, tls_io_instance->options.trusted_certs null
Aptos tutorial - participate in the official incentive testing network (ait2 incentive testing network)
Pychar modify pep8 e501 line too long > 0 characters
What is cloud primordial? This time, I can finally understand!
IPtable port redirection masquerade[easy to understand]