收藏
回答

editor中插入的html标签, 使用background-image无效?

尝试在editor中去解析emoji插件的表情数据,但由于emoji是使用雪碧图background-position实现的, 所以每个表情都需要有background-image,尝试在标签上赋值, 发现在editor.setContents()中赋值后, 背景图并不生效。

const parsedComment = this.parseEmoji(this.data.comment);
this.setData({
  parsedComment,
  comment: ''
});
const { html: oldHtml } = await this.editorCtx.getContents();
let comments = '';
parsedComment.forEach(
  (comment) =>
    (comments += `<div style="background-image: url(http://bwx.yiban.cn/static/wechat_emoji/wechat_emoji.png);width: 64px;height: 64px">${comment.imageClass}</div>`)
  // (comments += `<span class="weui-icon_emotion ${comment.imageClass}" style="background-image: url('https://bwx.yiban.cn/static/wechat_emoji/wechat_emoji.png');width: 64px;height: 64px;color: red">${comment.imageClass}</span>`)
);
// console.log(comments);
this.editorCtx.setContents({
  html: `${oldHtml}${comments}`
});

不行

回答关注问题邀请回答
收藏

1 个回答

  • 微喵网络
    微喵网络
    2021-05-25

    只要不是太旧的手机都原生支持直接输入emoji,就像这样😀😁🤣😂😄😅😆😇😍😌😋☺️🙃🙂😊😉😘😙😜😝🤑🤓😎🤗🐶🐱🐭🐹🐰🐻🐼🐨🐵🐙🐸🐽🐷🐮🦁🐯🙈🙉🙊🐒🐔🐧🐦🐤🍏🍎🍐🍊🍋🍌🍉🍇🍅🥑🥝🍍🍑🍒🍈🍓🍆🥒🥕🌶🥔🌽🍠🥜⚽️🏈⚾️🎾🏐🏉🎱🎿🏏🏑🏒🏸🏓🏌⛳️🚗🚕🚙🚌🏎🚓🚑🚒🚔🚨🚲🏍🚜🚛🚚🚐⌚️📱📲💻⌨️🖥🖨🖱🎥📹📸📷📼💿💾💽❤️💔💕💗💖💘✝️✡️♌️♋️♊️♉️♈️⛎☯️🔯🇦🇫🇦🇱🇩🇿🇦🇸🇦🇩🇦🇴🇦🇮🇦🇶🇧🇸🇦🇿🇦🇹🇦🇺🇦🇼🇦🇲🇦🇷🇦🇬,不需要再使用雪碧图这种落后的方式来实现

    2021-05-25
    有用
    回复 7
    • 亨利大帝
      亨利大帝
      2021-05-25
      小程序官方的emoji插件就是以雪碧图实现的,解析函数也是返回该表情的预设class,而这个class里面设置了background-position
      2021-05-25
      回复
    • 微喵网络
      微喵网络
      2021-05-25回复亨利大帝
      手机打开看看,电脑普及率还不高
      2021-05-25
      回复
    • 亨利大帝
      亨利大帝
      2021-05-25
      需要实现的功能是在富文本编辑器内插入并解析出正确的微信表情。而不是在普通的文本内输入一段emoji代码。
      2021-05-25
      回复
    • 微喵网络
      微喵网络
      2021-05-25回复亨利大帝
      别用那个
      2021-05-25
      回复
    • 亨利大帝
      亨利大帝
      2021-05-25回复微喵网络
      需求是要是用微信官方表情库,我刚试过了, 解析后可以使用insertImage来做,就是要一个个表情单独拿出来。
      2021-05-25
      回复
    查看更多(2)
登录 后发表内容