summernote渲染嵌入推文

Question

我有推文，我想显示它就像在我的网站上嵌入一条推文，但每当我粘贴夏季笔记中的嵌入推文时，它就会呈现为不同的类型，如下所示。

原始嵌入代码

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">It’s all about the details. Now you can rearrange your photos while writing a Tweet. <a href="#">pic.twitter.com</a></p>&mdash; Twitter (@Twitter) <a href="https://twitter.com/Twitter/status/1171560988874891264?ref_src=twsrc%5Etfw">September 10, 2019</a></blockquote>

呈现的代码

<twitter-widget class="twitter-tweet twitter-tweet-rendered" id="twitter-widget-0" style="position: static; visibility: visible; display: block; transform: rotate(0deg); max-width: 100%; width: 500px; min-width: 220px; margin-top: 10px; margin-bottom: 10px;" data-tweet-id="1171560988874891264"></twitter-widget>

有人知道这件事吗？

Answer 1

这不是summernote的问题，这个问题是twitter脚本会在脚本加载时自动将blockquote标签转换为twitter-widget。

因此您必须存储两个版本summernote内容，一个直接在编辑器上预览(已转换为twitter-widget)，另一个原始版本将存储到数据库中。

我使用下面的函数解决了这个问题：

convertTwitterSource(content) {
      let oldTwitterTags = this.rawContent.match(
        /<blockquote .*?>.*?<\/blockquote>/gi
      )

      if (oldTwitterTags) {
        oldTwitterTags.map(tag => {
          content = content.replace(
            /<twitter-widget .*?>.*?<\/twitter-widget>/i,
            tag
          )
        })
      }
      return content
}