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 (
); }