BRAFT EDITOR富文本編輯器

https://braft.margox.cn/demos/basic     官方文檔

import React from 'react' import Uploading from '../Upload/index' // import FuWenBen from '../fuwenben/index' import { Form, Input, Button, AutoComplete, Radio, Card, Dropdown, Menu, Icon, message } from 'antd'; import Axios from 'axios' import './index.scss' import { Link } from 'react-router-dom' import { rule } from 'postcss'; import { inject, observer } from 'mobx-react' // 引入編輯器以及EditorState子模塊 import BraftEditor from 'braft-editor' // 引入編輯器樣式 import 'braft-editor/dist/index.css' import { getArticleContentById } from '@/api/content' import { router } from 'sw-toolbox'; const { TextArea } = Input; const FormItem = Form.Item; const RadioGroup = Radio.Group; let timer; @inject('editStore') @observer class EditForm extends React.Component { constructor(props) { super(props) this.state = { searchParams: {}, editorState: '', // 設置編輯器初始內容 outputHTML: '<p></p>', imageUrl: '', biaoqian: '', isShow: false, id:'' } } changeImg = (url) => { this.setState({ imageUrl: url, isShow: false }) } handleSubmit = (e) => { e.preventDefault(); const { editorState } = this.state; let submitData = {} this.props.form.validateFields((err, values) => { if (!this.state.imageUrl.length) { this.setState({ isShow: true }) return } if (!err) { submitData = { title: values.title, zhaiyao: values.zhaiyao, image: this.state.imageUrl, biaoqian: values.biaoqian, content: values.content.toHTML()// or values.content.toHTML() } } }) if (this.props.type == 'contentAdd') { this.props.newAddArticleContent(submitData) } else if (this.props.type == 'contentEdit') { this.props.updateArticleContent(submitData) } clearInterval(timer) } getContentById = () => { let { searchParams } = this.state searchParams = { id: this.props.id } getArticleContentById(searchParams).then( res => { if (res.data.code == 200) { this.props.form.setFieldsValue({ title: res.data.data.title, zhaiyao: res.data.data.brief, content: BraftEditor.createEditorState(res.data.data.content) }) this.setState({ imageUrl: res.data.data.imagePath, biaoqian: String(res.data.data.articleTag), isShow: false }) this.props.editStore.editTitle(res.data.data.title) } } ).catch( err => { } ) } // look=()=>{ // this.props.editStore.previewArr(this.props.publishCode) // } componentDidMount() { if(this.props.id){ this.getContentById() } // timer=setInterval(() => { // let submitData = {} // this.props.form.validateFields((err, values) => { // if (!this.state.imageUrl.length) { // this.setState({ // isShow: true // }) // return // } // if (!err) { // submitData = { // title: values.title, // zhaiyao: values.zhaiyao, // image: this.state.imageUrl, // biaoqian: values.biaoqian, // content: values.content.toHTML()// or values.content.toHTML() // } // } // }) // console.log(submitData) // if (this.props.type == 'contentAdd') { // this.props.newAddArticleContent(submitData) // } else if (this.props.type == 'contentEdit') { // this.props.updateArticleContent(submitData) // } // }, 5000) } componentWillReceiveProps(nextProps){ this.setState({ id:nextProps.id }) } render() { const { setPreviewType } = this.props const { getFieldDecorator } = this.props.form; const { editorState, outputHTML } = this.state const formItemLayout = { labelCol: { xs: { span: 24 }, sm: { span: 6 }, }, wrapperCol: { xs: { span: 24 }, sm: { span: 16 }, }, }; return ( <div> <Form onSubmit={this.handleSubmit} className='container333'> <FormItem label="請輸入主標題:" {...formItemLayout} > {getFieldDecorator('title', { rules: [{ required: true, message: '請輸入主標題名稱', }] })( <Input placeholder="請輸入主題" /> )} </FormItem> <FormItem label="摘要:" {...formItemLayout} > {getFieldDecorator('zhaiyao', { rules: [{ required: true, message: '限制200個字', }], })( <TextArea placeholder="限制200個字" autosize={{ minRows: 5, maxRows: 5 }} /> )} </FormItem> <FormItem label="封面圖片:" {...formItemLayout} > {/* {getFieldDecorator('image', { rules: [{ required: true, message: '請上傳封面圖片', }] })( */} <div> {this.state.imageUrl ? <Uploading changeImg={this.changeImg} imageUrl={this.state.imageUrl} /> : null} {this.state.imageUrl ? null : <Uploading changeImg={this.changeImg} />} </div> {/* )} */} </FormItem> {this.state.isShow ? <p style={{marginLeft:'25%',marginTop:'-2%',color:'red'}}>請上傳封面圖片</p> : null} <FormItem label="文章標籤:" {...formItemLayout} > {getFieldDecorator('biaoqian', { initialValue: this.state.biaoqian })( <RadioGroup name="radiogroup" > <Radio name='feel' value={'1'} >new</Radio> <Radio name='feel' value={'2'} >hot</Radio> </RadioGroup> )} </FormItem> <FormItem label="內容編輯器:" {...formItemLayout} > {getFieldDecorator('content', { validateTrigger: 'onBlur', rules: [ { required: true }, { validator: (rule, value, callback) => { if (value.isEmpty()) { callback('請輸入正文內容') } else { callback() } } } ] })( // <FuWenBen/> <BraftEditor height={0} controls={ [ 'undo', 'redo', 'split', 'font-size', 'font-family', 'line-height', 'letter-spacing', 'indent', 'text-color', 'bold', 'italic', 'underline', 'strike-through', 'superscript', 'subscript', 'remove-styles', 'emoji', 'text-align', 'split', 'headings', 'list_ul', 'list_ol', 'blockquote', 'code', 'split', 'link', 'split', 'hr', 'split', 'media', 'clear' ] } fontFamilies={ [ { name: '宋體', family: '"宋體",sans-serif' }, { name: '黑體', family: '"黑體",serif' }, { name: '隸書', family: '隸書' }, { name: '微軟雅黑', family: '微軟雅黑' }, { name: '楷體', family: '楷體' }, { name: 'Impact', family: 'Impact,Charcoal' }, { name: 'Monospace', family: '"Courier New", Courier, monospace' }, { name: 'Tahoma', family: "tahoma, 'Hiragino Sans GB', sans-serif" }] } media={{ uploadFn: (info) => { let formData = new window.FormData() formData.append('file', info.file, info.file.name) Axios({ headers: { 'Content-Type': 'multipart/form-data' }, method: 'post', data: formData, url: 'http://192.168.5.14:8081/node/file_upload' }).then(res => { if (res.data.code === 200) { let imgurl = res.data.result[0].photoBig let imgObj = { data: { link: 'http://192.168.5.14:8081/' + imgurl } } info.success({ url: imgObj.data.link // meta: { // id: 'xxx', // title: 'xxx', // alt: 'xxx', // loop: true, // 指定音視頻是否循環播放 // autoPlay: true, // 指定音視頻是否自動播放 // controls: true, // 指定音視頻是否顯示控制欄 // poster: 'http://xxx/xx.png', // 指定視頻播放器的封面 // } }) } else { } }, err => { }) } }} /> )} </FormItem> <div className='footer11'> <div className='footer-right'> 每5分鐘保存一次 </div> </div> <div className='footerbox'> <Button type='primary' size='large' htmlType="submit" style={{ marginRight: 10, marginLeft: 10 }} className='save'>保存</Button> <Button type='primary' size='large' onClick={this.look}><Link to={{pathname: '/home/preview',state:{id:this.state.id,type:'article',publishCode:this.props.publishCode}}}>預覽</Link></Button> </div> </Form> </div> ) } } const WrappedEditForm = Form.create()(EditForm); export default WrappedEditForm