网页codemirror代码编辑器

最新推荐文章于 2025-04-13 16:01:20 发布

pandaiback

最新推荐文章于 2025-04-13 16:01:20 发布

阅读量436

点赞数

分类专栏： java

本文链接：https://blog.youkuaiyun.com/baidu_36545586/article/details/90726560

版权

java 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了如何使用 CodeMirror 5.46.0 版本搭建一个功能完整的文本编辑器，包括语法高亮、自动补全、行号显示等特性。通过具体的 HTML 和 JavaScript 示例代码，展示了如何集成 Vue.js 和各种 CodeMirror 插件，实现一个支持 JavaScript 编程的编辑器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用的版本是codemirror-5.46.0,这里的codemirror.js使用的是lib下的,有说使用src下的codemirror.js,不过这个版本使用src下的有问题,还是使用lib下的,很简单的使用

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>codemirror文本编辑器</title>

<link href="D:/jar/codemirror-5.46.0/lib/codemirror.css" rel="stylesheet" type="text/css">
<link href="D:/jar/codemirror-5.46.0/addon/hint/show-hint.css" rel="stylesheet" type="text/css">
<link href="D:/jar/codemirror-5.46.0/theme/monokai.css" rel="stylesheet" type="text/css">
<link href="D:/jar/codemirror-5.46.0/theme/3024-day.css" rel="stylesheet" type="text/css">
<link href="D:/jar/codemirror-5.46.0/addon/display/fullscreen.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="D:/jar/codemirror-5.46.0/lib/codemirror.js"></script>
<script type="text/javascript" src="D:/jar/codemirror-5.46.0/addon/hint/show-hint.js"></script>
<script src="D:/jar/codemirror-5.46.0/mode/javascript/javascript.js"></script>
<script src="D:/jar/codemirror-5.46.0/addon/hint/javascript-hint.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>

<textarea id="code" name="code"></textarea>

<script>
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
		mode:"text/javascript",
        lineNumbers: true,     // 显示行数
        indentUnit: 4,         // 缩进单位为4
        styleActiveLine: true, // 当前行背景高亮
        matchBrackets: true,   // 括号匹配
        lineWrapping: true,    // 自动换行
        theme: 'monokai',      // 使用monokai模版
		extraKeys: {"Ctrl": "autocomplete"}//按ctrl键自动补齐代码
    });
	editor.setSize('800px', '800px');//设置代码框的大小
	
	editor.setValue("为codemirror赋值");
	
	//经过转义的数据
	editor.getValue();
</script>
</body>
</html>