官网链接：https://codemirror.net/
<link href="/codemirror/lib/codemirror.css" rel="stylesheet" >
<script src="/codemirror/lib/codemirror.js"></script>
mode/theme用到哪个需要引入相关文件
mode下需要使用的脚本 例如：<script src="/codemirror/mode/javascript/javascript.js"></script>
theme下风格样式 例如：<link href="/codemirror/theme/3024-night.css" rel="stylesheet">
方法：
editor.setValue(text);
editor.getValue(text);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="/codemirror/lib/codemirror.css" rel="stylesheet" >
<link href="/codemirror/theme/monokai.css" rel="stylesheet">
<script src="/codemirror/lib/codemirror.js"></script>
<script src="/codemirror/mode/javascript/javascript.js"></script>
<title>Document</title>
</head>
<body>
<div class="code-editor">
<!--选择脚本风格代码-->
<div class="controls">
<span>主题：</span>
<select id='select'>
<option>default</option>
<option>3024-night</option>
<option>erlang-dark</option>
<option selected>monokai</option>
</select>
<button class="btn btn-primary" onclick="runCode()">运行</button>
</div>
<!--textarea-->
<textarea id="script_once_code"></textarea>
</div>
</body>
<script>
var editor = CodeMirror.fromTextArea($("#script_once_code")[0], { //script_once_code为你的textarea的ID号
// styleActiveLine: true, // 当前行背景高亮
// lineWrapping:true, //是否强制换行
theme: 'monokai', // 使用monokai模版
mode: 'javascript',
selectionPointer: true,
lineNumbers: false,
matchBrackets: true,
indentUnit: 4,
indentWithTabs: true
});
//选择界面风格JS
$('#select').change(function(){
var theme = $('#select').val();
editor.setOption("theme", theme); //editor.setOption()为codeMirror提供的设置风格的方法
});
</script>
</html>
网友评论