mirror of
https://github.com/MrXujiang/h5-Dooring.git
synced 2026-02-25 17:40:26 +00:00
💄 添加在线coding编辑器测试文件，本地可测试，学习，参考
This commit is contained in:
xujiang
parent
c44179a71b
commit
0cb8931868
10
test/global.css
Normal file
10
test/global.css
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
html, body, #root {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@import '~codemirror/lib/codemirror.css';
|
||||||
|
@import '~codemirror/theme/material.css';
|
||||||
24
test/index.css
Normal file
24
test/index.css
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
.wrap {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.codeWrap {
|
||||||
|
width: calc(100vw - 440px);
|
||||||
|
min-height: 600px;
|
||||||
|
}
|
||||||
|
:global(.cm-s-material.CodeMirror) {
|
||||||
|
height: 694px;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.operationBar {
|
||||||
|
margin-top: 20px;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
.previewWrap {
|
||||||
|
margin: 20px 30px;
|
||||||
|
width: 375px;
|
||||||
|
min-width: 375px;
|
||||||
|
min-height: 679px;
|
||||||
|
overflow: auto;
|
||||||
|
border: 12px solid #000;
|
||||||
|
border-radius: 20px;
|
||||||
|
}
|
||||||
114
test/index.js
Normal file
114
test/index.js
Normal file
@ -0,0 +1,114 @@
|
|||||||
|
import { UnControlled as CodeMirror } from 'react-codemirror2';
|
||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import { Button } from 'antd';
|
||||||
|
import { saveAs } from 'file-saver';
|
||||||
|
import styles from './index.css';
|
||||||
|
|
||||||
|
require('codemirror/mode/xml/xml');
|
||||||
|
require('codemirror/mode/javascript/javascript');
|
||||||
|
|
||||||
|
let timer = null;
|
||||||
|
|
||||||
|
let html = `<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Document</title>
|
||||||
|
<style>
|
||||||
|
html,body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
#root {
|
||||||
|
padding-top: 200px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
padding: 0 10px;
|
||||||
|
color: #06c;
|
||||||
|
line-height: 1.8;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root">
|
||||||
|
<img src="http://io.nainor.com/uploads/logo_1747374040f.png" />
|
||||||
|
<p>
|
||||||
|
(H5编辑器)H5-Dooring是一款功能强大，开源免费的H5可视化页面配置解决方案，
|
||||||
|
致力于提供一套简单方便、专业可靠、无限可能的H5落地页最佳实践。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
`;
|
||||||
|
|
||||||
|
export default function() {
|
||||||
|
const [isUpdate, setUpdate] = useState(false);
|
||||||
|
const [cursor, setCursor] = useState({ line: 1, cn: 1 });
|
||||||
|
|
||||||
|
const handleChange = (editor, data, value) => {
|
||||||
|
// codeStr = value
|
||||||
|
fetchPage(value);
|
||||||
|
};
|
||||||
|
|
||||||
|
const fetchPage = v => {
|
||||||
|
if (timer) clearTimeout(timer);
|
||||||
|
timer = setTimeout(() => {
|
||||||
|
fetch('http://localhost:80/dooring/render', { method: 'POST', body: v }).then(res => {
|
||||||
|
html = v;
|
||||||
|
setUpdate(prev => !prev);
|
||||||
|
});
|
||||||
|
}, 1000);
|
||||||
|
};
|
||||||
|
|
||||||
|
const downLoadHtml = () => {
|
||||||
|
var file = new File([html], `${Date.now()}.html`, { type: 'text/html;charset=utf-8' });
|
||||||
|
saveAs(file);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onCursorChange = (editor, data) => {
|
||||||
|
const { line, ch } = data;
|
||||||
|
setCursor({ line, ch });
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetch('http://localhost:80/dooring/render', { method: 'POST', body: html }).then(res => {
|
||||||
|
setUpdate(prev => !prev);
|
||||||
|
});
|
||||||
|
}, []);
|
||||||
|
return (
|
||||||
|
<div className={styles.wrap}>
|
||||||
|
<div className={styles.codeWrap}>
|
||||||
|
<CodeMirror
|
||||||
|
className={styles.codeWrap}
|
||||||
|
value={html}
|
||||||
|
options={{
|
||||||
|
mode: 'xml',
|
||||||
|
theme: 'material',
|
||||||
|
lineNumbers: true,
|
||||||
|
}}
|
||||||
|
onChange={handleChange}
|
||||||
|
cursor={cursor}
|
||||||
|
onCursor={onCursorChange}
|
||||||
|
/>
|
||||||
|
<div className={styles.operationBar}>
|
||||||
|
<Button type="primary" onClick={downLoadHtml} style={{ marginRight: '10px' }}>
|
||||||
|
下载页面
|
||||||
|
</Button>
|
||||||
|
<Button danger onClick={downLoadHtml}>
|
||||||
|
一键部署
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.previewWrap}>
|
||||||
|
<iframe
|
||||||
|
src={`http://localhost:80/html?flag=${isUpdate}`}
|
||||||
|
style={{ width: '100%', height: '100%', margin: 0, padding: 0, border: 'none' }}
|
||||||
|
></iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
51
test/server.js
Normal file
51
test/server.js
Normal file
@ -0,0 +1,51 @@
|
|||||||
|
const Koa = require('koa');
|
||||||
|
const { resolve } = require('path');
|
||||||
|
const staticServer = require('koa-static');
|
||||||
|
const koaBody = require('koa-body');
|
||||||
|
const cors = require('koa2-cors');
|
||||||
|
const logger = require('koa-logger');
|
||||||
|
const fs = require('fs');
|
||||||
|
|
||||||
|
const app = new Koa();
|
||||||
|
|
||||||
|
app.use(staticServer(resolve(__dirname, './static')));
|
||||||
|
app.use(koaBody());
|
||||||
|
app.use(logger());
|
||||||
|
|
||||||
|
// 设置跨域
|
||||||
|
app.use(
|
||||||
|
cors({
|
||||||
|
origin: function(ctx) {
|
||||||
|
if (ctx.url.indexOf('/dooring') > -1) {
|
||||||
|
return '*'; // 允许来自所有域名请求
|
||||||
|
}
|
||||||
|
return '';
|
||||||
|
},
|
||||||
|
exposeHeaders: ['WWW-Authenticate', 'Server-Authorization', 'x-test-code'],
|
||||||
|
maxAge: 5, // 该字段可选，用来指定本次预检请求的有效期，单位为秒
|
||||||
|
credentials: true,
|
||||||
|
allowMethods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
|
||||||
|
allowHeaders: [
|
||||||
|
'Content-Type',
|
||||||
|
'Authorization',
|
||||||
|
'Accept',
|
||||||
|
'x-requested-with',
|
||||||
|
'Content-Encoding',
|
||||||
|
],
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
|
||||||
|
let htmlStr = '';
|
||||||
|
|
||||||
|
app.use(async (ctx, next) => {
|
||||||
|
console.log(ctx.url);
|
||||||
|
if (ctx.url === '/dooring/render') {
|
||||||
|
htmlStr = ctx.request.body;
|
||||||
|
ctx.body = 'success';
|
||||||
|
} else if (ctx.url.indexOf('/html') === 0) {
|
||||||
|
ctx.type = 'html';
|
||||||
|
ctx.body = htmlStr;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
app.listen(80);
|
||||||
Loading…
x
Reference in New Issue
Block a user