uniapp关于富文本编辑器插入图片对齐问题

Question

关于uniapp使用自带editor富文本编辑器，利用insertImage方法插入表情图片，图片没有和文字基于底部对齐，应该如何处理？

Answer 1

晚上好🌙🌙🌙
本答案参考ChatGPT-3.5

在UniApp中使用内置的富文本编辑器时，如果插入的图片没有按照预期与文字底部对齐，可以通过以下步骤调整图片的样式来实现对齐：

1. 获取编辑器实例： 首先，你需要确保已经正确初始化了富文本编辑器，并获取到它的实例。这通常在onLoad或onReady生命周期钩子函数中完成。

export default {
  onLoad: function() {
    this.editor = uni.createSelectorQuery().select('#editor').get();
  },
}

1. 监听图片插入事件： 注册一个监听器，当图片被插入时，获取图片的节点并设置其样式。

uni.onEvent(this.$page, 'image-inserted', (e) => {
  const imageNode = e.detail.node; // 图片节点
  this.setAlignment(imageNode);
});

1. 设置图片对齐样式： 使用CSS类或者直接操作元素的style属性来设置图片的vertical-align属性为bottom，使其与文字底部对齐。

alignImage: function(imageNode) {
  imageNode.style.verticalAlign = 'bottom'; // 或者使用类名
  // 如果需要兼容性，可以添加 vendor prefix
  imageNode.style.webkitVerticalAlign = 'bottom';
},

1. 调用对齐方法： 在image-inserted事件的回调函数中调用alignImage方法。

alignImage(imageNode);

1. 自定义CSS类： 如果你希望统一处理所有图片的对齐，可以在CSS文件中定义一个类，然后在JavaScript中给图片添加这个类。

.image-bottom-align {
  vertical-align: bottom;
  -webkit-vertical-align: bottom;
}

alignImage(imageNode) {
  imageNode.classList.add('image-bottom-align');
}

这样，插入的图片应该会基于底部对齐了。记得在实际项目中检查是否需要处理不同浏览器的兼容性问题。