span赋值富文本_教程42——富文本编辑器的原理（项目）

完整版项目的代码链接：

https://github.com/lyandzao/note/tree/master/react/react-tuts/react-admin/src​github.com

mock 数据：

知乎 - 安全中心​rap2.taobao.org

wangEditor - 轻量级web富文本编辑器：

https://gitee.com/huhuachuan/wangEditor​gitee.com

安装：

npm i wangeditor -S

教材的话，例子版本旧了，就不按老版本的案例走了，所以看着官方文档来写。

Edit.js：

import React, { Component } from 'react'

import{
    Card,
    Button,
    Form,
    DatePicker,
    Input
} from 'antd'
import './edit.less'


const formItemLayout = {
  labelCol: {
    span: 4
  },
  wrapperCol: {
    span: 16
  }
}

const config = {
    rules: [{ type: 'object', required: true, message: 'Please select time!' }],
}

class Edit extends Component {
    // 提交表单
    handleSubmit = (e) => {
        // console.log(e)
        e.preventDefault()
        this.props.form.validateFields((err,values) => {
            if(!err){
                console.log('Received values of form: ', values)
            }
        })
    }

    render() {
        console.log(Form);     
        return (
            <Card
              title="编辑文章"
              bordered={false}
              extra={<Button>取消</Button>}
            >
                <Form
                    onSubmit={this.handleSubmit}
                    {...formItemLayout}
                >
                    <Form.Item
                        name="note"
                        label="标题："
                        rules={[{
                            required: true,
                            message: "标题不能为空"
                        }]}>
                        <Input />
                    </Form.Item>
                    <Form.Item
                        name="note"
                        label="作者："
                        rules={[{
                            required: true,
                            message: "作者不能为空"
                        }]}>
                        <Input />
                    </Form.Item>
                    <Form.Item
                        name="note"
                        label="阅读量："
                        rules={[{
                            required: true,
                            message: "阅读量不能为空"
                        }]}>
                        <Input placeholder="0" />
                    </Form.Item>

                    <Form.Item name="date-picker" label="创建时间" {...config}>
                        <DatePicker showTime placeholder="选择时间" />
                    </Form.Item>

                    <Form.Item name={['user', 'introduction']} label="Introduction">
                        <Input.TextArea />
                    </Form.Item>

                    <div ref={this.editoeRef}>这里是内容...</div>

                    <Button type="primary" htmlType="submit">
                        保存修改
                    </Button>
                </Form>
            </Card>
        )
    }
}

export default Edit

request 文件下的 index.js：

import axios from 'axios'
import { message } from 'antd'
const isDev = process.env.NODE_ENV === 'development'

const service = axios.create({
  baseURL: isDev ? 'http://rap2api.taobao.org/app/mock/176929' : ''
})

//请求拦截器

service.interceptors.request.use((config) => {
  config.data = Object.assign({}, config.data, {
    // authToken: window.localStorage.getItem('authToken')
    authToken: 'itisatokenplaceholder'
  })
  return config
})

service.interceptors.response.use((resp) => {
  if (resp.data.code === 200) {
    return resp.data.data
  } else {
    // 全局处理错误
    message.error(resp.data.errMsg)
  }
})


// 获取文章列表
export const getArticles = (offset = 0, limited = 10) => {
  return service.post('/api/v1/articleList', {
    offset,
    limited
  })
}

//通过id删除文章
export const deleteArticleById = (id) => {
  return service.post(`/api/v1/articleDelete`,{id})
}

//通过id获取文章
export const getArticleById = (id) => {
  return service.post(`/api/v1/article/${id}`)
}

结果