完整版項(xiàng)目的代碼鏈接：

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

mock 數(shù)據(jù)：

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

wangEditor - 輕量級(jí)web富文本編輯器：

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

安裝：

npm i wangeditor -S

教材的話，例子版本舊了，就不按老版本的案例走了，所以看著官方文檔來(lái)寫。

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 (<Cardtitle="編輯文章"bordered={false}extra={<Button>取消</Button>}><FormonSubmit={this.handleSubmit}{...formItemLayout}><Form.Itemname="note"label="標(biāo)題："rules={[{required: true,message: "標(biāo)題不能為空"}]}><Input /></Form.Item><Form.Itemname="note"label="作者："rules={[{required: true,message: "作者不能為空"}]}><Input /></Form.Item><Form.Itemname="note"label="閱讀量："rules={[{required: true,message: "閱讀量不能為空"}]}><Input placeholder="0" /></Form.Item><Form.Item name="date-picker" label="創(chuàng)建時(shí)間" {...config}><DatePicker showTime placeholder="選擇時(shí)間" /></Form.Item><Form.Item name={['user', 'introduction']} label="Introduction"><Input.TextArea /></Form.Item><div ref={this.editoeRef}>這里是內(nèi)容...</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' : '' })//請(qǐng)求攔截器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 {// 全局處理錯(cuò)誤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}`) }

結(jié)果

總結(jié)

以上是生活随笔為你收集整理的avue form提交变为不可编辑_教程42——富文本编辑器的原理（项目）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。