anyushi-layuiFormDesigner
/
code-prev.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>代码预览</title>
		<link rel=stylesheet href="assets/libs/codemirror-5.56.0/doc/docs.css">
		<link rel="stylesheet" href="assets/libs/codemirror-5.56.0/lib/codemirror.css">
		<link rel="stylesheet" href="assets/libs/codemirror-5.56.0/addon/hint/show-hint.css">
		<script src="assets/libs/codemirror-5.56.0/lib/codemirror.js"></script>
		<script src="assets/libs/codemirror-5.56.0/addon/hint/show-hint.js"></script>
		<script src="assets/libs/codemirror-5.56.0/addon/hint/xml-hint.js"></script>
		<script src="assets/libs/codemirror-5.56.0/addon/hint/html-hint.js"></script>
		<script src="assets/libs/codemirror-5.56.0/mode/xml/xml.js"></script>
		<script src="assets/libs/codemirror-5.56.0/mode/javascript/javascript.js"></script>
		<script src="assets/libs/codemirror-5.56.0/mode/css/css.js"></script>
		<script src="assets/libs/codemirror-5.56.0/mode/htmlmixed/htmlmixed.js"></script>
		<script src="assets/libs/formatting.js"></script>
		<style>
			.CodeMirror,.cm-s-lesser-dark.CodeMirror {
				height:100%
			}
		</style>
	</head>
	<body>
		<textarea id="code" name="code"></textarea>
		<script type="text/javascript" language="javascript">
			var code = "";
			//根据DOM元素的id构造出一个编辑器
			var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
				mode: "text/html",
				lineNumbers: true,
				styleActiveLine: true,
				tabSize: 4,
				indentUnit: 4,
				lineWrapping: true, //代码折叠
				fullScreen: false, //全屏模式
				matchBrackets: true, //括号匹配
				smartIndent: true, //智能缩进
				lineWrapping: true,
				gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
				readOnly: true, //只读
			});

			function getSelectedRange() {
				return {
					from: editor.getCursor(true),
					to: editor.getCursor(false)
				};
			}

			function autoFormatSelection() {
				var range = getSelectedRange();
				editor.autoFormatRange(range.from, range.to);
			}

			function setCode(code) {
				editor.setValue(code);
				CodeMirror.commands["selectAll"](editor);
				autoFormatSelection();
				CodeMirror.commands["goDocStart"](editor);
			}
		</script>
	</body>
</html>