react-native-zss-rich-text-editor icon indicating copy to clipboard operation
react-native-zss-rich-text-editor copied to clipboard

Editor auto height

Open exhibition315 opened this issue 7 years ago • 2 comments

If I put the RichTextEditor into scrollview without height, there is no editor be shown. Is any possible to make editor height automatically base on content?

My code snip:

<ScrollView>
    // other components
    <RichTextEditor 
        initialContentHTML="some html content"
        style={{flex:1}}
    />
</ScrollView>

exhibition315 avatar Dec 11 '18 10:12 exhibition315

@exhibition315 Have you solved the problem?I have the same problem

JLHuu avatar Jan 02 '19 08:01 JLHuu

I solved this.

  1. open "editor.html " and edit this function.
function setHTML(editorId, html) {
				var editor = $('#' + editorId);
				editor.html(html);

				var div = document.getElementById('zss_editor_content');
				var clientHeight = div.clientHeight;
				// alert(clientHeight);
				WebViewBridge.send(JSON.stringify({type: 'GET_CONTENT_HEIGHT', data:clientHeight}));

			}

this code means that get the height and send it when setHTML (you can send the height any time you want )

  1. open RichTextEditor and edit this function
onBridgeMessage(str){
    try {
      const message = JSON.parse(str);

      ...other code

-----new------
        case messages.GET_CONTENT_HEIGHT: {
          this.props.onContentHeight && this.props.onContentHeight(message.data);
          break;
        }
-----new------
      }
    } catch(e) {
      // alert('NON JSON MESSAGE');
    }
  }

this code means get the height and callback it.

3.use props

<RichTextEditor
                        ref={(r)=>this.richtext = r}
                        style={{alignItems:'center', justifyContent: 'center', backgroundColor: 'transparent',width:width}}
                        initialContentHTML={item.attributes.content}
                        hiddenTitle={true}
                        onContentHeight={(height)=>{
                            // alert('onContentHeight:'+height);
                            this.articleData.changeArticleContentHeight(height);
                        }}
                    />

I think you know how to do it. You get the height now, so you just update the height of RichTextEditor.

My English is not good . I wish this can help you.

ChenTianSaber avatar Jan 28 '20 09:01 ChenTianSaber