CodeMirror使用笔记

最新推荐文章于 2025-06-01 09:04:06 发布

__HelloWorld__

最新推荐文章于 2025-06-01 09:04:06 发布

阅读量1.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端中间件文章标签： CodeMirror 代码编辑器编辑器 JavaScript

本文链接：https://blog.csdn.net/kangkanglou/article/details/103453922

这篇博客记录了在项目中使用CodeMirror代码编辑器的步骤和注意事项，包括引入资源、创建编辑器、设置字体样式、实现内容选择拷贝复制、应用编辑器主题、显示行号和启用自动补全功能。提供了完整的代码示例，并引用了官方文档作为参考。

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

最近因工作需要，在项目中使用了CodeMirror代码编辑器，以下是使用笔记。

首先，看下最终的效果
在这里插入图片描述

引入基本的需要资源

<script
	src="<%=request.getContextPath()%>/resources/js/codemirror/codemirror.js"
	type="text/javascript"></script>
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/resources/css/codemirror/codemirror.css" />

创建编辑器

		var editor = CodeMirror.fromTextArea(document.getElementById('sql'), {
			mode : 'sql',
			indentWithTabs : true,
			lineNumbers : true,
			smartIndent : true,
			theme : 'dracula',
			matchBrackets : true,
			line : true,
			lineWiseCopyCut : true,
			readOnly : false,
			showCursorWhenSelecting : true,
			extraKeys : {
				"Alt" : "autocomplete"
			},
			styleSelectedText : true
		});

在我们的实际