diff --git a/test/global.css b/test/global.css new file mode 100644 index 0000000..1bf5ee9 --- /dev/null +++ b/test/global.css @@ -0,0 +1,10 @@ +html, body, #root { + height: 100%; +} + +body { + margin: 0; +} + +@import '~codemirror/lib/codemirror.css'; +@import '~codemirror/theme/material.css'; diff --git a/test/index.css b/test/index.css new file mode 100644 index 0000000..1a4edd5 --- /dev/null +++ b/test/index.css @@ -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; +} diff --git a/test/index.js b/test/index.js new file mode 100644 index 0000000..a60d84b --- /dev/null +++ b/test/index.js @@ -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 = ` + + + + + Document + + + +
+ +

+ (H5编辑器)H5-Dooring是一款功能强大，开源免费的H5可视化页面配置解决方案， + 致力于提供一套简单方便、专业可靠、无限可能的H5落地页最佳实践。 +

+
+ + +`; + +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 ( +
+
+ +
+ + +
+
+ +
+ +
+
+ ); +} diff --git a/test/server.js b/test/server.js new file mode 100644 index 0000000..1bf89b7 --- /dev/null +++ b/test/server.js @@ -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);