You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
109 lines
3.9 KiB
109 lines
3.9 KiB
5 years ago
|
<!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>
|