|-转 在线代码编辑器CodeMirror简介-前端技术
网上看到的不错的文章,这里拿来方便自己查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都很好看,特别是Red...
富文本编辑器Redactor在Yii2中的应用
WEB技术
什么是WEB技术?下面会分前端技术和后端技术分别探讨。20180203未完待续。
WEB技术之前端技术
WEB技术之后端技术
WEB应用转手机APP,手机APP制作平台推荐
WEB应用与手机APP
Android相关
2017 年 Web 开发工程师技术发展路线图
互联网相关
你记录一些互联网相关的问题 20200323
在太保工作中遇到的互联网以及内网问题记录
外网访问m6理赔系统时,在影像上传时提示,IE已经对页面进行了修改,以帮助阻止跨站脚本。影像上传...
IE如何取消阻止跨站脚本
电销三期打印要安装PageOn的问题
一些公司网址浏览器兼容性问题
网址打开页面显示不全,增值税管理系统页面显示不全
UCStar 聊天记录存在哪里
内网用UcStar聊天记录文件存放路径
公司内网浏览器设置问题
各种应用安装包括驱动程序都要内网的管理员账号才能安...
绿联USB声卡虚拟7.1驱动-绿联官网地址
推荐内容
怎样使用V2Ray代理和SSTap玩如魔兽世界/绝地求生/LOL台...
在网上找的ss+SSTap的方式都不能通过SSTap的链接测试。最后找到了v2ray+SSTap的方式。
注意事项,首先单独有v2ray看能不能正常上网。另外加速时要v2ray和SST...
使用V2Ray的mKCP协议加速游戏
当前脚本已发布新版本,地址:
https://github.com/kuoruan/shell-scripts/raw/master/kcptun/kcptun.sh
旧仓库已废...
v2rayN已停止工作
要安装.NET Framework 4.6 或者更高版本
超省心游戏加速:Wireguard+udp加速(CentOS版)--(
Wireguard+udpspeeder+udp2raw游戏加速方案
---------------------------------------错误报告及解决-----------...
wireguard+udpspeeder+udp2raw多用户配置
Wireguard+udpspeeder+udp2raw游戏加速方案改进版-实测有效
Wireguard+udpspeeder+udp2raw游戏加速方案改进版-实测有效
关于客户端电脑的虚拟网卡配置IP和DNS自动获取