💄 添加在线coding编辑器测试文件，本地可测试，学习，参考

2026-02-24 16:40:27 +00:00 · 2020-09-12 10:41:02 +08:00 · 2020-09-12 10:41:02 +08:00 · 0cb8931868
commit 0cb8931868
parent c44179a71b
4 changed files with 199 additions and 0 deletions
--- a/test/global.css
+++ 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';
--- a/test/index.css
+++ 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;
+}
--- a/test/index.js
+++ 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 = `<!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>
+  );
+}
--- a/test/server.js
+++ 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);