您的位置：首页 > 编程语言 > Java开发

codeMirror事件的简单应用

2016-12-20 10:47 1181 查看

今天需要对页面编写sql实现语法高亮，并且编辑完成之后需要调用一个方法对输入的sql数据进行处理，所以网上找了一些codeMirror的事件用法，下面是个简单的demo：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CodeMirror</title>
<link rel="stylesheet" href="css/docs.css">
<link rel="stylesheet" href="css/codemirror.css">
<script type="text/javascript" src="js/codemirror.js"></script>
<script type="text/javascript" src="js/sql.js"></script>
<link rel="stylesheet" href="css/show-hint.css">
<script type="text/javascript" src="js/show-hint.js"></script>
<script type="text/javascript" src="js/sql-hint.js"></script>

<style type="text/css">
body{
background: #EBEBEB;
}
textarea{
width: 1000px;
height: 800px;
}
#showContent{
width: 1000px;
height: 400px;
margin: 10px auto 0 auto;
color: #FFEE99;
background: #AAAAAA;
}
.btn{
width: 1000px;
height: 20px;
margin: 10px auto 0 auto;
text-align: center;
}
</style>
</head>
<body>
<textarea id="myCode"></textarea>
<div class="btn"><button onclick="getInputValue();">获取输入的值</button></div>
<pre id="showContent"></pre>

<script type="text/javascript">
var editor = CodeMirror.fromTextArea(document.getElementById("myCode"), {
mode: "text/x-mariadb"
});
editor.on("blur",function(){
alert(1);
});

function getInputValue(){
document.getElementById("showContent").innerText = editor.getValue();
}
</script>
</body>
</html>

下面是对各种事件的总结：
各种CodeMirror对象都会触发事件，客户端代码通过这些事件对各种情况作出反应。这些事件可以通过on和off来绑定和解除绑定处理函数。如果要触发自定义的事件，使用CodeMirror.signal(target,
name, args...)，其中，target是一个非DOM节点(non-DOM-node)对象。

1：change：每次编辑器内容更改时触发

2：changes：这个事件和change事件类似，只是这个事件会批处理每个操作

3：beforeChange：事件在更改生效前触发

4：cursorActivity：当光标或选中(内容)发生变化，或者编辑器的内容发生了更改的时候触发。

5：keyHandled：快捷键映射(key
map)中的快捷键被处理(handle)后触发

6：inputRead：当用户输入或粘贴时编辑器时触发

7：electrictInput：收到指定的electrict输入时触发，会影响行缩进。

8：beforeSelectionChange：此事件在选中内容变化前触发

9：viewportChange：编辑器的视口( view
port )改变（滚动，编辑或其它动作）时触发。

10：swapDoc：使用swapDoc替换编辑器内的文档时触发

11：gutterClick：编辑器的gutter(行号区域)点击时触发。

12：gutterContextMenu：编辑器的gutter(行号区域)收到上下文菜单事件时触发。

13：focus：编辑器收到焦点时触发

14：blur：编辑器失去焦点时触发。

15：scroll：编辑器滚动条滚动时触发

16：scrollCursorIntoView：编辑器滚动光标到视口内时触发

17：update：当CodeMirror更新其DOM显示时触发

18：renderLine：行渲染或重新渲染时触发。

更多事件的详细参数解释，请访问：在线代码编辑器
CODEMIRROR 事件说明

更多的codeMirror的配置说明，请访问：在线代码编辑器 CODEMIRROR 配置说明

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： codemirror js javascript

相关文章推荐

新的分享

章节导航