React 版本的真開箱即用的富文本編輯器

這篇文章推薦的react 版的富文本編輯器名字叫做wysiwyg，第一時間你可能覺得這個名字起的很爛，很難記，但是當你知道它的全稱后就很好記了，全稱為 What you see is what you get(所見即所得)。這個富文本編輯器是偶然在掘金上看到的，宣傳上主打開箱即用，在用過后，確實基本能做到開箱即用，基本下載后，不需要進行什么配置。

Github文檔地址

官方Demo地址

import React, { Component } from 'react' import { EditorState, convertToRaw } from 'draft-js'; import { Editor } from 'react-draft-wysiwyg'; import draftToHtml from 'draftjs-to-html'; import htmlToDraft from 'html-to-draftjs'; export default class RichTextEditor extends Component {state = {editorState: EditorState.createEmpty(), //構建一個初始化狀態的編輯器 + 內容 }onEditorStateChange = (editorState) => {this.setState({editorState,});};//在父組件中通過ref調用該方法獲得轉義之后的帶html標簽的文字getRichText=()=>{return draftToHtml(convertToRaw(this.state.editorState.getCurrentContent())) //返回轉化為html文本的文本信息}//富文本編輯器回顯數據setRichText = (html) => {const contentBlock = htmlToDraft(html);if(contentBlock){const contentState = ContentState.createFromBlockArray(contentBlock.contentBlocks);const editorState = EditorState.createWithContent(contentState);this.setState = ({editorState});}}render() {const { editorState } = this.state;return (<div><EditoreditorState={editorState}// wrapperClassName="demo-wrapper" //最外側容器類名// editorClassName="demo-editor" //編輯區域類名onEditorStateChange={this.onEditorStateChange}editorStyle={{border: '1px solid slategrey',paddingLeft:'10px',lineHeight:'10px',minHeight:'200px'}}/>{/* <textareadisabledvalue={draftToHtml(convertToRaw(editorState.getCurrentContent()))}/> */}</div>);} }

父組件中調用：

//創建ref richTextEditor = React.createRef();//需要時使用 let richText = this.richTextEditor.current.getRichText();//回顯數據時調用this.richTextEditor.current.setRichText(detail);//renderf()方法中引用組件 <RichTextEditor ref={this.richTextEditor}/>

總結

以上是生活随笔為你收集整理的React 版本的真开箱即用的富文本编辑器wysiwyg的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。