Html中textarea高亮编辑显示代码插件

Posted 2023-02-24 danhuang

html中textarea高亮编辑显示代码插件

一、web代码编辑高亮插件

一般在textarea中我们希望使用高亮编辑代码，那么如何可以做到高亮显示？

很多editor web编辑器都有类似的功能，但需要我们手动去修改插件的代码，因此我觉得很不好使！而codemirror这个完全是javascript插件，可以帮助我们实现代码高亮显示，并且在编辑时就可以看到高亮效果。

二、如何使用

压缩包中有很多demo，你可以进入里面查看例子是如何使用的，下面我介绍一下我是如何使用的。

1、加载插件必要的一些javascript和css

<link rel="stylesheet" href="../CodeMirror/lib/codemirror.css">
<link rel="stylesheet" href="../CodeMirror/lib/util/simple-hint.css">
<script src="../CodeMirror/lib/codemirror.js"></script>
<script src="../CodeMirror/lib/util/simple-hint.js"></script>
<script src="../CodeMirror/lib/util/javascript-hint.js"></script>
<script src="../CodeMirror/mode/javascript/javascript.js"></script>

2、添加id和name到textarea属性中

 

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

3、接下来添加一段javascript代码

 var editor = CodeMirror.fromTextArea(document.getElementById("code"), 
        lineNumbers: true,
        extraKeys: "Ctrl-Space": function(cm) CodeMirror.simpleHint(cm, CodeMirror.javascriptHint);
    );
    $(".CodeMirror-scroll").hover(function()
        $(this).get(0).style.cursor = "text";
    );

4、这样就可以实现一个在线的代码编辑器，效果如下：

5、还有一个很重要的问题，那就是如何获取textarea的值

获取方法，根据第3个步骤创建的editor对象，我们来获取

editor.getValue()；只有简单这个方法就可以轻松获取。

这种方法得到的是经过转义的数据。

如何才能得到textarea的数据呢？如下方法：

editor.toTextArea();
editor.getTextArea().value

就可以获取未经过转义的字符

三、下载使用

如果你想尝试的话，去我资源库下载，也可以去官网附上两个下载链接

 官网下载地址：http://codemirror.net/ 

 我的资源库下载：http://download.csdn.net/detail/danhuang2012/4120390 

有问题联系我，欢迎解答！