WEB技术之前端技术

在线代码编辑器CodeMirror简介-前端技术

PHPer 2018-01-22 128次浏览 0条评论 0 0 0
网上看到的不错的文章,这里拿来方便自己查1.什么是Code Mirror最近做一个项目需要在网页上实现一个代码编辑器,支持语法高亮、自动缩进、智能提示等功能。发现Code...

网上看到的不错的文章,这里拿来方便自己查


1.什么是Code Mirror

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

2.使用Code Mirror

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

首先要到Code Mirror官网下载此插件,然后在网页中引入即可。如下代码即实现了一个可以高亮显示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
        });

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

登录 | 立即注册

更新于:2020-03-27 01:07:07
    您需要登录后才可以评论。 登录 | 立即注册
    相关内容

    富文本编辑器

    个人比较喜欢的是 Redactor,还有Simditor、wangEditor和 bootstrap-wysiwyg,这些富文本的UI都很好看,特别是Redactor和Simditor,不过Simditor扩展并不丰富。...

    富文本编辑器Redactor在Yii2中的应用

    WEB技术

    什么是WEB技术?下面会分前端技术和后端技术分别探讨。20180203未完待续。

    WEB技术之前端技术

    WEB技术之后端技术

    WEB应用转手机APP,手机APP制作平台推荐

    WEB应用与手机APP

    Android相关

    2017 年 Web 开发工程师技术发展路线图

    互联网相关

    互联网相关内容

    2008年通过互联网领袖扑克牌看中国互联网形势

    互联网相关

    你记录一些互联网相关的问题 20200323

    在太保工作中遇到的互联网以及内网问题记录

    外网访问m6理赔系统时,在影像上传时提示,IE已经对页面进行了修改,以帮助阻止跨站脚本。影像上传的SunApp已经安装,IE的安全设置也设了,还是不行,梁老师说关掉...

    IE如何取消阻止跨站脚本

    电销三期打印要安装PageOn的问题

    一些公司网址浏览器兼容性问题

    网址打开页面显示不全,增值税管理系统页面显示不全

    ​UCStar 聊天记录存在哪里

    内网用UcStar聊天记录文件存放路径

    公司内网浏览器设置问题

    各种应用安装包括驱动程序都要内网的管理员账号才能安装

    推荐内容

    MySQL数据库设计总结

    规则1:一般情况可以选择MyISAM存储引擎,如果需要事务支持必须使用InnoDB存储引擎。注意:MyISAM存储引擎 B-tree索引有一个很大的限制:参与一个索引的所有字...

    什么是B-Tree

    二叉查找树、平衡二叉树、红黑树、B-/B+树性能对比

    使用Yii2遇到的问题整理

    Yii的东西很多,学习和使用的时候遇到了各种各样的问题,这里记录整理下,方便大家分享。composer安装kartik-v/yii2-mpdf时报错,这里记录下 Yii2用compos...

    Yii2用composer更新时遇到的错误

    Yii2 用composer update 时提示'git' 不是内部或外部命令,也不是可运行的程序或批处理文件

    Yii2​用composer安装kartik-v/yii2-mpdf时报错,成功解决后,再让其支持中文。

    使用Yii2的setFlash和bootstrap.min.js遇到的问题,bootstrap.min.js的bug?

    Yii2的action不支持大小写吗?其实是支持的

    composer install 使用tips-网上找的composer install的使用技巧方法

    关于编程时遇到意想不到的错误如何解决

    比如当你写的一个php脚本执行出现问题,如果你的脚本里自己带了对错误的处理,可能会显示那里出错了。或者你用的框架,框架里有debug模式,会报错。

    使用Laravel 5.4问题总结

    这里写下laravel5.4的总结,用laravel也有段时间了,优点就不用多说了,好上手,较易学较易用,blade模板是非常的好用,等等。laravel的缺点有几个,灵活性一般,框架稍...

    使用Laravel 5.4问题总结 Lost connection to MySQL server at 'reading initial communication ...

    Laravel 5.4各种错误提示总结

    localStorage介绍和使用

    一、什么是localStorage、sessionStorage在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(co...

    localStorage的使用

    localStorage其他注意事项