ueditor 编辑器增加css样式_在线代码编辑器CodeMirror简介

最新推荐文章于 2024-04-09 22:19:36 发布

易课说运营

最新推荐文章于 2024-04-09 22:19:36 发布

阅读量1.3k

点赞数

文章标签： ueditor 编辑器增加css样式

本文链接：https://blog.csdn.net/weixin_42299494/article/details/112288553

版权

本文介绍了如何使用CodeMirror插件在网页上创建一个功能丰富的代码编辑器，包括语法高亮、自动缩进、智能提示等。通过实例展示了设置行号、更改主题、绑定Vim、折叠代码、全屏模式、括号匹配和智能提示的实现方法。CodeMirror的灵活性使得这些配置可以在编辑器创建后动态调整。文章最后提到了CodeMirror的更多高级配置选项，鼓励读者深入学习。

摘要由CSDN通过智能技术生成

1.什么是Code Mirror

最近做一个项目需要在网页上实现一个代码编辑器，支持语法高亮、自动缩进、智能提示等功能。发现Code
Mirror刚好满足所有需求。Code Mirror是由js写的一款插件，其功能非常强大,用来实现网页端代码编辑器非常方便。如果想看效果图，可移步到这里----CodeOnline，这是我做的一个小项目，其中代码编辑器的就是用Code Mirror实现的。

2.使用Code Mirror

下面我将演示如何使用Code Mirror搭建一个简易的代码编辑器，并对其常用配置简要介绍。

首先要到CodeMirror官网下载此插件，然后在网页中引入即可。如下代码即实现了一个可以高亮显示Java代码的编辑器：

<!--
最简单的CodeMirror编辑器
-->

<!DOCTYPE
html>

<html>

<!--下面两个是使用Code Mirror必须引入的-->
<link rel="stylesheet" href="codemirror-5.12/lib/codemirror.css">
<script src="codemirror-5.12/lib/codemirror.js"></script>

<!--Java代码高亮必须引入-->
<script src="codemirror-5.12/clike.js"></script>

<head>
<title>CodeMirrorTest</title>
</head>
<body>
<textarea id="code"></textarea>
</body>
<script type="text/javascript">
//根据DOM元素的id构造出一个编辑器
    var editor=CodeMirror.fromTextArea(document.getElementById("code"),{
    
                mode:"text/x-java" //实现Java代码高亮
        });
</script>
</html>

如要显示行号，只需在构造editor时加上

lineNumbers:true

即

var editor=CodeMirror.fromTextArea(document.getElementById("code"),{
    
                mode:"text/x-java", //实现Java代码高亮
                lineNumbers:true
        });

当然，如此简单的编辑器还能不满足我们的需求，接下来我们要为这个编辑器加上如下功能：

更改主题
绑定Vim
折叠代码
全屏模式
括号匹配
智能提示

更改主题:

Code Mirror提供了很多种主题，在codemirror-5.12/theme/seti.css可以看到所有主题，我们准备使用seti这个主题，首先需将其引入：

<link rel="stylesheet" href="codemirror-5.12/theme/seti.css">

而后在构造editor时加入参数

theme:"seti"

完整代码如下：

<!DOCTYPE html>
<html>
<link rel="stylesheet" href="codemirror-5.12/lib/codemirror.css">
<script src="codemirror-5.12/lib/codemirror.js"></script>
<script src="codemirror-5.12/clike.js"></script>

&l