feat: add ace editor

client/containers/AddInterface/AddInterface.scss

@@ -257,12 +257,12 @@ body {
 #req-cover {
   height: 330px;
   padding: 0 20px;
-  background-color: #FFF;
+  // background-color: #FFF;
   -webkit-box-flex: 1;
 }
 #res-cover {
   height: 330px;
   padding: 0 20px;
-  background-color: #FFF;
+  /*background-color: #FFF;*/
   -webkit-box-flex: 1;
 }

client/containers/AddInterface/ReqParams/ReqParams.js

@@ -1,10 +1,10 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
-import wangEditor from 'wangeditor'
+// import wangEditor from 'wangeditor'
 import { getReqParams } from '../../../actions/addInterface.js'
 
-const editor = new wangEditor('#req-cover')
+//const editor = new wangEditor('#req-cover')
 
 @connect(
   state => {
@@ -27,25 +27,41 @@ class ReqParams extends Component {
     super(props)
   }
 
-  initParams () {
-    const { reqParams } = this.props
-    if (reqParams) {
-      editor.txt.html(reqParams)
-    }
-  }
+  // initParams () {
+  //   const { reqParams } = this.props
+  //   if (reqParams) {
+  //     editor.txt.html(reqParams)
+  //   }
+  // }
 
   componentDidMount () {
-    const reg = /(<p>)|(<\/p>)|&nbsp;|(<br>)|\s+/g
-    let json = ''
-    editor.customConfig.menus = []
-    editor.customConfig.onchange = html => {
-      json = html.replace(reg, '')
-      this.props.getReqParams(json)
+    function json_parse(json){
+      try{
+        return JSON.stringify(JSON.parse(json), null, "\t");
+      }catch(e){
+        return json
+      }
     }
-    setTimeout(() => {
-      this.initParams()
-    }, 500)
-    editor.create()
+    let editor2 = this.editor = window.ace.edit("req-cover")
+    editor2.getSession().setMode("ace/mode/json");
+    setTimeout( () => {
+      editor2.setValue(json_parse(this.props.reqParams))
+    } ,400)
+
+    editor2.getSession().on('change', ()=> {
+      this.props.getReqParams(editor2.getValue())
+    });
+    // const reg = /(<p>)|(<\/p>)|&nbsp;|(<br>)|\s+/g
+    // let json = ''
+    // editor.customConfig.menus = []
+    // editor.customConfig.onchange = html => {
+    //   json = html.replace(reg, '')
+    //   this.props.getReqParams(json)
+    // }
+    // setTimeout(() => {
+    //   this.initParams()
+    // }, 500)
+    // editor.create()
   }
   
   render () {

client/containers/AddInterface/ResParams/ResParams.js

@@ -1,11 +1,13 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
-import wangEditor from 'wangeditor'
+//import wangEditor from 'wangeditor'
 import { Tabs } from 'antd'
 import { getResParams } from '../../../actions/addInterface.js'
 
-const editor = new wangEditor('#res-cover')
+//const editor = new wangEditor('#res-cover')
+
+
 
 @connect(
   state => {
@@ -28,24 +30,41 @@ class ResParams extends Component {
     super(props)
   }
 
-  initResParams () {
-    const { resParams } = this.props
-    if (resParams) {
-      editor.txt.html(resParams)
-    }
-  }
+  // initResParams () {
+  //   const { resParams } = this.props
+  //   if (resParams) {
+  //     editor.txt.html(resParams)
+  //   }
+  // }
 
   componentDidMount () {
-    const reg = /(<p>)|(<\/p>)|&nbsp;|(<br>)|\s+|<div>|<\/div>/g
-    editor.customConfig.menus = []
-    editor.customConfig.onchange = html => {
-      html = html.replace(reg, '')
-      this.props.getResParams(html)
+    //const reg = /(<p>)|(<\/p>)|&nbsp;|(<br>)|\s+|<div>|<\/div>/g
+    //editor.customConfig.menus = []
+    // editor.customConfig.onchange = html => {
+    //   html = html.replace(reg, '')
+    //   this.props.getResParams(html)
+    // }
+    // setTimeout(() => {
+    //   this.initResParams()
+    // }, 400)
+    //editor.create()
+
+    function json_parse(json){
+      try{
+        return JSON.stringify(JSON.parse(json), null, "\t");
+      }catch(e){
+        return json
+      }
     }
-    setTimeout(() => {
-      this.initResParams()
-    }, 400)
-    editor.create()
+
+    let editor2 = this.editor = window.ace.edit("res-cover")
+    editor2.getSession().setMode("ace/mode/json");
+    editor2.getSession().on('change', ()=> {
+      this.props.getResParams(editor2.getValue())
+    });
+    setTimeout( () => {
+      editor2.setValue(json_parse(this.props.resParams))
+    } ,400)
   }
 
   render () {

static/dev.html

@@ -9,28 +9,12 @@
 </head>
 <body>
 <div id="yapi" style="height: 100%;"></div>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.8/ace.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.8/mode-json.js"></script>
 <script src="http://127.0.0.1:4000/yapi/prd/index@dev.js"></script>
 
-<!--
-<button id="qsso-login">qsso登录</button>
-<script src="https://qsso.corp.qunar.com/lib/qsso-auth.js"></script>
-
-<script>
-QSSO.attach('qsso-login','/user/login_by_token');
-var xhr = new XMLHttpRequest();
-xhr.open('GET', '/user/status')
-xhr.onload = function(e){
-    if(this.status == 200){
-        alert(this.responseText)
-    }
-}
-xhr.send()
-
-</script>
 
 
-<html>
-
--->
 </body>
 </html>