diff --git a/public/react/src/modules/developer/newOrEditTask/index.js b/public/react/src/modules/developer/newOrEditTask/index.js
index 05f599f63..6d9a14663 100644
--- a/public/react/src/modules/developer/newOrEditTask/index.js
+++ b/public/react/src/modules/developer/newOrEditTask/index.js
@@ -3,43 +3,72 @@
  * @Author: tangjiang 
  * @Date: 2019-11-15 16:38:34 
  * @Last Modified by: tangjiang
- * @Last Modified time: 2019-11-19 11:34:19
+ * @Last Modified time: 2019-11-19 23:23:41
  */
 import './index.scss';
-import React, { Component } from 'react';
+import React from 'react';
 import { connect } from 'react-redux';
 import SplitPane from 'react-split-pane';// import { Form } from 'antd';
 import { Button, Icon } from 'antd';
 import { Link } from 'react-router-dom';
 import LeftPane from './leftpane';
-import RightPane from './rightpane';
-class NewOrEditTask extends Component {
+import RightPane from './rightpane/index';
 
-  render() {
-    return (
-      <div className={'new_add_task_wrap'}>
-        <div className={'task_header'}>
-          <Link to="/" className={'header_btn'} >
-            <Icon type="left" style={{ marginRight: '5px'}}/>后退
-          </Link>
-          <span className={'header_title'}>标题内容</span>
-          <Button className={`header_btn`} type="primary">立即发布</Button>
-        </div>
-        <div className="split-pane-area">
-          <SplitPane split="vertical" minSize={200} maxSize={-200} defaultSize="50%">
-            <div className={'split-pane-left'}>
-              <LeftPane />
-            </div>
-            <SplitPane split="vertical" defaultSize="100%" allowResize={false}>
-              <RightPane />
-              <div />
-            </SplitPane>
+// class NewOrEditTask extends React.Component {
+//   render() {
+//     return (
+//       <div className={'new_add_task_wrap'}>
+//         <div className={'task_header'}>
+//           <Link to="/" className={'header_btn'} >
+//             <Icon type="left" style={{ marginRight: '5px'}}/>后退
+//           </Link>
+//           <span className={'header_title'}>标题内容</span>
+//           <Button className={`header_btn`} type="primary">立即发布</Button>
+//         </div>
+//         <div className="split-pane-area">
+//           <SplitPane split="vertical" minSize={200} maxSize={-200} defaultSize="50%">
+//             <div className={'split-pane-left'}>
+//               <LeftPane />
+//             </div>
+//             <SplitPane split="vertical" defaultSize="100%" allowResize={false}>
+//               <RightPane />
+//               <div />
+//             </SplitPane>
+//           </SplitPane>
+//         </div>
+//       </div>
+//     )
+//   }
+// }
+
+const NewOrEditTask = () => {
+
+  // 表单提交
+  const handleSubmitForm = () => {}
+  return (
+    <div className={'new_add_task_wrap'}>
+      <div className={'task_header'}>
+        <Link to="/" className={'header_btn'} >
+          <Icon type="left" style={{ marginRight: '5px'}}/>后退
+        </Link>
+        <span className={'header_title'}>标题内容</span>
+        <Button className={`header_btn`} type="primary">立即发布</Button>
+      </div>
+      <div className="split-pane-area">
+        <SplitPane split="vertical" minSize={200} maxSize={-200} defaultSize="50%">
+          <div className={'split-pane-left'}>
+            <LeftPane />
+          </div>
+          <SplitPane split="vertical" defaultSize="100%" allowResize={false}>
+            <RightPane 
+              onSubmit={ handleSubmitForm }
+            />
+            <div />
           </SplitPane>
-        </div>
+        </SplitPane>
       </div>
-      
-    )
-  }
+    </div>
+  )
 }
 
 const mapStateToProps = (state) => ({
diff --git a/public/react/src/modules/developer/newOrEditTask/rightpane/RightPaneCode.js b/public/react/src/modules/developer/newOrEditTask/rightpane/RightPaneCode.js
deleted file mode 100644
index 98fb3d7a6..000000000
--- a/public/react/src/modules/developer/newOrEditTask/rightpane/RightPaneCode.js
+++ /dev/null
@@ -1,122 +0,0 @@
-/*
- * @Description: 右侧代码块 
- * @Author: tangjiang 
- * @Date: 2019-11-18 08:42:04 
- * @Last Modified by: tangjiang
- * @Last Modified time: 2019-11-19 08:55:08
- */
-
-import './index.scss';
-
-import React, { Fragment, useState } from 'react';
-import { Icon, Drawer, Tabs, Button } from 'antd';
-// import MonacoEditor from 'react-monaco-editor';
-import MonacoEditor from '@monaco-editor/react';
-import InitTabCtx from './initTabCtx';
-
-const { TabPane } = Tabs;
-const tabsArrs = [
-  {
-    title: '自定义测试用例',
-    key: '1',
-    content: '这是自定测试用例内容'
-  },
-  {
-    title: '代码执行结果',
-    key: '2',
-    content: '这是自定代码执行结果'
-  }
-];
-
-const RightPaneCode = () => {
-
-  const [showDrawer, setShowDrawer] = useState(false);
-  const [defaultActiveKey, setDefaultActiveKey] = useState('1');
-  const [showTextResult, setShowTextResult] = useState(false);
-  const [editCode, setEditCode] = useState('console.log("test")'); 
-
-  // 打开设置
-  const handleShowDrawer = () => {
-    setShowDrawer(true);
-  }
-  // 关闭设置
-  const handleDrawerClose = () => {
-    setShowDrawer(false);
-  }
-  // 切换tab
-  const handleTabChange = (key) => {
-    setDefaultActiveKey(key);
-  }
-  // 显示/隐藏tab
-  const handleShowControl = () => {
-    setShowTextResult(!showTextResult);
-  }
-  // 沉浸tab内容
-  const tabs = tabsArrs.map((tab) => (
-    <TabPane tab={tab.title} key={tab.key} style={{ height: '280px', overflowY: 'auto' }}>
-      <InitTabCtx ctx={tab.content} state="loaded" position="center"/>
-    </TabPane>
-  ));
-  
-  const handleEditorChange = (newValue, e) => {
-    setEditCode(newValue);
-  }
-
-  const classNames = showTextResult ? 'control_tab active' : 'control_tab';
-  const editorOptions = {
-    selectOnLineNumbers: true,
-    automaticLayout: true,
-    fontSize: '16px'
-  }
-  return (
-    <Fragment>
-      <div className={'right_pane_code_wrap'}>
-        <div className={'code-title'}>
-          <span>ts.js</span>
-          <span>已保存</span>
-          <Icon className={'code-icon'} type="setting" onClick={handleShowDrawer}/>
-        </div>
-        {/** 代码编辑器 */}
-        <MonacoEditor
-          height={showTextResult ? 'calc(100% - 382px)' : 'calc(100% - 112px)'}
-          width="100%"
-          language="typescript"
-          value={editCode}
-          options={editorOptions}
-          theme="dark"
-          onChange={handleEditorChange}
-        />
-        {/* 控制台信息 */}
-        <div className="pane_control_area">
-          <Tabs
-            className={classNames}
-            activeKey={defaultActiveKey} 
-            tabBarStyle={{ backgroundColor: '#000', color: '#fff' }}
-            onChange={handleTabChange}
-          >
-            {tabs}
-          </Tabs>
-          <div className="pane_control_opts">
-            <Button type="link" size="small" style={{ color: '#fff' }} onClick={handleShowControl}>控制台 <Icon type={ showTextResult ? "down" : "up" } /></Button>
-            <p>
-              <Button ghost size="small" style={{ marginRight: '10px', color: '#28BD8B', borderColor: '#28BD8B' }}>调试代码</Button>
-              <Button type="primary" size="small">提交</Button>
-            </p>
-          </div>
-        </div>
-      </div>
-      <Drawer
-        placement="right"
-        closable={false}
-        onClose={handleDrawerClose}
-        visible={showDrawer}
-      >
-        <p>Some contents...</p>
-        <p>Some contents...</p>
-        <p>Some contents...</p>
-      </Drawer>
-    </Fragment>
-  );
-}
-
-export default RightPaneCode;
diff --git a/public/react/src/modules/developer/newOrEditTask/rightpane/RightPaneControl.js b/public/react/src/modules/developer/newOrEditTask/rightpane/RightPaneControl.js
deleted file mode 100644
index fd631a622..000000000
--- a/public/react/src/modules/developer/newOrEditTask/rightpane/RightPaneControl.js
+++ /dev/null
@@ -1,71 +0,0 @@
-import './index.scss';
-
-import React, { Component } from 'react';
-import { Tabs, Button, Icon } from 'antd';
-import InitTabCtx from './initTabCtx';
-
-const { TabPane } = Tabs;
-
-const tabsArrs = [
-  {
-    title: '自定义测试用例',
-    key: '1',
-    content: '这是自定测试用例内容'
-  },
-  {
-    title: '代码执行结果',
-    key: '2',
-    content: '这是自定代码执行结果'
-  }
-];
-
-class RightPaneControl extends Component {
-
-  state = {
-    defaultActiveKey: '1'
-  }
-
-  handleTabChange = (key) => {
-    this.setState({
-      defaultActiveKey: key,
-    })
-  }
-
-  handleShowControl = () => {
-    this.setState((oldState) => ({
-      showTextResult: !oldState.showTextResult
-    }))
-  }
-
-  render () {
-    const { defaultActiveKey, showTextResult } = this.state;
-    // tab内容区块
-    const tabs = tabsArrs.map((tab) => (
-      <TabPane tab={tab.title} key={tab.key} style={{ height: '280px', overflowY: 'auto' }}>
-        <InitTabCtx ctx={tab.content} state="loaded" position="center"/>
-      </TabPane>
-    ));
-
-    return (
-      <div className="pane_control_area" style={{ height: showTextResult ? '400px' : '56px' }}>
-        {/* <Tabs
-          activeKey={defaultActiveKey} 
-          tabBarStyle={{ backgroundColor: '#000', color: '#fff' }}
-          onChange={this.handleTabChange}
-          style={{display: showTextResult ? 'block' : 'none'}}
-        >
-          {tabs}
-        </Tabs> */}
-        <div className="pane_control_opts">
-          <Button type="link" size="small" style={{ color: '#fff' }} onClick={this.handleShowControl}>控制台 <Icon type={ showTextResult ? "down" : "up" } /></Button>
-          <p>
-            <Button ghost size="small" style={{ marginRight: '10px', color: '#28BD8B', borderColor: '#28BD8B' }}>调试代码</Button>
-            <Button type="primary" size="small">提交</Button>
-          </p>
-        </div>
-      </div>
-    )
-  }
-}
-
-export default RightPaneControl;
diff --git a/public/react/src/modules/developer/newOrEditTask/rightpane/index.js b/public/react/src/modules/developer/newOrEditTask/rightpane/index.js
index b47c26425..8b5cf4917 100644
--- a/public/react/src/modules/developer/newOrEditTask/rightpane/index.js
+++ b/public/react/src/modules/developer/newOrEditTask/rightpane/index.js
@@ -1,20 +1,156 @@
 /*
- * @Description: 右侧部分: 包含代码块与控制区 
+ * @Description: 右侧代码块 
  * @Author: tangjiang 
- * @Date: 2019-11-18 08:42:40 
+ * @Date: 2019-11-18 08:42:04 
  * @Last Modified by: tangjiang
- * @Last Modified time: 2019-11-18 22:58:39
+ * @Last Modified time: 2019-11-20 00:00:34
  */
 
-import React from 'react';
-import RightPaneCode from './RightPaneCode';
+import './index.scss';
 
-const RightPane = () => {
+import React, { Fragment, useState, useRef } from 'react';
+import { Icon, Drawer, Tabs, Button, notification } from 'antd';
+// import MonacoEditor from 'react-monaco-editor';
+import MonacoEditor from '@monaco-editor/react';
+import InitTabCtx from './initTabCtx';
 
+const { TabPane } = Tabs;
+const tabsArrs = [
+  {
+    title: '自定义测试用例',
+    key: '1',
+    content: '这是自定测试用例内容'
+  },
+  {
+    title: '代码执行结果',
+    key: '2',
+    content: '这是自定代码执行结果'
+  }
+];
+
+const RightPaneCode = (props) => {
+
+  const [showDrawer, setShowDrawer] = useState(false); // 控制配置滑框
+  const [defaultActiveKey, setDefaultActiveKey] = useState('1'); // 当前选中的tab
+  const [showTextResult, setShowTextResult] = useState(false); // 是否点击控制台按钮
+  const [editCode, setEditCode] = useState('console.log("test")');  // monaco编辑器内容
+  const editorRef = useRef(null); // 编辑器ref
+  
+  // 打开设置
+  const handleShowDrawer = () => {
+    setShowDrawer(true);
+  }
+
+  // 关闭设置
+  const handleDrawerClose = () => {
+    setShowDrawer(false);
+  }
+
+  // 切换tab
+  const handleTabChange = (key) => {
+    setDefaultActiveKey(key);
+  }
+
+  // 显示/隐藏tab
+  const handleShowControl = () => {
+    setShowTextResult(!showTextResult);
+  }
+
+  // 沉浸tab内容
+  const tabs = tabsArrs.map((tab) => (
+    <TabPane tab={tab.title} key={tab.key} style={{ height: '280px', overflowY: 'auto' }}>
+      <InitTabCtx ctx={tab.content} state="loaded" position="center"/>
+    </TabPane>
+  ));
+
+  // 文本框内容变化时，记录文本框内容
+  const handleEditorChange = (origin, monaco) => {
+    editorRef.current = monaco; // 获取当前monaco实例
+    setEditCode(origin); // 保存编辑器初始值
+    editorRef.current.onDidChangeModelContent(e => { // 监听编辑器内容的变化
+      const val = editorRef.current.getValue();
+      setEditCode(val); 
+    });
+  }
+  
+  // 提交按钮点击
+  const handleSubmit = () => {
+    if (!editCode) {
+      notification['error']({
+        message: '必填',
+        description: '代码块内容必须输入!'
+      });
+      editorRef.current.focus();
+      return;
+    }
+    const { onSubmit } = props;
+    onSubmit(editCode);
+  }
+  
+  // 控制台点击时 添加active属性
+  const classNames = showTextResult ? 'control_tab active' : 'control_tab';
+
+  // 配置编辑器属性
+  const editorOptions = {
+    selectOnLineNumbers: true,
+    automaticLayout: true,
+    fontSize: '16px'
+  }
+
+  // 返回渲染值
   return (
-    <RightPaneCode />
+    <Fragment>
+      <div className={'right_pane_code_wrap'}>
+        <div className={'code-title'}>
+          <span>ts.js</span>
+          <span>已保存</span>
+          <Icon className={'code-icon'} type="setting" onClick={handleShowDrawer}/>
+        </div>
+        {/** 代码编辑器 */}
+        <MonacoEditor
+          height={showTextResult ? 'calc(100% - 382px)' : 'calc(100% - 112px)'}
+          width="100%"
+          language="typescript"
+          value={editCode}
+          options={editorOptions}
+          theme="dark"
+          editorDidMount={handleEditorChange}
+        />
+        {/* 控制台信息 */}
+        <div className="pane_control_area">
+          <Tabs
+            className={classNames}
+            activeKey={defaultActiveKey} 
+            tabBarStyle={{ backgroundColor: '#000', color: '#fff' }}
+            onChange={handleTabChange}
+          >
+            {tabs}
+          </Tabs>
+          <div className="pane_control_opts">
+            <Button type="link" size="small" style={{ color: '#fff' }} onClick={handleShowControl}>控制台 <Icon type={ showTextResult ? "down" : "up" } /></Button>
+            <p>
+              <Button ghost size="small" style={{ marginRight: '10px', color: '#28BD8B', borderColor: '#28BD8B' }}>调试代码</Button>
+              <Button 
+                type="primary" 
+                size="small" 
+                onClick={handleSubmit}
+              >提交</Button>
+            </p>
+          </div>
+        </div>
+      </div>
+      <Drawer
+        placement="right"
+        closable={false}
+        onClose={handleDrawerClose}
+        visible={showDrawer}
+      >
+        <p>Some contents...</p>
+        <p>Some contents...</p>
+        <p>Some contents...</p>
+      </Drawer>
+    </Fragment>
   );
-  
 }
 
-export default RightPane;
+export default RightPaneCode;