如何在pell富编辑器中插入本地表情图片且不使用内置工具栏？

问题根因 #

你之前调用失败主要有两个核心问题：

• insertImage的参数顺序传错：pell内置的insertImage方法第二个参数是图片alt属性值，不是内联样式，你把样式写到第二个参数会导致属性设置异常
• 本地图片相对路径直接硬编码在方法里，项目打包后静态资源路径会发生变化，无法正确加载图片资源

解决步骤 #

1. 先正确引入本地表情资源 #

根据你使用的前端框架，先把本地图片作为静态资源引入，避免打包后路径失效：

// React 项目引入示例
import emoji1f602 from './1f602.png'
// Vue 项目引入示例
const emoji1f602 = require('./1f602.png')

2. 修正insertImage方法调用 #

如果要使用pell内置方法，调整参数顺序即可，表情样式可以后续统一通过CSS控制：

// 内置方法调用，样式可通过 .pell-content img 选择器全局统一设置
editorRef.current?.insertImage(
  emoji1f602,
  '表情' // 第二个参数为alt属性值
)

3. 更灵活的手动插入方案（推荐用于表情场景） #

如果需要自定义图片的内联样式、类名等属性，可以直接基于contenteditable的原生选区能力插入DOM，不受内置方法限制：

const insertEmoji = (emojiSrc) => {
  const editor = editorRef.current?.content // 获取pell的可编辑内容DOM节点
  if (!editor) return
  // 聚焦编辑器，保证插入位置为当前光标所在位置
  editor.focus()
  const selection = window.getSelection()
  const range = selection.getRangeAt(0)
  // 创建自定义表情图片节点
  const img = document.createElement('img')
  img.src = emojiSrc
  img.style.width = '64px'
  img.style.height = '64px'
  img.alt = '表情'
  // 插入图片到光标位置
  range.deleteContents()
  range.insertNode(img)
  // 将光标移动到插入的图片后方
  range.setStartAfter(img)
  range.collapse(true)
  selection.removeAllRanges()
  selection.addRange(range)
}

// 选中表情后调用方法传入对应资源地址即可
insertEmoji(emoji1f602)

内容的提问来源于stack exchange，提问作者SMhd Asadi