react-native-zss-rich-text-editor
react-native-zss-rich-text-editor copied to clipboard
Editor auto height
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 Have you solved the problem?I have the same problem
I solved this.
- 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 )
- 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.