You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
138 lines
3.9 KiB
138 lines
3.9 KiB
4 years ago
|
<!doctype html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport"
|
||
|
|
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||
|
|
<title>学习FINE UI工具页</title>
|
||
|
|
<!--引入官方 css文件-->
|
||
|
|
|
||
|
|
<link rel="stylesheet" type="text/css"
|
||
|
|
href="/webroot/decision/file?path=/com/fr/web/ui/fineui.min.css&type=plain&parser=plain"/>
|
||
|
|
<link rel="stylesheet" type="text/css"
|
||
|
|
href="https://fanruan.design/markdown/lib/codemirror/codemirror.min.css"/>
|
||
|
|
<style>
|
||
|
|
.CodeMirror {
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
#lean {
|
||
|
|
width: 49%;
|
||
|
|
height: 100%;
|
||
|
|
border: 1px solid;
|
||
|
|
position: absolute;
|
||
|
|
left: 0
|
||
|
|
}
|
||
|
|
|
||
|
|
#editAre {
|
||
|
|
width: 49%;
|
||
|
|
height: 100%;
|
||
|
|
border: 1px solid;
|
||
|
|
position: absolute;
|
||
|
|
right: 0
|
||
|
|
}
|
||
|
|
|
||
|
|
#editor {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div id="lean">
|
||
|
|
</div>
|
||
|
|
${somea}
|
||
|
|
<div id="editAre">
|
||
|
|
<textarea id="editor">
|
||
|
|
BI.createWidget({
|
||
|
|
type: "bi.label",
|
||
|
|
text: "测试文本"
|
||
|
|
})
|
||
|
|
</textarea>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
<!-- 引入官方的js-->
|
||
|
|
<script type="text/javascript"
|
||
|
|
src="/webroot/decision/file?path=/com/fr/web/ui/fineui.min.js&type=plain&parser=plain"></script>
|
||
|
|
<script type="text/javascript"
|
||
|
|
src="https://fanruan.design/markdown/lib/codemirror/codemirror.min.js"></script>
|
||
|
|
<script id="markdown-lib-codemirror-modes-min" type="text/javascript"
|
||
|
|
src="https://fanruan.design/markdown/lib/codemirror/modes.min.js"></script>
|
||
|
|
<script id="markdown-lib-prettify-min" type="text/javascript"
|
||
|
|
src="https://fanruan.design/markdown/lib/prettify.min.js"></script>
|
||
|
|
|
||
|
|
<!-- 写自己的js-->
|
||
|
|
<script>
|
||
|
|
var editor = document.getElementById("editor");
|
||
|
|
var lean = document.getElementById("lean");
|
||
|
|
var codeEditor = null;
|
||
|
|
init();
|
||
|
|
|
||
|
|
function _runCode(code) {
|
||
|
|
code = code.replace(/^BI.createWidget|[^=]\sBI.createWidget/, "return BI.createWidget");
|
||
|
|
code = "function(){" + code + "}()";
|
||
|
|
try {
|
||
|
|
var widget = new Function("return " + code)(); // eslint-disable-line
|
||
|
|
return widget;
|
||
|
|
} catch (e) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
|
||
|
|
function change() {
|
||
|
|
var val = codeEditor.getValue();
|
||
|
|
var widget = _runCode(val);
|
||
|
|
if (widget) {
|
||
|
|
removeAllChild()
|
||
|
|
lean.append(widget.element[0]);
|
||
|
|
widget._isRoot = true;
|
||
|
|
widget._mount();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function init() {
|
||
|
|
codeEditor = CodeMirror.fromTextArea(editor, {
|
||
|
|
mode: "javascript",
|
||
|
|
value: editor.value,
|
||
|
|
// lineNumbers: true,
|
||
|
|
lineWrapping: true,
|
||
|
|
tabSize: 4,
|
||
|
|
dragDrop: false,
|
||
|
|
// autofocus: true,
|
||
|
|
autoCloseTags: true,
|
||
|
|
readOnly: false,
|
||
|
|
indentUnit: 4,
|
||
|
|
foldGutter: false,
|
||
|
|
// gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
|
||
|
|
matchBrackets: true,
|
||
|
|
indentWithTabs: true,
|
||
|
|
// styleActiveLine: true,
|
||
|
|
// styleSelectedText: true,
|
||
|
|
autoCloseBrackets: true
|
||
|
|
// showTrailingSpace: true
|
||
|
|
// highlightSelectionMatches: { showToken: /\w/ }
|
||
|
|
});
|
||
|
|
var timer;
|
||
|
|
codeEditor.on("change", function (_cm, changeObj) {
|
||
|
|
timer = setTimeout(function () {
|
||
|
|
clearTimeout(timer);
|
||
|
|
change();
|
||
|
|
timer = null;
|
||
|
|
}, 300);
|
||
|
|
});
|
||
|
|
change()
|
||
|
|
}
|
||
|
|
|
||
|
|
function removeAllChild() {
|
||
|
|
var div = document.getElementById("lean");
|
||
|
|
while (div.hasChildNodes()) //当div下还存在子节点时 循环继续
|
||
|
|
{
|
||
|
|
div.removeChild(div.firstChild);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</html>
|