refactor: 修改MarkdownDemo和RichTextEditorDemo的内容结构

NLRX-WJC · May 17, 2020 · dc814f1 · dc814f1
1 parent 5f23122
commit dc814f1
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 26 deletions.
diff --git a/src/components/Markdown/index.jsx b/src/components/Markdown/index.jsx
@@ -1,25 +1,16 @@
 import React from "react";
-import { Card } from "antd";
 import "codemirror/lib/codemirror.css";
 import "@toast-ui/editor/dist/toastui-editor.css";
 import { Editor } from "@toast-ui/react-editor";
-import TypingCard from "@/components/TypingCard";
 const Markdown = () => {
-  const cardContent = `此页面用到的Markdown编辑器是<a href="https://github.com/nhn/tui.editor/tree/master/apps/react-editor" target="_blank">tui.editor(React版)</a>`;
   return (
-    <div className="app-container">
-      <TypingCard title="Markdown编辑器" source={cardContent} />
-      <br />
-      <Card bordered={false}>
-        <Editor
-          initialValue="hello 难凉热血!"
-          previewStyle="vertical"
-          height="600px"
-          initialEditType="markdown"
-          useCommandShortcut={true}
-        />
-      </Card>
-    </div>
+    <Editor
+      initialValue="hello 难凉热血!"
+      previewStyle="vertical"
+      height="600px"
+      initialEditType="markdown"
+      useCommandShortcut={true}
+    />
   );
 };
 

diff --git a/src/components/RichTextEditor/index.jsx b/src/components/RichTextEditor/index.jsx
@@ -5,7 +5,6 @@ import { Editor } from 'react-draft-wysiwyg';
 import draftToHtml from 'draftjs-to-html';
 import draftToMarkdown from 'draftjs-to-markdown';
 import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
-import TypingCard from '@/components/TypingCard'
 import "./index.less"
 class RichTextEditor extends Component {
   state = {
@@ -17,12 +16,9 @@ class RichTextEditor extends Component {
     });
   };
   render() { 
-    const cardContent = `此页面用到的富文本编辑是<a href="https://github.com/jpuri/react-draft-wysiwyg">react-draft-wysiwyg</a>`
     const { editorState } = this.state;
     return ( 
-      <div className="app-container">
-        <TypingCard title='富文本编辑器' source={cardContent} />
-        <br/>
+      <div>
         <Card bordered={false}>
           <Editor
             editorState={editorState}
@@ -51,5 +47,4 @@ class RichTextEditor extends Component {
   }
 }
 
-
 export default RichTextEditor;
diff --git a/src/views/components-demo/Markdown.jsx b/src/views/components-demo/Markdown.jsx
@@ -1,5 +1,21 @@
 import React from "react";
+import { Card } from "antd";
 import Markdown from "@/components/Markdown";
-export default () => {
-  return <Markdown />;
+import TypingCard from "@/components/TypingCard";
+
+const MarkdownDemo = () => {
+  const cardContent = `
+    此页面用到的Markdown编辑器是<a href="https://github.com/nhn/tui.editor/tree/master/apps/react-editor" target="_blank">tui.editor(React版)</a>。
+  `;
+  return (
+    <div className="app-container">
+      <TypingCard title="新手引导" source={cardContent} />
+      <br />
+      <Card bordered={false}>
+        <Markdown />
+      </Card>
+    </div>
+  );
 };
+
+export default MarkdownDemo;
diff --git a/src/views/components-demo/richTextEditor.jsx b/src/views/components-demo/richTextEditor.jsx
@@ -1,5 +1,18 @@
 import React from "react";
 import RichTextEditor from "@/components/RichTextEditor";
-export default () => {
-  return <RichTextEditor />;
+import TypingCard from "@/components/TypingCard";
+
+const RichTextEditorDemo = () => {
+  const cardContent = `
+    此页面用到的富文本编辑器是<a href="https://github.com/jpuri/react-draft-wysiwyg">react-draft-wysiwyg</a>。
+  `
+  return (
+    <div className="app-container">
+      <TypingCard title="新手引导" source={cardContent} />
+      <br />
+      <RichTextEditor />
+    </div>
+  );
 };
+
+export default RichTextEditorDemo;