动态添加的CodeMirror:更改语言模式
动态添加的CodeMirror是一种用于在网页中实现代码编辑器的开源工具。它具有动态添加语言模式的功能，可以根据用户需求实时切换代码编辑器的语言模式。
CodeMirror的主要特点包括：
- 支持多种编程语言：CodeMirror支持包括JavaScript、HTML、CSS、Python、Java等在内的多种编程语言的语法高亮显示和代码补全功能。
- 可扩展性：CodeMirror提供了丰富的API和插件系统，使开发者可以根据自己的需求进行扩展和定制。
- 交互性：CodeMirror支持实时编辑和代码折叠功能，可以提高开发效率和代码可读性。
- 跨平台兼容性：CodeMirror可以在主流的Web浏览器中运行，并且适配移动设备，提供了一致的编辑体验。
动态添加的CodeMirror可以应用于各种场景，例如：
- 在线代码编辑器：可以将动态添加的CodeMirror嵌入到网页中，实现在线编辑和运行代码的功能。
- 文章或博客编辑器：可以使用动态添加的CodeMirror来实现富文本编辑器，支持代码块的插入和编辑。
- 在线教育平台：可以利用动态添加的CodeMirror来实现编程学习平台，提供在线编程环境和代码批改功能。
腾讯云提供了云开发（Tencent Cloud Base）产品，其中包含了云函数（Cloud Function）和云数据库（Cloud Database）等服务，可以与动态添加的CodeMirror结合使用。云函数可以用于处理动态添加的CodeMirror中的代码逻辑，而云数据库可以用于存储和管理用户的代码数据。
更多关于腾讯云云开发产品的信息，请参考腾讯云官方文档：腾讯云云开发产品介绍
相关·内容
我在一个Extjs5应用程序中使用代码镜像，其主题是"abcdef“
然而，代码文本只是白色的，没有颜色。
默认情况下，如何激活CodeMirror中的代码颜色(突出显示)。
若要更好地上下文化，请参阅此
编辑
我的后区：
items:[{
xtype: 'textarea',
anchor:'100%',
// name: 'scripts',
itemId:'textareaItemId',
height:'100%',
autoScroll: true,
listeners: {
af
浏览 3提问于2015-09-07得票数 0
回答已采纳
我已经用ANLTR4开发了一个DSL，现在我正在用Angular和CodeMirror为这个DSL开发一个文本编辑器，我想添加语法突出显示。我的问题是如何在codemirror中为一种新语言添加语法突出显示。
浏览 18提问于2020-04-18得票数 1
是否可以包含多个自动完成提示源？我试过这个：
CodeMirror.commands.autocomplete = function(cm) {
CodeMirror.showHint(cm, CodeMirror.hint.xml);
CodeMirror.showHint(cm, CodeMirror.hint.html);
CodeMirror.showHint(cm, CodeMirror.hint.css);
CodeMirror.showHint(cm, CodeMirror.hint.javascript);
};
但是它似乎只包含了引用的最后一个
浏览 7提问于2013-10-22得票数 1
回答已采纳
我读过CodeMirror用户手册，但是我找不到如何为JAVA设置模式，你能帮我吗？
CodeMirror.fromTextArea(document.getElementById("code1"), {
lineNumbers: true,
mode: "text/x-csrc",
matchBrackets: true
});
浏览 11提问于2016-12-14得票数 3
回答已采纳
在显示codemirror文本区域的代码时，我得到了纯文本，我希望以代码突出显示的格式显示。请帮帮我。
我想打印在代码错误编辑器中突出显示的代码，我使用editor.getValue();从代码错误编辑器中获取该代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo_Format</title>
<link rel="stylesheet" href=
浏览 24提问于2017-02-23得票数 1
1回答
我在codemirror上构建我自己的语言，我有数组包含我的类名，我也有temp数组(当我键入类的名称时，我在temp数组中加载了这个类的字段)
例如，如果我有两个类：
第一类的名称是Data，它的字段是：
fname，lname，age
第二类名为info，其字段为：
mother，father
当我在codemirror 上键入时，当我在codemirror info上输入时，临时数组包含(fname，lname，data)，然后临时数组包含(mother，father)
我想要的
要将字段颜色设置为特定颜色，只有在类名之后(例如，当我在codemirror Data.fname上键入fn
浏览 6提问于2016-11-14得票数 2
我试图在我的项目中使用CodeMirror作为顶点和片段片段的clike模式，但出于某种原因，语法突出显示只适用于数字和字符串文本。javascript语法高亮器运行良好。
我加载所有相关文件：
<link rel="stylesheet" href="js/third-party/codemirror/lib/codemirror.css">
<script src='js/third-party/codemirror/lib/codemirror.js'></script>
<scri
浏览 0提问于2019-08-30得票数 2
回答已采纳
我正在尝试使用下面的方法动态更改codemirror模式，但不幸的是，它不起作用，欢迎您的帮助。
我有这样一个选择菜单：
<select name="idLanguage" id="select" onChange="selectMode()">
<option value="1">Python</option>
<option value="10">JavaScript</option>
<option value="33">
浏览 6提问于2013-11-09得票数 5
回答已采纳
我正在使用CodeMirror编辑器。它有一个允许改变模式(语言)的选项。我创建了一段代码来加载与该语言对应的.js文件。请参阅下面的代码。一切都很好。带有src属性的script元素被添加到head，但是codemirror编辑器不加载语言，因为script元素是用head编写的，但它可能没有加载。 正确加载在html文件中编写的python突出显示js脚本。只有动态加载的js文件不能处理codemirror。 请帮帮我，我修不好。 languageselect.addEventListener("change",function(){
language
浏览 42提问于2019-01-26得票数 1
我正在尝试对我的网站使用，这是一个用JavaScript实现的用于浏览器的通用文本编辑器。但是语法高亮显示不起作用。codeMirror文档对我帮助不大。这是我的代码。
<html>
<head>
<meta charset="utf-8">
<title>Code Mirror</title>
<link rel="stylesheet" type="text/css" href="codemirror.css">
<script type="
浏览 0提问于2015-11-03得票数 11
回答已采纳
我需要：
动态创建codemirror编辑器的单个实例
有时更改它的当前值(通过再次销毁它的ant初始化？)
更改编辑器类型--有时我需要编辑器本身，有时我需要
这种情况发生在SinglePageApplication。
我该怎么处理呢？我是否应该创建textarea，然后像描述的 (方法cm.toTextArea())那样，每次都将它转换成codemirror。还是还有更清楚的方法？
浏览 0提问于2016-06-09得票数 3
我想将本地文件作为代码片段嵌入到我正在制作的静态网站中，这个网站上有标记和codemirror，用于语法高亮化。我会写一个玉过滤器来做这件事。
归根结底，我需要从文件扩展名中找到codemirror模式和github风格的标记语言(您在执行`语言时所写的内容)。
至少一些codemirror模式对应于gfm语言。它们是一致的吗？在某个地方是否有一个列表，或者名字有什么理由？
谢谢
浏览 3提问于2014-11-21得票数 2
回答已采纳
我正在尝试用CodeMirror设置代码示例的样式，但它部分起作用了-它将选定的主题应用到textarea，但语法没有突出显示。
这是我的页面：
<textarea id="template-html" name="code" class="CodeMirror">
<!DOCTYPE html>
<foobar>
<blah>Enter your xml here and press the button below to display it as highlig
浏览 8提问于2013-07-13得票数 32
回答已采纳
如何使用codemirror语法突出显示特定语言的代码。
我的html如下所示：
<head>
<link rel="stylesheet" type="text/css" href="codemirror/lib/codemirror.css">
</head>
<body>
<textarea class="codetextarea"></textarea>
<!-- javascript files-->
浏览 0提问于2018-04-30得票数 2
回答已采纳
我需要使用我编写的自定义模式动态地更改令牌的值。
是否可以通过传递模式的委托函数来更改模式，或者有更好的方法。
我正在使用角2实现codemirror。
谢谢。
浏览 2提问于2017-10-09得票数 0
回答已采纳
2回答
我的CSS代码导致Codemirror显示不正确。见下文：
如何防止样式影响Codemirror创建的元素，从而使Codemirror能够正确显示？
即使我设法调整我的CSS代码，使我的页面和Codemirror都能正确显示，这也将是未来的噩梦，因为未来的任何样式都可能影响Codemirror。另外，我的CSS文件是根据客户端提供的值动态生成的，这进一步使事情复杂化。
一个可能的解决方案是创建一个名为class的not-codemirror，并将其应用到我站点上的每个元素，而不是Codemirror的元素。对我来说，这似乎有些过分，尤其是考虑到大多数页面都不会使用Codemirror
浏览 2提问于2016-05-29得票数 0
回答已采纳
2回答
实际上，在我的项目中，我需要用代码镜像显示高亮显示版本中的代码片段。但我正面临一些问题。请查看以下信息。
技术背景:打字稿，网页包。
Json包：
"devDependencies": {
"css-loader": "^0.28.11",
"style-loader": "^0.21.0"
}
Web配置文件
module: {
rules: [
{
test: /\.css$/,
use: [
require.resolve(
浏览 0提问于2018-05-06得票数 1
回答已采纳
使用codemirror和标记模式，我如何能够有单独的类为所有的标题级别。
例如：
# headline <- class cm-header and cm-header-1
## headline level 2 <- class cm-header and cm-header-2
谢谢。
浏览 6提问于2013-11-01得票数 0
回答已采纳
在我当前的项目中，我需要在web浏览器中编辑apache和squid配置文件。在用谷歌搜索了一下之后，我决定使用CodeMirror。但是CodeMirror不支持apache和squid配置文件语法。虽然CodeMirror可以扩展以支持其他格式，但我是CodeMirror新手，我认为可能需要很多时间来编写一个产品级模式的plugin.Is，有没有第三方模式的阿帕奇和squid可以与CodeMirror？
那么Ace呢，如果Ace可以支持apache和squid，我可以切换到它。
谢谢你们！
浏览 0提问于2013-10-08得票数 0
由于某种原因，它不显示要突出显示的文本或任何东西，不确定为什么。
链接：
<link rel=stylesheet href="http://codemirror.net/mode/php/../../doc/docs.css">
<link rel="stylesheet" href="http://codemirror.net/mode/php/../../lib/codemirror.css">
<script src="http://codemirror.net/mode/php/../../lib/
浏览 0提问于2013-11-07得票数 2
完全被https://github.com/scniro/react-codemirror2 -codemirror2中的这个例子搞糊涂了，它同时使用了import和require语法；参见requiring codemirror resources小节中的codemirror2
import CodeMirror from 'react-codemirror2';
require('codemirror/mode/xml/xml');
require('codemirror/mode/javascript/javascript');
我知道
浏览 52提问于2020-09-19得票数 0
在使用react CodeMirror 2时，如何使用自定义的CodeMirror模式？导入后，CodeMirror.defineSimpleMode和CodeMirror.defineMode都没有定义，如下所示：
import {UnControlled as CodeMirror} from "react-codemirror2";
import 'codemirror/lib/codemirror.css';
上下文:在我的react项目中，我想使用CodeMirror并定义我自己的输入语言，它与某些正则表达式相匹配，然后突出显示用户已经正确地输入了它们
浏览 9提问于2020-07-31得票数 1
回答已采纳
我正在尝试包含CodeMirror插件，但在未捕获ReferenceError: CodeMirror未定义的情况下收到此错误
我的HTML代码在这里
有人能帮上忙吗？
提前谢谢..
浏览 0提问于2012-09-06得票数 6
回答已采纳
在Codemirror中，cm.getTokenAt(pos)在当前光标位置返回一个令牌。象征性究竟是什么意思？
就像。当您在"System.out.println“行中查找令牌时，它会返回令牌println，而当您在"System.out.”中搜索令牌时，它会返回“。
另外，标记语言是否依赖于不同的语言，并得到了不同的结果？
浏览 4提问于2014-06-04得票数 2
回答已采纳
我在我的网站上设置codmirror.js有问题。
我试着用正常的方式建立图书馆：
<script src="lib/codemirror.js"></script>
<link rel="stylesheet" href="../lib/codemirror.css">
<script src="mode/javascript/javascript.js"></script>
但是，我在控制台中得到了以下错误：
Error: Mismatched anonymous d
浏览 1提问于2014-09-09得票数 2
回答已采纳
1回答
我设法使ng2-codemirror编辑器在我的Range2应用程序中完美地工作，但是有一个小细节困扰着我--我无法更改它的mode，因为它需要导入我无法完成的.js文件。我需要从path node_modules\codemirror\mode\clike\clike.js导入node_modules\codemirror\mode\clike\clike.js，但是我似乎不知道怎么做。我试图在index.html中导入它
<script src="node_modules/codemirror/mode/clike/clike.js"></script&g
浏览 0提问于2016-10-04得票数 4
回答已采纳
我正在为几种语言(Groovy、Python、Beanshell、XSLT)使用一个通用的Codemirror编辑器。根据下拉列表中选择的语言，我为编辑器设置了相应的模式。
如何将自动缩进应用于上述语言？
浏览 0提问于2013-04-12得票数 4
我遇到了codemirror 问题。当我在codemirror中输入<script>时，额外的script被附加到>上。例如，我一键入>就编写了<script，它就变成了<scriptscript>。有没有人也遇到过这个问题？
浏览 3提问于2011-02-16得票数 2
回答已采纳
1回答
我想使用CodeMirror突出显示文本区域中的xml代码，但由于某种原因，它失败了。理由是什么呢？
<script src="${pageContext.request.contextPath}/resources/lib/codemirror.js"></script>
<script src="${pageContext.request.contextPath}/resources/mode/xml/xml.js"></script>
<link rel="stylesheet"
浏览 1提问于2014-10-31得票数 0
1回答
我在同一页上有多个codemirror，我想获得所选cpdemirror的值，我该怎么做呢？
我已经创建了一个函数来从不同的文本区域生成codemirror。下面是我正在使用的代码。
我正在尝试制作像一样的编辑器
function CMeditor(id, mode){
var editor = CodeMirror.fromTextArea(document.getElementById(id), {
theme: "monokai",
mode: mode,
lineNumbers: true,
lineWrapping: true,
浏览 4提问于2019-05-26得票数 0
在我的React应用程序中，我使用的是'Editor.jsx组件(它只是代码镜像的包装器，以防我需要在实际的CodeMirror视图周围提供细节)。
将附加文件中呈现的组件添加到其中的高度为100%，其他类似于CodeMirror的组件也使用该高度。
然而，CodeMirror组件只显示了15行(我必须滚动到下面的行)。
代码非常类似于来自github的示例。height属性在getInitialState()中也没有任何效果(包含的内容也一样)。
import React from 'react';
var CodeMirror = require('reac
浏览 6提问于2016-08-09得票数 1
回答已采纳
试图让CodeMirror衬里在我的角质2应用程序中工作。CodeMirror编辑器运行良好(行号、语法高亮显示、主题等)但出于某种原因，我无法开始工作。请注意，我使用的是CodeMirror mode: 'application/json'，这就是为什么它需要一个javascript。
以下是我所拥有的：
app.component.html
<codemirror class="action-type-details-code-mirror" [(ngModel)]="code" [config]="config" na
浏览 5提问于2017-06-27得票数 1
回答已采纳
我使用django所见即所得来创建CKEditor模板。因此，我以的身份使用CKEditor的codemirror插件。通过遵循安装说明，以下选项可用于参考的配置
config.codemirror = {
// Set this to the theme you wish to use (codemirror themes)
theme: 'default',
[.......................]
// Define the language specific mode 'htmlmixed' for htm
浏览 4提问于2019-02-05得票数 0
我在一个普通的HTML/PHP项目中使用codemirror，我想写一些php代码。但是当我想像这样打开php标签时
<?php
它在"<“符号后停止，不让我输入更多的字符。我需要重新加载网站，以便让它再次工作。我的代码相当简单。
<html>
<head>
<script src="util/codemirror-5.38.0/lib/codemirror.js"></script>
<link rel="stylesheet" href="
浏览 3提问于2018-06-02得票数 2
根据的医生
ui-codemirror指令很好地处理了ng-模型。
将监视ng模型来设置CodeMirror文档值(通过setValue)。
ui-codemirror指令存储并期望模型值是一个标准的javascript字符串。
但是，下面的代码()在控制台中返回一个错误Error: uiCodemirror3 can only be applied to a textarea element。
<html ng-app="flapperNews">
<head>
<link rel="stylesheet" href=
浏览 4提问于2017-02-15得票数 0
回答已采纳
1回答
在我的下一个js项目中导入JS文件时，我得到了以下错误。
错误： ReferenceError:导航器未定义
下面是我用来插入文件的组件。我需要它来使Codemirror正确地呈现python，但是只有当我移除mode/python/python.js导入时，组件才能工作。
import Link from "next/link";
import { UnControlled as CodeMirror } from "react-codemirror2";
// import "../node_modules/codemirror/mode/pytho
浏览 0提问于2019-06-09得票数 1
1回答
我试图在我的web应用程序中使用CodeMirror模式，但是它不会突出显示模式"htmlmixed“的单词。我不明白到底出了什么问题。每个文件的路径都是正确的，因为我没有收到任何404错误。以下是我所做的：
<!DOCTYPE html>
<head>
<script src="/node_modules/codemirror/lib/codemirror.js"></script>
<link rel="stylesheet" href="/path-
浏览 0提问于2018-11-23得票数 1
回答已采纳
我在我的wordpress站点中使用codeMirror来突出语法C类代码。我按照建议添加了所有代码js和css文件：
/code-mirror/plugin/codemirror/lib/codemirror.css
/code-mirror/plugin/codemirror/lib/codemirror.js
/code-mirror/plugin/codemirror/theme/eclipse.css
/code-mirror/plugin/codemirror/addon/edit/matchbrackets.js
/code-mirror/js/c-like.js
这里，c- f
浏览 1提问于2018-11-25得票数 1
回答已采纳
我试图按照设置一个基本的codemirror合并视图
我有如下所示的html和脚本
<link href="{% static 'home/scripts/codemirror/codemirror.css' %}" rel="stylesheet">
<link href="{% static 'home/scripts/codemirror/addons/dialog.css' %}" rel="stylesheet">
<div class="col-lg
浏览 0提问于2018-05-21得票数 3
回答已采纳
我使用的是CodeMirror 5.1。显示了C#语法突出显示，但显然解决了过时的CodeMirror版本。
问题：如何使用CodeMirror实现真正的C#突出显示(我不是指"clike“解析器)？
请注意，这不是一个重复的问题。解决方案是"clike"，这不是我想要的。
浏览 0提问于2015-04-15得票数 2
回答已采纳
我有一个运行在Web Worker中的(typescript)编译器，我需要它来解析脚本中的文字值。我一直使用CodeMirror.runMode来解决这个问题，它工作得很好，但是在Web Worker中加载CodeMirror会产生错误。
Uncaught ReferenceError: document is not defined
如何在Web Worker中加载CodeMirror来解析代码？
浏览 32提问于2020-02-26得票数 1
我有一个代码镜像版本: 5.65.3和Blazor。当我在编辑器中有很长的行时，水平滚动不起作用，而是使用页面的滚动，它破坏了整个页面。
如下所示：
我不认为我在Codemirror中改变了任何CSS。
下面是一些相关的CSS行：
.CodeMirror {
/* Set height, width, borders, and global font properties here */
font-family: monospace;
height: 750px;
color: black;
direction: ltr;
}
.CodeMirror-s
浏览 12提问于2022-06-27得票数 0
import React, { Component } from "react";
import { render } from "react-dom";
import CodeMirror from "react-codemirror";
import "./style.css";
import "codemirror/lib/codemirror.css";
class App extends Component {
constructor() {
super();
this.state
浏览 19提问于2020-11-16得票数 0
我正在制作一个在线的python编辑器。我使用Skulpt来运行用户输入到文本区域的代码。这是我的代码：
HTML:
<script src="skulpt.min.js" type="text/javascript"></script>
<script src="skulpt-stdlib.js" type="text/javascript"></script>
<textarea id="textbox" cols="50" rows=&
浏览 7提问于2016-08-18得票数 0
回答已采纳
2回答
代码镜像覆盖应用
、、
我可以在模式定义之外应用代码镜像覆盖吗？下面的代码可以工作，但似乎是多余的和缓慢的。我正在为页面上的每个编辑器/查看器定义一个模式，该模式对许多人来说可能是零。如何进行优化？
理想情况下，我想定义一次模式，然后根据需要应用覆盖。
如果可以的话，我一直找不到答案。我想要定义一个模式(它突出显示一个搜索术语)，然后我想将该模式应用于页面上的许多编辑器/查看器。每个编辑器/查看器都有不同的语言，并设置在DOM元素(例如<pre class="sourcecode" language="javascript">code</pr>)上。
我认为解决
浏览 0提问于2014-02-21得票数 2
回答已采纳
4回答
可以在多个文本区域上使用吗？我使用了很多动态生成的文本区域。
<script type="text/javascript">
var editor = CodeMirror.fromTextArea('code', {
height: "dynamic",
parserfile: "parsecss.js",
stylesheet: "codemirror/css/csscolors.css",
path: "codemirror/js/"
});
</script>
我更
浏览 3提问于2010-12-19得票数 17
回答已采纳
我已经将的语法解析器部分转换为javascript (类型记录)，并且它已经工作了，现在我想找到一个基于javascript的代码编辑器，它可以与Roslyn /解析器集成，用于突出显示。
到目前为止，我已经找到了两个编辑：
使用，看起来它只支持带有正则表达式规则的突出显示。
使用codemirror(_)，它确实支持如果您的lexer可以被处理为带有状态的sream，但我不知道文本codemirror的哪些部分将触发lexer作为用户输入(罗斯林解析器已经具有检测更改的机制，因此我想重用它)
(两个ace编辑器，代码镜像支持标记文本，但我不确定它是否有利于性能，因为您可能需要清除标记，然后再
浏览 0提问于2015-04-03得票数 0
回答已采纳
我正在尝试为处理PowerShell的括号编写一个插件/扩展。在研究之后，我发现CodeMirror也没有PowerShell模式，所以我需要自己创建它。我正在经历一段可怕的时光，因为网上几乎没有我想要做的事情的详细资源。
这是我的main.js文件：
define(function (require, exports, module){
"use strict";
//Load Modules
var LanguageManager = brackets.getModule("language/Languag
浏览 2提问于2014-06-26得票数 5
回答已采纳
我希望模式want混合在codemirror中。我开始在codemirror中搜索，但找不到它。我包括以下内容：
<script src="cm/lib/codemirror.js"></script>
<link rel="stylesheet" href="cm/lib/codemirror.css">
<script src="cm/mode/htmlmixed/htmlmixed.js"></script>
这是我的密码：
MCM = CodeMirror(JY.
浏览 0提问于2015-08-11得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
