viplt-facepl
/
facepl.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
	<HEAD>
		<TITLE>Facepl开发</TITLE>
		<META NAME="Author" CONTENT="lt">
		<script src="./res/js/jquery-3.6.0.min.js"></script>
		<script src="./res/js/main.js"></script>
		<script src="./res/plugs/layui/layui.js"></script>
		<link rel="stylesheet" href="./res/plugs/layui/css/layui.css">

		<!--引入codemirror-->
		<link rel="stylesheet" href="./res/plugs/codemirror/lib/codemirror.css">
		<link rel="stylesheet" href="./res/plugs/codemirror/theme/darcula.css">
		<script src="./res/plugs/codemirror/lib/codemirror.js"></script>
		<script src="./res/plugs/codemirror/mode/xml/xml.js"></script>
		<script src="./res/plugs/codemirror/mode/javascript/javascript.js"></script>
		<script src="./res/plugs/codemirror/mode/css/css.js"></script>

		<script src="./res/plugs/codemirror/mode/htmlmixed/htmlmixed.js"></script>
		<script src="./res/plugs/codemirror/addon/edit/matchbrackets.js"></script>


	<!-- 	<script src="/lib/codemirror.js"></script>
		<script src="/lib/codemirror_jsx.js"></script>
		<script src="/lib/htmlmixed.js"></script>
		<script src="/lib/xml.js"></script>
		<script src="/lib/javascript.js"></script>
		<script src="/lib/css.js"></script>
		<script src="/lib/clike.js"></script> -->


	</HEAD>
	<style>
		body {
			margin: 8px;
		}

		/**框架样式**/
		#mainview {
			background: rgb(39, 40, 34);
			border-radius: 5px;
			box-sizing: border-box !important;
			overflow-wrap: break-word !important;
			color: #fff;
			height: 100%;
			width: 100%;
			padding: 10px;
		}

		#topview {
			background: url('./res/imgs/top.svg') 0px 10px / 40px no-repeat rgb(39, 40, 34);
			height: 30px;
			width: 100%;
			position: relative;
		}

		#topview #runbtn {
			height: 28px;
			line-height: 28px;
			position: absolute;
			right: 0px;
		}

		#contentview {
			display: -webkit-box;
			height: calc(100% - 30px);
		}

		#fileview {
			width: 100px;
			border: 1px solid #6f71658c;
			height: 100%;
			overflow: auto;
		}

		#editview {
			height: calc(100% - 20px);
			outline: none;
			width: calc(100% - 120px);
			border: 1px solid #6f71658c;
			padding: 10px;
			overflow: auto;
		}

		#editview div {}

		.CodeMirror {
			height: 100%;

		}
	</style>
	<script type="application/javascript">
		var editor;
		var viewwin;
		//默认获取焦点
		$(document).ready(function() {
			if (localStorage.context) {
				//$("#editview").html(localStorage.context);
				$("#codeTextarea").val(localStorage.context);
			}
			$("#editview").focus();
			$("#editview").keydown(function(event) {

			});
			$("#editview").keyup(function(event) {
				if (window.editor) {
					window.editor.save();
				}
				// localStorage.context = $("#editview").text();
				localStorage.context = $("#codeTextarea").val();
			});
			$("#runbtn").click(function() {
				viewwin = window.open('view.html', 'viewwin', 'height=' + (screen.availHeight - 20) +
					', width=' + (screen.availWidth) +
					', top=0, left=0, toolbar=no, menubar=no, scrollbars=no,resizable=no,location=no, status=no'
					);
				setTimeout(function() {
					// viewwin.document.body.innerHTML = $("#editview").text();
					viewwin.document.body.innerHTML = $("#codeTextarea").val();

					//var html = $("#editview").text();
					//viewwin.set_innerHTML("container", html, 0);
					//viewwin.setInnerHTML(html);
				}, 1000)

			})
			//初始化编辑器
			editor = CodeMirror.fromTextArea(codeTextarea, {
				lineNumbers: true,
				mode: 'text/html',
				styleActiveLine: true,
				matchBrackets: true,
				theme: "darcula",
				htmlMode: true,
				lineWrapping: true,
				smartIndent: false,
				addModeClass: true

			});
		});
		layui.use(function() {
			var layer = layui.layer,
				form = layui.form,
				laypage = layui.laypage,
				element = layui.element,
				laydate = layui.laydate,
				util = layui.util,
				tree = layui.tree;

			//欢迎信息
			layer.msg('Hello Facepl');


			//渲染文件树
			var inst1 = tree.render({
				elem: '#fileview' //绑定元素
					,
				data: [{
					title: 'demo' //一级菜单
						,
					children: [{
						title: '主界面' //二级菜单

					}]
				}]
			});

		});
	</script>
	<BODY>
		<div id="mainview">
			<div id="topview">
				<button type="button" id="runbtn" class="layui-btn layui-btn-radius layui-btn-normal">运行</button>
			</div>
			<div id="contentview">
				<div id="fileview">
				</div>
				<div id="editview">
					<textarea id="codeTextarea"></textarea>
				</div>
				<!-- <div id="editview" contenteditable="true">
					<div></div> -->
				<!--
					<span contenteditable="false">1</span>
					<span style="color: red">500</span>
					-->
				<!-- <div> -->
			</div>


		</div>

	</BODY>
</HTML>