<!DOCTYPE html>
<html lang="zh">
<head>
<title>CodeMirror searchbox Test</title>
<meta charset="UTF-8">
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" href="../examples/css/style.css" />
</head>
<body>
<div id="layout">
<textarea id="test" style="display:none;">###Hello world!</textarea>
</div>
<script src="../examples/js/jquery.min.js"></script>
<link rel="stylesheet" href="../lib/codemirror/codemirror.min.css" />
<script src="../lib/codemirror/codemirror.min.js"></script>
<script src="../lib/codemirror/modes.min.js"></script>
<script src="../lib/codemirror/addons.min.js"></script>
<script src="js/searchbox.js"></script>
<style>
html, body, #layout, .CodeMirror {
width: 100%;
height: 100%;
overflow: hidden;
font-family: Consolas;
font-size: 13px;
}
.ace_search {
font-family:"微软雅黑",Arial;
padding-bottom: 4px;
}
.ace_replacebtn, .ace_button {
padding: 0 5px;
font-size: 12px;
}
.ace_button {
border-radius: 3px;
padding: 2px 5px;
margin-left: 3px;
}
.ace_button.checked {
border-color: #ccc;
background-color: #fafafa;
}
.ace_search {
display: inline-block;
max-width: 320px;
}
.ace_search_form, .ace_replace_form {
display: inline-block;
float: none;
}
.ace_search_options {
display: block;
}
</style>
<script type="text/javascript">
$(function() {
var enableSearchbox = true;
var codeMirrorConfig = {
mode: "gfm",
theme: "default",
tabSize: 4,
dragDrop: false,
autofocus: true,
indentUnit : 4,
searchbox: enableSearchbox, // IE9+
lineNumbers: true,
lineWrapping: true,
matchBrackets: true,
indentWithTabs: true,
styleActiveLine: true,
styleSelectedText: true,
autoCloseBrackets: true,
showTrailingSpace: true,
highlightSelectionMatches: {
showToken: /\w/
}
};
$.get("../examples/test.md", function(md){
$("#test").html(md);
var codeMirrorEditor = CodeMirror.fromTextArea($("#test")[0], codeMirrorConfig);
var codeMirror = $(".CodeMirror");
$(window).keydown(function() {
if (!enableSearchbox) return false;
$(".ace_replacebtn").eq(0).html("替换");
$(".ace_replacebtn").eq(1).html("全部替换");
$(".ace_searchbtn").eq(2).remove();//.html("全部").css({width: "36px", padding :"0 4px"});
$(".ace_button").eq(0).html("正则搜索");
$(".ace_button").eq(1).html("区分大小写");
$(".ace_button").eq(2).html("全词搜索");
});
});
});
</script>
</body>
</html>