zoukankan      html  css  js  c++  java
  • 契合 antd的富文本编辑器braft-editor 使用实例

    import '../../../../braft-editor/dist/index.css'
    import React from 'react'
    import BraftEditor from 'braft-editor'
    
    export default class Editor1 extends React.Component {
    	state = {
    		// 创建一个空的editorState作为初始值
    		editorState: BraftEditor.createEditorState(null)
    	}
    
    	async componentDidMount() {
    		var _self = this
    		this.setState({
    			editorState: BraftEditor.createEditorState(this.props.val)
    		})
    	}
    	render() {
    		const { editorState } = this.state
    		const controls = [
    			'undo', 'redo', 'separator',
    			'font-size', 'line-height', 'letter-spacing', 'separator',
    			// 'text-color', 'bold', 'italic', 'underline', 'strike-through', 'separator',
    			// 'superscript', 'subscript', 'remove-styles', 'emoji', 'separator', 'text-indent', 'text-align', 'separator',
    			// 'headings', 'list-ul', 'list-ol', 'blockquote', 'code', 'separator',
    			// 'link', 'separator', 'hr', 'separator',
    			// 'media', 'separator',
    			// 'clear'
    		]
    
    		return (
    			<div style={{  this.props.width, height: this.props.height || '100px', display: 'inline-block', margin: "40px 10px 10px -115px", lineHeight: '24px' }} >
    				<BraftEditor
    					defaultValue={this.props.val}
    					value={editorState}
    					onChange={this.handleChange}
    					controls={controls}
    					onSave={this.submitContent}
    				/>
    			</div>
    
    		)
    	}
    	handleChange = (editorState) => {
    		const htmlString = editorState.toHTML()
    		this.setState({ editorState: editorState }, () => {
    			this.props.onChange(htmlString)
    		})
    	}
    }
    
    # 使用npm安装
    npm install braft-editor --save

     还有一个index.css 引入地址 :https://github.com/margox/braft-editor

  • 相关阅读:
    课题论文之调研--贝叶斯网络
    Android开发--数据存储之数据库操作
    Android开发--数据存储之File文件存储
    ROS常用命令
    CMakeLists.txt实例运用(入门)
    乐视三合一奥比中光Orbbec Astra Pro在ROS中配置显示RGB、深度、IR图像的两种思路
    VTK显示CT图像视图
    手眼标定
    并联机器人位姿解算
    信息物理融合CPS
  • 原文地址:https://www.cnblogs.com/xiaoyaoweb/p/10412917.html
Copyright © 2011-2022 走看看