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
}

rawContent每次用户输入到编辑器时都是手动保存的-此内容未转换
内容来自$('#blog-summernote').summernote('code')-该内容是由外部脚本转换的，...

summernote渲染嵌入推文

1 个答案: