editor.md化身代码编辑器
2021-06-30 本文已影响0人
深吸一口气
editor.md官方网站：https://pandao.github.io/editor.md
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./jquery.js"></script>
<script src="./editor.md/editormd.min.js"></script>
</head>
<body>
<label>语言:</label>
<select id="modes" onChange="getMode(this)">
<option value ="text/html">HTML</option>
<option value ="javascript">JavaScript</option>
<option value="php">PHP</option>
<option value="text/xml">XML</option>
<option value="text/json">JSON</option>
<option value="clike">Java\C\C++</option>
<option value="perl">perl</option>
<option value="go">go</option>
<option value="python">Python</option>
<option value="css">CSS</option>
<option value="ruby">Ruby</option>
</select>
<label>TabSize:</label>
<select id="tabSize" onChange="getTabSize(this)">
<option value ="2">2</option>
<option value ="4" selected>4</option>
</select>
<button id="getCodeBtn">Get code source</button>
<div id="editor" style="border: 1px solid #ddd;"></div>
<script>
// 初始化编辑器
let editor = editormd("editor", {
width : "90%",
height : 720,
watch : false,
toolbar : false,
codeFold : true,
searchReplace : true,
placeholder : "",
value : "",
tabSize : (localStorage.tabSize) ? localStorage.tabSize : 4,
theme : "default",
mode : (localStorage.mode) ? localStorage.mode : "text/html",
path : './editor.md/lib/'
});
// 从缓存获取当前编辑器设置的语言
if(localStorage.mode){
$("#modes").val(localStorage.mode);
}
// 从缓存获取当前编辑器设置的tabSize
if(localStorage.tabSize){
$("#tabSize").val(localStorage.tabSize);
}
// 当select切换时触发
function getMode(obj){
let index = obj.selectedIndex;
let option = obj.options[index];
let mode = option.value;
let modeName = option.text;
// 存入缓存
localStorage.setItem("modeName", modeName);
localStorage.setItem("mode", mode);
if(editor){
// 修改编辑器设置
editor.setCodeMirrorOption("mode", mode);
}
}
// 当select切换时触发
function getTabSize(obj){
let index = obj.selectedIndex;
let option = obj.options[index];
let size = option.value;
localStorage.setItem("tabSize", size);
if(editor){
editor.setCodeMirrorOption("tabSize", size);
}
}
// 获取编辑器内容
$("#getCodeBtn").bind("click", function() {
alert(editor.getValue());
});
</script>
</body>
</html>
