рендеринг SummerNote вставлять твит - PullRequest
0 голосов
/ 21 сентября 2019

У меня есть твит. Я хочу показать его, как встроить твит на свой веб-сайт, но всякий раз, когда я вставляю твит для вставки в летнюю заметку, выполняется рендеринг другого типа следующим образом.

Исходный код для вставки

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

Кто-нибудь знает об этом?

1 Ответ

0 голосов
/ 21 сентября 2019

Это не проблема 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') - это содержимое было преобразовано с помощью внешнего сценария, ...

...