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

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 有问题联系我,欢迎解答!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏深度学习之tensorflow实战篇

linux下基本操作记录mongodb

linux 下怎样寻找mongodb安装的位置 find / -name mongodb #通用方法,同时返回的比较多的信息,不管有没有权限的 locat...

3079
来自专栏魏艾斯博客www.vpsss.net

AppNode-Linux 服务器集群管理面板安装教程

3532
来自专栏北京马哥教育

搭建自己的git 代码服务器

搭建自己的git 代码服务器 git server 安装配置 1、切换到root用户 stevenrao@server:~$ su - root 2、创建g...

6255
来自专栏后端技术探索

避免rm -rf 引发惨案

在Linux中,rm是一个高效的工具,但是有时能带来灾难性的后果。敲一个rm -rf *就可能让今天的工作白做了,及时发现问题的话用debugfs也许能挽回损失...

1193
来自专栏java一日一条

理解Cookie和Session机制

会话(Session)跟踪是Web程序中常用的技术,用来跟踪用户的整个会话。常用的会话跟踪技术是Cookie与Session。Cookie通过在客户端记录信息确...

1921
来自专栏云计算与大数据

研发:Idea工具因为版本工具设置问题,导致全是红色

I have the current status of my files in the folders coloured red/brown. I tried...

1403
来自专栏铭毅天下

Elasticsearch集群管理之1——如何高效的添加、删除节点?

主节点的主要作用之一是确定将哪些分片分配给哪些节点,以及何时在节点之间移动分片以重新平衡集群。

7404
来自专栏PHP在线

PHP代码审计

1.概述 代码审核,是对应用程序源代码进行系统性检查的工作。它的目的是为了找到并且修复应用程序在开发阶段存在的一些漏洞或者程序逻辑错误,避免程序漏洞被非法利用给...

3915
来自专栏月牙寂

swarm源码分析(4)---Scheduler和Api

第一时间获取文章,可以关注本人公众号 月牙寂道长 yueyajidaozhang

3357
来自专栏Java编程技术

常用开源框架中设计模式使用分析-命令模式(Command Pattern)

命令模式是一种行为模式,通过把命令封装为一个对象,命令发送者把命令对象发出后,就不去管是谁来接受处理这个命令,命令接受者接受到命令对象后进行处理,也不用管命令是...

5871

扫码关注云+社区

领取腾讯云代金券