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

How to Insert image

Open vishai12345 opened this issue 7 years ago • 8 comments

## I have tried all the way to insert image in editior ,but its not showing image after inserting and not giving any error too Plz help it have been couple of days of doing this

My code is

onPressAddImage={() => { ImagePicker.openPicker({ width: 300, height: 300, }).then((image) => { console.log(image); this.richtext.insertImage({ src: image.path, width:200, height:200 }); }).catch((error) => { console.log(There has been a problem with your fetch operation: ${error}); }); }}

vishai12345 avatar Apr 30 '18 13:04 vishai12345

when I am inserting a remote image then it works fine but when i am inserting local image path (react-native-crop-image-picker : image.path or image.uri or image.sourceURL) it does not insert image ,it just shows blank

vishai12345 avatar May 01 '18 16:05 vishai12345

when I uploaded my app to testflight, image didn't show up when user picking the images from album, but local is work

tzurae avatar May 04 '18 09:05 tzurae

@vishai12345 - I am also having the same issue, did you find any solution?

kantharia avatar May 21 '18 02:05 kantharia

@vishai12345 - You can configure ImagePicker to get base64 of the selected image, and then you can insert an image in richtext.

ImagePicker.openPicker({
      includeBase64: true,
      compressImageQuality: 0.5
    })
    .then(image => {
      let imageSrc = `data:${image.mime};base64,${image.data}`;
      this.richtext.insertImage({ src: imageSrc });
    });

kantharia avatar May 23 '18 09:05 kantharia

Did the same as @kantharia, but the image is not shown up on the screen. Remote image works well. Any idea?

oferRounds avatar Apr 15 '19 11:04 oferRounds

Actually remote image doesn’t work as well (it used to work back then when I tested it)

oferRounds avatar Apr 15 '19 11:04 oferRounds

Ok, I see the issue. It happens if the focus on the field was not set in advanced

oferRounds avatar Apr 15 '19 11:04 oferRounds

@vishai12345 - You can configure ImagePicker to get base64 of the selected image, and then you can insert an image in richtext.

ImagePicker.openPicker({
      includeBase64: true,
      compressImageQuality: 0.5
    })
    .then(image => {
      let imageSrc = `data:${image.mime};base64,${image.data}`;
      this.richtext.insertImage({ src: imageSrc });
    });

This worked for me, thanks.

HemantRMali avatar Nov 10 '20 08:11 HemantRMali