注意:!!!!
codeMirror官网下的可能不能用,我就在这个地方栽了好几次才发现。下载
这里做的单页面的编辑器。
codemirror好处就是可以实时编辑,有用过highlight框架,但是一实时编辑,高亮效果就会失效,适合展示不适合编辑。
引用
引入codemirror·
<link rel="stylesheet" type="text/css"
href="./libs/CodeMirror-2.25/lib/codemirror.css" />
<script type="text/javascript"
src="./libs/CodeMirror-2.25/lib/codemirror.js"></script>
代码样式
<link rel="stylesheet" type="text/css"
href="./libs/CodeMirror-2.25/theme/night.css" />
需要代码高亮的语言
<script type="text/javascript"
src="./libs/CodeMirror-2.25/lib/codemirror.js"></script>
<script type="text/javascript" src="./libs/CodeMirror-2.25/mode/xml/xml.js"></script>
<script type="text/javascript"
src="./libs/CodeMirror-2.25/mode/htmlmixed/htmlmixed.js"></script>
<script type="text/javascript"
src="./libs/CodeMirror-2.25/mode/javascript/javascript.js"></script>
<script type="text/javascript" src="./libs/CodeMirror-2.25/mode/css/css.js"></script>
html中使用
<textarea autocomplete="off" cols="30" rows="4" id="cssCode" name="cssCode" style="min-height: 96px; height: 96px;"></textarea>
对应js
初始化
var editCss = CodeMirror.fromTextArea(document.getElementById("cssCode"), {
mode: "css",
selectionPointer: true,
lineNumbers: false,
matchBrackets: true,
indentUnit: 4,
indentWithTabs: true
});
var editHtml = CodeMirror.fromTextArea(document.getElementById("htmlCode"), {
mode: "htmlmixed",
selectionPointer: true,
lineNumbers: false,
matchBrackets: true,
indentUnit: 4,
indentWithTabs: true
});
var editJs = CodeMirror.fromTextArea(document.getElementById("jsCode"), {
mode: "javascript",
selectionPointer: true,
lineNumbers: false,
matchBrackets: true,
indentUnit: 4,
indentWithTabs: true
});
点击运行
var code = {
css: '',
html: '',
js: '',
};
function run() {
code = {
css: editCss.getValue(),
html: editHtml.getValue(),
js: editJs.getValue(),
};
// js
let script = document.getElementById('sss'); //新标签<script id="sss"></script>来存储
script.innerText = code.js;
//css
let style = document.getElementsByTagName('style');
style[0].appendChild(document.createTextNode(code.css));
//html
let hscript = document.getElementById('app'); //需要展示的位置,如此处app为效果中按钮所在盒子
hscript.innerHTML = code.html;
}