先看示例

找了篇博客写的贼详细 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. kolla-ansible部署OpenStack Train版技术方案

    简单架构示意 项目目标 1. 实现容器化部署docker+ Ansible+openstack-tarin 2. 使用keeplived监控nova服务实现在单台服务器宕机的情况下能迅速切断连接减轻平 ...

  2. 力扣1075(MySQL)-项目员工Ⅰ(简单)

    题目: 项目表 Project: 员工表 Employee: 请写一个 SQL 语句,查询每一个项目中员工的 平均 工作年限,精确到小数点后两位. 查询结果的格式如下:    解题思路: 建表语句: ...

  3. 怀里橘猫柴犬,掌上代码江湖——对话阿里云 MVP郭旭东

    简介: 跟郭旭东聊过之后,我对程序员的敬佩又多一分.这个92年的开发者,难能可贵地兼备朝气蓬勃的技术能量与长远深刻的行业洞见.独自承担DevOps平台从0到1的所有工作,我打趣说超级开发者不过如此,他 ...

  4. Elasticsearch生态&技术峰会 | 阿里云Elasticsearch云原生内核

    简介: 开源最大的特征就是开放性,云生态则让开源技术更具开放性与创造性,Elastic 与阿里云的合作正是开源与云生态共生共荣的典范.值此合作三周年之际,我们邀请业界资深人士相聚云端,共话云上Elas ...

  5. [Go] gorm 返回指定模型数据的处理方式

    重新 var 声明一个变量,类型为包含指定字段的结构体. 查询的时候,还是使用原始模型类型的变量. example: // For return data var retMember struct { ...

  6. CSS属性继承问题,那些会被继承,哪些不继承?

    总的来能被继承的就是三大类 一,字体有关的的,font-开头的 二,文本有关的,text- 开头的 三,visibility , cursor 其它的基本都是不能被继承 比如说这个,你以为它继承了ma ...

  7. MQTT GUI 客户端 可视化管理工具

    MQTT GUI 客户端 可视化管理工具 介绍 多标签页管理,同时打开多个连接 提供原生性能,并且比使用 Electron 等 Web 技术开发的同等应用程序消耗的资源少得多 支持 MQTT v5.0 ...

  8. visual studio 2008的试用版评估期已结束(附无法使用产品密钥)的解决方法

    visual studio 2008过了试用期后再次启动提示对话框:visual studio的试用版评估期已结束. 解决办法: 第一步,在"控制面板"中启动"添加删除程 ...

  9. localstory,sessionstory,vuex,cook

    函数式组件 1.特点 没有this(没有实例) 没有响应式数据 它只是一个接受一些 prop 的函数. render MVVM分为Model.View.ViewModel三者. Model:代表数据模 ...

  10. vue项目(cli-3)替换浏览器logo

    思路: 根html文件的 <link rel="icon" href="<%= BASE_URL %>favicon.ico">是引入i ...