新增富文本

src/components/knockGold/index.jsx

@@ -29,6 +29,7 @@ import _, { isArray } from 'lodash'
 import { getVoucherWarningAccount, handelResponse } from '@/assets/api'
 import AddNewDialog from './Dialog'
 import MobileComponent from './mobileCmponent'
+import WangEditor from './wangEditor'
 const getTimeList = [
   { key: '0', text: '立即生效' },
   { key: '1', text: '次日生效' }
@@ -116,6 +117,8 @@ export default class addKnockGold extends Component {
       let model = this.state.model
       model.entry_time[0] = this.props.data.time_limit.effect_time.start_time
       model.entry_time[1] = this.props.data.time_limit.effect_time.end_time
+      model.instruction = this.props.data.instruction
+
       model.fixed_time[0] =
         this.props.data.time_limit.use_time.fiexd_time?.start_time
       model.fixed_time[1] =
@@ -127,12 +130,12 @@ export default class addKnockGold extends Component {
 
   /* 编辑回显 */
   echoFun(UserSelectList) {
-    console.log(this.props.data)
     if (this.props.data) {
       let model = this.state.model
       for (let key in this.props.data) {
         model[key] = this.props.data[key]
       }
+      model.weight = String(this.props.data.weight)
       model.early_per = this.props.data.early_per.map((item) => String(item))
       model.channel = String(this.props.data.channel)
       model.natural_limit = String(this.props.data.natural_limit)
@@ -1021,17 +1024,13 @@ export default class addKnockGold extends Component {
         <Card style={{ width: '70%', margin: '10px 0' }} title={'样式设置'}>
           <Form ref='form3'>
             <FormItem id='instruction' labelname='使用说明' required=''>
-              <Input
-                value={this.state.model.instruction}
-                width='520px'
-                onChange={({ target }) => {
-                  this.onHandleChange(target.value, 'instruction')
+              <WangEditor
+                pageType='detaileditor'
+                setEdittext={(text) => {
+                  this.onHandleChange(text, 'instruction')
                 }}
-                placeholder={'请输入'}
-                maxLength={500}
-                type='textarea'
-                showCount
-                autoSize
+                width='520px'
+                text={this.state.model.instruction}
               />
             </FormItem>
           </Form>

src/components/knockGold/mobileCmponent.jsx

@@ -53,7 +53,10 @@ export default ({ data }) => {
             </div>
             <div className='content'>
               <h3>使用规则</h3>
-              {<p>{data.instruction}</p>}
+              <div
+                dangerouslySetInnerHTML={{
+                  __html: data.instruction
+                }}></div>
             </div>
           </>
         ) : (

src/components/knockGold/wangEditor.jsx

@@ -0,0 +1,54 @@
+import React from 'react'
+import Editor from 'wangeditor'
+export default class wangeditor extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      editorHtml: ''
+    }
+  }
+  componentDidMount() {
+    let self = this
+    const editor = new Editor('#wangeditorDom')
+    this.setState({ editor })
+    editor.config.colors = ['#696969', '#9093a2', '#fgddbb', '#e3e7eb']
+    editor.config.pasteText = true
+    // 设置编辑区域高度为 500px
+    editor.config.height = 200
+    editor.config.menus = [
+      'bold',
+      'foreColor',
+      'italic',
+      'indent',
+      'link',
+      'justify'
+    ]
+
+    // 注意，先配置 height ，再执行 create()
+    // 注意，先配置 height ，再执行 create()
+    editor.config.onchange = function (newHtml) {
+      var text = editor.txt.text()
+      if (text.length == 0) {
+        //没有文字
+        self.props.setEdittext('')
+      }
+      if (text.length > 500) {
+        let str = text.slice(0, 500)
+        self.setState({ editorHtml: str })
+        editor.txt.html(str)
+        self.props.setEdittext(str)
+        return
+      }
+      self.setState({ editorHtml: newHtml })
+      self.props.setEdittext(newHtml)
+    }
+
+    editor.create()
+    //列表悬浮富文本
+    editor.txt.html(this.props.text)
+  }
+
+  render() {
+    return <div id='wangeditorDom' style={{ width: this.props.width }}></div>
+  }
+}