先看示例

找了篇博客写的贼详细 https://blog.csdn.net/xujingyiss/article/details/118992763

只要设置这二个

       let content = ""; 可以写你需要的样式
配置如下
  const cmOptions = {
mode: 'text/x-mysql', // //语言模式
theme: 'neo', // 主题
lineNumbers: false, // 显示行号
smartIndent: true, //智能缩进
indentUnit: 4, // 智能缩进单元长度为 4 个空格
foldGutter: true, // 代码折叠
styleActiveLine: true, // 显示选中行的样式
matchBrackets: true, //每当光标位于匹配的方括号旁边时,都会使其高亮显示
autofocus: true,
showCursorWhenSelecting: true,
autocorrect: true,
spellcheck: true,
specialChars: /[\u0000-\u001f\u007f-\u009f\u00ad\u061c\u200b-\u200f\u2028\u2029\ufeff\ufff9-\ufffc]/g,
specialCharPlaceholder: function (ch) {
let token = document.createElement("span");
let content = "";
token.className = "cm-invalidchar";
if (typeof content == "string") {
token.appendChild(document.createTextNode(content));
}
token.title = "\\u" + ch.charCodeAt(0).toString(16);
token.setAttribute("aria-label", token.title);
return token
},
// 代码折叠
gutters: [
"CodeMirror-lint-markers",
"CodeMirror-linenumbers",
"CodeMirror-foldgutter"
],
foldGutter: true, // 启用行槽中的代码折叠
}

可以看下上面的博客里面或许有你们需要的

改完之后就是下面这样

codemirror-editor-vue3 编辑器只要换行保存就会有小红点的更多相关文章

  1. Delphi Code Editor 之 编辑器选项

    Delphi Code Editor 之 编辑器选项 可从Code Editor的右键菜单中选择“Properties”菜单项来查看编辑器选项.也可以从主菜单[Tools | Editor Optio ...

  2. python生成组织架构图(网络拓扑图、graph.editor拓扑图编辑器)

    Graph.Editor是一款基于HTML5技术的拓补图编辑器,采用jquery插件的形式,是Qunee图形组件的扩展项目,旨在提供可供扩展的拓扑图编辑工具, 拓扑图展示.编辑.导出.保存等功能,此外 ...

  3. 为 Editor.md 编辑器插件增加预览和发布按钮

    前言 一直在使用 Editor.md 插件作为博客的编辑器,用着挺好,但是在全屏下编辑时,每次想预览或者保存又必须切换到非全屏状态下才可以点击按钮,用着不舒服,所以花了一点时间在工具栏上增加了预览.保 ...

  4. 编辑器插件数据保存之Serializable

    Editor数据保存需求 做编辑器插件开发时,当打开一个窗口,对数值进行修改后,在关闭窗口或重新打开Unity时,希望能保存上次的数据. 相关知识 Serialization ,ScriptableO ...

  5. CodeMirror 在线代码编辑器

    像百度编辑器插件部分.菜鸟教程示例等高德地图都在使用,这里也记录一下: CodeMirror是一个用于编辑器文本框textarea代码高亮javascript插件...... vue 中使用 参见:h ...

  6. CodeMirror在线代码编辑器使用

    CodeMirror官网地址为:https://codemirror.net/ CodeMirror作为一款代码编辑器,其应用场景主要是在线网站写代码.如现在的leetcode.洛谷.code-vs等 ...

  7. sed(seream editor)流编辑器

    sed:既然是流编辑器,自然只会是改变输入输出流的内容,对源文件并不进行丝毫修改,不信的话,你可以用cat sourcefille试试啊~ 另,如果你想将修改保存到源文件,可以用输入输出重定向啊~ s ...

  8. win下python脚本以unix风格换行保存将会报错为编码问题 SyntaxError: encoding problem:gbk

    utf-8与gbk编码都报错 从别人的github拉下来一个python脚本. 直接运行,python报错如下: File ".\drag_files_do_event.py", ...

  9. React Editor 应用编辑器(1) - 拖拽功能剖析

    这是可视化编辑器 Gaea-Editor 的第一篇连载分析文章,希望我能在有限的篇幅讲清楚制作这个网页编辑器的动机,以及可能带来的美好使用前景(画大饼).它会具有如下几个特征: 运行在网页 文档流布局 ...

  10. Editor markdown编辑器

    代码示例网址:http://pandao.github.io/editor.md/examples/index.html 引入文件 <link rel="stylesheet" ...

随机推荐

  1. 树莓派和esp8266在局域网下使用UDP通信,esp8266采集adc数据传递给树莓派,树莓派在web上显示结果

    树莓派和esp8266需要在同一局域网下 esp8266使用arduino开发: 接入一个电容土壤湿度传感器,采集湿度需要使用adc #include <ESP8266WiFi.h> #i ...

  2. flask通过线程池实现异步

    from flask import Flask from time import sleep from concurrent.futures import ThreadPoolExecutor # D ...

  3. 使用C# 创建、填写、删除PDF表单域

    通常情况下,PDF文件是不可编辑的,但PDF表单提供了一些可编辑区域,允许用户填写和提交信息.PDF表单通常用于收集信息.反馈或进行在线申请,是许多行业中数据收集和交换的重要工具. PDF表单可以包含 ...

  4. 力扣1076(MySQL)-员工项目Ⅱ(简单)

    题目: 编写一个SQL查询,报告所有雇员最多的项目. 查询结果格式如下所示:  解题思路: 方法一:将两个表联结,以project_id进行分组,统计员工数降序排序,然后筛选出第一条数据. 1 sel ...

  5. CF1481D AB Graph 题解

    CF1481D AB Graph 题解 [思路] 首先有几个显而易见的东西. 如果存在两个点,他们之间的两条边字母相同,那么一定有解(在两个点之间跳.) 否则,这张图的邻接矩阵一定长成这样: * a ...

  6. 为余势负天工背,云原生内存数据库Tair助力用户体验优化

    ​简介:作为双11大促承载流量洪峰的利器,Tair支撑了电商交易核心体验场景.不仅在数十亿QPS的峰值下保持着亚毫秒级别的顺滑延迟,同时在电商交易核心体验场景上也做出了技术创新. ​ 作者 | 漠冰 ...

  7. WPF 应用启动过程同时启动多个 UI 线程且访问 ContentPresenter 可能让多个 UI 线程互等

    在应用启动过程里,除了主 UI 线程之外,如果还多启动了新的 UI 线程,且此新的 UI 线程碰到 ContentPresenter 类型,那么将可能存在让新的 UI 线程和主 UI 线程互等.这是多 ...

  8. FileStream 的 FlushAsync 方法在 .NET Framework 与 .NET Core 行为的不同

    本文记录 FileStream 的 FlushAsync 方法在 .NET Framework 与 .NET Core 行为的不同 在使用 HID 设备进行 IO 通讯时,可以采用 FileStrea ...

  9. WPF 如何获取有哪些 VisualBrush 用了某个控件

    我写了一个特殊的控件,我期望了解到有哪些 VisualBrush 捕获了此控件,或者说有哪些 VisualBrush 用了此控件的界面 本文的方法需要用到反射,需要使用 WPF 框架里面没有公开的字段 ...

  10. Fiddler对安卓模拟器中的app抓包

    工具资源 Fiddler: https://www.telerik.com/download/fiddler Xposed Installer: https://repo.xposed.info/mo ...