CODEWITHSUNDEEP
react-nativerich-text-editorrte
SMhd Asadi
SMhd Asadi

Reputation: 430

Insert local image to pell rich editor

I want to add some local images(emojis) to pell rich editor component. I don't want to use Rich Toolbar, and have some custom emoji picker to select the emoji.

When user selects an emoji, I want to show an image for that emoji in the rich editor. These images are located locally in the project, so I tried insertImage method but cannot use it properly.

I have used insertImage this way:

editorRef.current?.insertImage(
            './1f602.png',
            'width: 64px; height: 64px',
          )

But it doesn't work.

How can I add a local image to pell rich editor?

Upvotes: 0

Views: 1795

Answers (1)

Varsha Soni
Varsha Soni

Reputation: 11

I solved it like...

import ImgToBase64 from 'react-native-image-base64';
import ImagePicker from "react-native-image-crop-picker";

 openGalleryClickProfile() {
    ImagePicker.openPicker({
      width: 300,
      height: 400,
      cropping: true,
    }).then((image) => {
      console.log("Imagemime", image); 
     this.onPressAddImage(image)
    });
  }

  onPressAddImage(image){
    ImgToBase64.getBase64String(image.path)
    .then((base64String) => {
      const str = `data:${image.mime};base64,${base64String}`
      this.richText.current?.insertImage(
        str
      );
    })
    .catch((err) => {
      console.log("base64:Image:", err)
    })};

Upvotes: 1

Related Questions