wix-incubator / react-native-zss-rich-text-editor

React Native rich text editor based on ZSSRichTextEditor
Other
841 stars 310 forks source link

how i can Insert image in ios #74

Closed ignivahermenpreet closed 6 years ago

ignivahermenpreet commented 6 years ago

Please give me any demo how i can insert image.

opensourcekam commented 6 years ago

Just call this but relative image paths aren't working, I'm looking for a work around... this.richText.insertImage({src: 'URL_OF_IMAGE'});

opensourcekam commented 6 years ago

Assuming you're using import ImagePicker from 'react-native-image-crop-picker';

 <RichTextToolbar
          getEditor={() => this.richtext}
          onPressAddImage={() => {
            ImagePicker.openPicker({
              width: 300,
              height: 300,
              cropping: true,
            }).then((image) => {
              console.log(image);
              this.richtext.insertImage({ uri: image.sourceURL, width: 20, height: 20 });
            }).catch((error) => {
              console.log(`There has been a problem with your fetch operation: ${error}`);
            });
          }}
        />
ignivahermenpreet commented 6 years ago

@RobinsonKameron Thanks for reply.

There is no image.sourceURL key in this object. Image is not showing when i use image.path or image.sourceURL. My source code is-

              <RichTextToolbar
                        getEditor={() => this.richtext}
                        onPressAddImage={()=>{
                            ImagePicker.openPicker({
                                width: 150,
                                height: 150,
                                cropping: true,
                                }).then(image => {
                                    console.log(image)
                                    this.richtext.insertImage({ uri: image.path, width: 100, height: 100 });
                                    this.setState({Image:image})
                                }).catch( error => {
                                  console.log('There has been a problem with your fetch operation: ' + error);
                                })

                        }}
                        iconTint='black'
                        selectedButtonStyle={{backgroundColor:'#51671d'}}
                      />

Image picker object { path: '/Users/hermenpreet/Library/Developer/CoreSimulator/Devices/E9FA12CD-A44D- 4600-821E-749FD9028840/data/Containers/Data/Application/4CA552DF-EA0F-42A3-98BB- B1B27F4C6F1B/tmp/react-native-image-crop-picker/5F32CC73-BF9F-4FCC-A9B0- 30268FAEE9BF.jpg', size: 38781, data: null, width: 150, height: 150, mime: 'image/jpeg' }

ignivahermenpreet commented 6 years ago

@RobinsonKameron -- I am uploading image on server and given url in this.richtext.insertImage({ src: configs.image_url+result.data, width: 100, height: 100 });

It is working fine. Thankyou

opensourcekam commented 6 years ago

You don’t need to setState after you insert image.

opensourcekam commented 6 years ago

The uploading method should work! Are you sure it’s uploaded when it inserts?