插入本地图像以拼写富编辑器答案

【问题标题】：Insert local image to pell rich editor插入本地图像以拼写富编辑器
【发布时间】：2022-07-04 20:45:07
【问题描述】：

我想添加一些本地图像（表情符号）来拼写富编辑器组件。我不想使用 Rich Toolbar，并且有一些自定义表情符号选择器来选择表情符号。

当用户选择一个表情符号时，我想在富编辑器中显示该表情符号的图像。这些图片位于项目本地，所以我尝试了 insertImage 方法但无法正常使用。

我是这样使用 insertImage 的：

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

但它不起作用。

如何将本地图像添加到 pell Rich Editor 中？

【问题讨论】：

标签： react-native rich-text-editor rte

【解决方案1】：

我解决了...

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)
    })};

【讨论】：