codemirror代码重复显示

Posted 2023-05-03

codemirror代码重复显示：
第一个问题

一个页面有多个tab页，而json显示不在第一个tab页中，那么跳转到页面再点击json所在tab页……
嗯……默认显示不出来……奇怪的事情是，当你点击一下，数据就出来了……

第二个问题

行数显示错位……当行数增加为10行时即变为正常……

分析

怀疑是由于当页面第一次渲染时，编辑器没有能正确的计算宽高等展示属性，当点击或者行数变化时触发了刷新所以显示变为正常。 参考技术A 因为react-codemirror2的CodeMirror标签在加载过程中会被重复加载两次，也就是在前端显示两个CodeMirror标签，所以我们这里不用react-codemirror2。

CodeMirror 多功能在线代码编辑器

CodeMirror 是一款允许在浏览器中使用的多功能文本编辑器，专用于编辑代码，并附带超过 100 种语言模式和各种插件，可实现高级的代码编辑功能，包括代码高亮显示、功能扩展以及多个主题样式

CodeMirror 是一款“Online Source Editor”，基于Javascript，短小精悍，实时在线代码高亮显示，他不是某个富文本编辑器的附属产品，他是许多大名鼎鼎的在线代码编辑器的基础库

 

CodeMirror的作者是一个十分向往自由的人。但他的CodeMirror绝对不简单，看看下面这份清单：

• Google Earth KML sampler

• Eloquent JavaScript's console

• The qooxdoo playground

• A cool tutorial about the element

• An online IDE for the Orc programming language

• Google's API playground

• Raphaël Live

• JS Bin

• The RokPad plugin for Joomla

• The scraperwiki editor

• jsLinb UI Builder

上述的这些在线代码编辑器都是基于CodeMirror的，是不是感到惊讶，里面有你熟悉的JS Library。

CodeMirror本身的定位也很明确，短小精悍，但代码质量很高，在Google Group的群里面，人们热烈的进行着用CodeMirror做各式各样改造的讨论，可见对他的欢迎。以下有各种不同语言的Demo演示：

• JavaScript

• XML/HTML

• CSS

• SPARQL

• HTML mixed-mode

• HTML+PHP mixed-mode (courtesy of Yahoo!)

• Python (by Timothy Farrell)

• Lua (by Franciszek Wawrzak)

• Ruby (by Michal Hantl, unfinished)

• SQL (by John Benediktsson)

• PLSQL (by Peter Raganitsch)

• diff (courtesy of Liran Nuna)

• Groovy (by eXo Platform)

• C# (by Boris Gaber and Christopher Buchino)

• OmetaJS (by Eric KEDJI)

• Scheme (by Danny Yoo)