时间戳

首页 > 解决方案 > Summernote 渲染嵌入推文

javascript - Summernote 渲染嵌入推文

问题描述

我有推文，我想像在我的网站中嵌入推文一样显示它，但是每当我将嵌入推文粘贴到夏季注释中时，它都会呈现为不同的类型，如下所示。

原始嵌入代码

<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>

有人知道吗？

标签： javascriptsummernote

解决方案

这不是 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')- 此内容由外部脚本转换，...

推荐阅读