React Antd embedded Baidu Editor (CSS loading is not the problem, ' offsetwidth ' of NULL)

Have seen a few similar articles before, thinking that embedding will not encounter too many pits

Results... The others do not say, first to describe the process of jumping pits

Define the Ueditor.js class first, which is similar to the online version

Import React, {Component} from ' React '; require ('.. /..       /utils/ueditor/ueditor.config.js '); Require ('.. /.. /utils/ueditor/ueditor.all.min.js '); require ('. /..    /utils/ueditor/lang/zh-cn/zh-cn.js '), class Ueditor extends component{constructor (props) {super (props);    Console.log (' props '); Console.log (props);    This.state = {' id ': props.id, ' height ': props.height, ' name ': Props.name, ' value ': props.content,};  Console.log (' state '); Console.log (this.state); } componentdidmount () {this.initeditor ()} componentwillunmount () {///component is unloaded, clear the drop-in ID ue.deleditor (this.props.  ID);    } initeditor () {Const ID = this.state.id;    Const Ueeditor = Ue.geteditor (This.state.id, {initialframeheight:500});    Const SELF = this;        Ueeditor.ready ((ueditor) = {if (!ueditor) {ue.deleditor (ID);      Self.initeditor ();  }    });    } render () {return (<script id={this.state.id} name={this.state.name} type= "Text/plain" >        {props.content} </script>)}}export default ueditor; 

It's important to note that

Import React, {Component} from ' React ';

This should be noted, if written as import React, Component from ' React '; It could be an error.

And then it's called in the component.

Import Ueditor from './ueditor.js '; <ueditor content={this.state.content} name= "Content" id= "content" height= "200"/ >

According to the online statement put in, a run, a face, reported that some CSS,JS files can not be loaded ...

Open Ueditor/ueditor.config.js File

  /**     * Configuration item body. Note that all configuration involving paths here does not omit the URL variable.     */    window. Ueditor_config = {        //Add a path to the editor instance, this cannot be commented        Ueditor_home_url:url ...        

I'm not sure how to load a static resource file directly with react, so I've got a site that threw the ueditor bag in.

Ueditor_home_url: "http://www...com/ueditor/"

First in the Web Access, to ensure that static resources can be directly accessed, and then refresh can be loaded out of Baidu editor

Feeling successful half, next is the bitter force of the binding data!!!

is actually a function,

Ue.geteditor (' content '). GetContent ()

There is a hole in it, that is, if the corresponding content is not, or other name, it will continue to report

I have always broken the casserole and asked the end,

If you are in source code Console.log (c), it is null!!! The normal situation is a large section of the current page of the Baidu Editor instance HTML code, how to determine the variable is not content is what?

So want to slap yourself, why use remark,

Console.log (Ue.geteditor (' remark '). GetContent ());

Sure enough, the output will have value, the submission of the form before the value of the submitted data will be OK!

React Antd embedded Baidu Editor (CSS loading is not the problem, ' offsetwidth ' of NULL)