search

wxik / react-native-rich-editor

Lightweight React Native (JavaScript, H5) rich text editor
https://wxik.github.io/react-native-rich-editor/web
MIT License
806 stars 303 forks source link

How to make the HTML in webview look the same or very similar to the same HTML in Richtext ? #83

Open tomgiam opened 4 years ago

tomgiam commented 4 years ago

I'm using react-native-webview to view HTML and react-native-pell-rich-editor to edit the same HTML. The problem is that the HTML is rendered differently (i.e. the images are larger and centered, and the zoom is bigger in richText). Any suggestion for how to make them look the same or at least more similar? I'm currently using a workaround where I add and remove some css to adjust font size, zoom etc. At least it looks a little better.

Is there a better way?

karpov-denys commented 3 years ago

I am looking similar thing. Is it possible to turn off editing mode for RichEditor?

karpov-denys commented 3 years ago

Duplicate of #65

tomgiam commented 3 years ago

Thanks, I will try to use the RichEditor with "disabled={true}" instead of webview, for displaying HTML. Hopefully is only disables the editing and not the HTML interaction.

stulip commented 3 years ago

@tomgiam disabled disabled just disable the editing function, if you are not satisfied with the style You can use the custom props editorStyle = {cssText: 'img{ width: '100%'}'} to override the existing style

tomgiam commented 3 years ago

@stulip @karpov-denys I tried removing Webview and only using Richtext, in order to avoid the rendering differences between them, but I have 2 issues with that. 1. I need a way to handle my own URL schemes like I do with WebView using onShouldStartLoadWithRequest. 2. With RichText disabled, the page displays with the top 75% white background and content and the bottom 25% gray background and no content. Any way around that? The fix that I have working in Android does not work in iOS, but it may be just a matter of using different values (I hope).