先看示例

找了篇博客写的贼详细 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. 力扣561(java&python)-数组拆分(简单)

    题目: 给定长度为 2n 的整数数组 nums ,你的任务是将这些数分成 n 对, 例如 (a1, b1), (a2, b2), ..., (an, bn) ,使得从 1 到 n 的 min(ai, ...

  2. 一个开发者自述:我是如何设计针对冷热读写场景的 RocketMQ 存储系统

    简介: 文章中的很多知识点,都是通过云原生编程挑战赛学到的,在一些问题在表述方式.甚至理解上都可能存在一些问题,甚至会有一些谬论:敢于尝试就会犯错,有犯错才会有成长,欢迎各位大佬不舍赐教,多多指正,让 ...

  3. 云原生DevOps的5步升级路径

    简介: 究竟什么是云原生DevOps呢?我们认为:云原生DevOps是充分利用云原生基础设施,基于微服务/无服务架构体系和开源标准,语言和框架无关,具备持续交付和智能自运维能力,从而做到比传统DevO ...

  4. 源码解读:KubeVela 是如何将 appfile 转换为 K8s 特定资源对象的

    简介: KubeVela 是一个简单易用又高度可扩展的云原生应用管理引擎,是基于 Kubernetes 及阿里云与微软云共同发布的云原生应用开发模型 OAM 构建.本文主要目的是探索 KubeVela ...

  5. [GPT] 使用 nodejs的 puppeteer 库使用完关闭后,linux上面有很多 chrome 进程

      在使用 Node.js 的 Puppeteer 库时,如果你在使用完后关闭了浏览器,但在 Linux 上仍然存在很多 Chrome 进程,可能是因为没有正确地关闭所有相关的进程. 可以尝试以下方法 ...

  6. [FAQ] 对于 Puppeteer 和 Chromium 在 Linux 上的安装,需要安装哪些依赖库

      比如 puppeteer/chrome/linux-114.0.5735.133/chrome-linux64/chrome 到底要装哪些依赖. 一般根据报错提示,安装缺少的即可,以下是一般需要的 ...

  7. 使用 WPF 做个 PowerPoint 系列 文本 BodyProperties 的 FontScale 与文本字号缩放

    本文来告诉大家,在 OpenXML 的 BodyProperties 的 NormalAutoFit 的 FontScale 属性缩放文本框的文本字号的方法 通过 ECMA 376 文档可以了解到 B ...

  8. 为何 WPF 对 vcruntime140 有引用

    通过阅读 WPF 官方开源仓库的代码和文档,可以了解到在进行独立发布的时候会在仓库里面带上 vcruntime140 的原因 在独立发布的时候,可以在仓库里面找到 vcruntime140.dll 这 ...

  9. nginx+uwsgi介绍

    一.nginx+uwsgi介绍 pip list # 查看安装过的模块 rpm -q nginx # 查看是否安装某款服务 pip install django == 1.11.11 # 安装djan ...

  10. 【深度学习】基础--NumPy

    因为深度学习会应用到我们大学时候学习的数学知识---线性代数.(矩阵当年想起来还是挺有意思的,有考研的经历都有感觉) 而在计算机里面如何展示矩阵的计算和应用,就需要运用到NumPy,是Python的一 ...