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

The Editor works fine in iOS but Android didn't work

Open JohnHour89 opened this issue 8 years ago • 16 comments

Hi, Sir, I was able to use the editor and the toolbar actions works well in iOS platform but it doesn't work in Android (The content also didn't display in the editor on Android). Please help to rectify this issue. Thank you. Below is the screenshot of use your editor in the app:

in iOS: screen shot 2017-08-16 at 11 20 03 am

in Android:

screen shot 2017-08-16 at 11 20 56 am

JohnHour89 avatar Aug 16 '17 03:08 JohnHour89

style issue, try something like this

render() {
    return (
      <View style={this.getStyle('container')}>
        <RichTextEditor
          ref={(r)=>this.richtext = r}
          style={[this.getStyle('richText'), this.props.editorStyle]}
          contentInset={{right: 0, left: 0}}
          bounces={false}
          hiddenTitle={true}
          enableOnChange={true}
          contentPlaceholder={this.props.placeholder}
          initialContentHTML={this.state.value}
          editorInitializedCallback={() => this.onEditorInitialized()}
          />
        <View style={[this.getStyle('toolbar'), this.props.toolbarStyle]}>
          <RichTextToolbar
            getEditor={() => this.richtext}
            />
        </View>
        <KeyboardSpacer/>
      </View>
    );
  },

  defaultStyles: {
    container: {
      flex: 1,
      backgroundColor: '#ffffff',
    },
    richText: {
      alignItems:'center',
      justifyContent: 'center',
      backgroundColor: 'transparent',
      marginTop: 60
    },
    toolbar:{
      position: 'absolute',
      top: 0,
      left: 0,
      right: 0
    }
  },

phuongpt avatar Aug 16 '17 05:08 phuongpt

Sorry, I didn't put my code here, actually I got try your code and change a little bit but it is still the same show nothing here on editor in Android platform. This is my previous code:

render() {
    return (
        <View style={styles.editorContainer}>
            <RichTextEditor
              ref={(r)=>this.richtext = r}
              style={styles.richText}
              initialTitleHTML={'Title!!'}
              initialContentHTML={'Hello <b>World</b> <p>this is a new paragraph</p> <p>this is another new paragraph</p>'}
              editorInitializedCallback={() => this.onEditorInitialized()}
          />
            <RichTextToolbar
              getEditor={() => this.richtext}
              actions={defaultActions}
              iconTint='black'
              selectedButtonStyle={{backgroundColor:'yellow'}}
            />
      </View>
  );
},

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-start',
    alignItems: 'stretch',
  },
richText: {
    alignItems:'center',
    justifyContent: 'center',
    backgroundColor: 'transparent',
  },

JohnHour89 avatar Aug 16 '17 06:08 JohnHour89

Do you think that it is style issue? If it is why can display in iOS but cannot display in Android platform?

JohnHour89 avatar Aug 16 '17 06:08 JohnHour89

I have realised the packager when running the app it didn't processing the assets which is required in Android whereas in iOS the editor.html it was successfully build:

When running for Android: screen shot 2017-08-17 at 2 03 26 pm

When running for iOS:

screen shot 2017-08-17 at 2 01 52 pm

May I know what is the problem with it? Thank you

JohnHour89 avatar Aug 17 '17 06:08 JohnHour89

How is the version of react-native ?

cizhaoyang avatar Aug 27 '17 08:08 cizhaoyang

@cizhaoyang react-native 0.31.0 and I got try testing on the iphone simulator only the image attachment function is not available.

JohnHour89 avatar Aug 30 '17 03:08 JohnHour89

@JohnHour89 did you ever figure this one out? Seems I have the same problem, it can't find editor.html

nguyenchr avatar Oct 08 '17 03:10 nguyenchr

可能需要你把这个html文件拷贝到android的assets目录下 in english: may be you should copy this html file to android assets dir

lottery2017 avatar Jan 11 '18 09:01 lottery2017

I have this problem, in Android debug works fine, without debug dont work, any fix?

remch1990 avatar Mar 05 '18 13:03 remch1990

For me, I copied editor.html file from the module to android/app/src/main/assets, and then it showed up fine. Not sure why it doesn't do it on its own!

omnikitty avatar May 29 '18 06:05 omnikitty

@omnikitty only you copied the file in that location and it is works? works in android? i have flavors for diferents apps, i have to copy this file in the same location main/assets or in the file of the flavor?

remch1990 avatar May 29 '18 16:05 remch1990

Having the same problem. Have already copied editor.html to android/app/src/main/assets

ethanyuwang avatar May 29 '18 18:05 ethanyuwang

@remch1990 Yep, I just copied it there and it worked in android. I also removed the styling from @phuongpt's suggestion. I don't have different flavors for my app, so not sure how that works. If it doesn't work, try checking to make sure it works in iOS simulator first.

omnikitty avatar May 30 '18 02:05 omnikitty

So FWIW, I had this same problem, and based on this line in the JS source, I realized it was looking for editor.html in android/app/assets rather than in android/app/src/main/assets, which is where the file was put by gradle after following their setup instructions. Once I moved the file to the right place, it worked fine. Strange that this seems to contradict the above suggestions...

steveccable avatar Jul 19 '18 13:07 steveccable

@steveccable Nice catch. I'm not certain, but I think it's because my project doesn't have an android/app/assets folder, so it looks for it in the android/app/src/main/assets instead by default?

omnikitty avatar Jul 23 '18 02:07 omnikitty

Any news on it guys?

MaxInMoon avatar Sep 13 '19 09:09 MaxInMoon