使用codemirror打造你自己的前端在线编辑器

最新推荐文章于 2025-05-16 12:39:35 发布

昔别一展鲲鹏意

最新推荐文章于 2025-05-16 12:39:35 发布

阅读量2.9k

点赞数 5

分类专栏： javascript codemirrot 文章标签： javascript codemirror 在线代码编辑器在线查看代码运行结果前端

本文链接：https://blog.youkuaiyun.com/NoSuchObjectError/article/details/92772024

版权

使用codemirror打造在线编辑器

下载codemirror代码
在codemirror官网下载代码，代码目录结构如下
在demo目录下可以查看各种配置的例子
一个最简单的在线代码编辑器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>在线编辑器例子</title>
		<!-- code mirror的样式 -->
		<link rel="stylesheet" href="css/codemirror.css" />
		<!-- code mirror核心代码 -->
		<script src="js/codemirror.js"></script>
		<!-- 使用后html代码会有各种颜色提示 -->
		<script src="js/xml.js"></script>
		<!-- 主题样式 -->
		<link rel="stylesheet" href="theme/dracula.css">
	</head>
	<body>
		<textarea id="code-html"></textarea>
		<script type="text/javascript">
			CodeMirror.fromTextArea(document.getElementById('code-html'),{
				mode: 'text/html',	// 对何种类型的代码进行高亮提示
				theme: 'dracula',	// 设置一个主题，方便查看效果
			})
		</script>
	</body>
</html>

按照上述例子引入文件，就可以获得一个最简单的在线编辑器，输入html代码标签时会有对应的高亮颜色提示。要想使编辑器功能更强大就需要不断引入其他的配置。

3、配置所需要的功能
引入的配置文件有何种作用