Добавить контейнер div вокруг iFrame TinyMCE

Question

Я разрешаю своим пользователям добавлять встроенные видео YouTube через редактор TinyMCE. Я знаю, что содержимое WYSIWYG входит в отзывчивый веб-сайт, я хочу автоматически обернуть его в обтекателе видео ширины жидкости (https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php).

Итак, у нас есть встроенный iframe. Я хочу обернуть это в div class = videoWrapper. Кажется, я не могу найти, как я могу обернуть существующий контент. Заранее спасибо.

Answer 1

Есть два вопроса, которые будут меняться, как вы можете это сделать ...

1. В какой момент вы должны иметь это <div> на месте?
   • Должно ли это произойти при вставке содержимого?
   • Можете ли вы выполнить эту работу, когда вы идете сохранить контент?
2. Каким образом люди могут вставлять эти видеоданные?
   • У вас есть пользовательский интерфейс для этого?
   • Вы полагаетесь на диалог TinyMCE Insert Media?
   • Другое?

Для решения пункт # 1 выше:

Если вам не нужно, чтобы добавить это в данный момент содержание добавляется вы всегда можете добавить это когда содержимое отправляется на сервер для место хранения. Вы можете ходить по DOM и искать метки-релиз и обернуть их в <div>. Это, скорее всего, самый простой подход, поскольку вы делаете это только при сохранении контента и его выполнении на сервере, который является более контролируемой средой. Это также заставит людей использовать просмотр кода и удалить вашу обертку <div> в последующем сеансе редактирования.

Если вы должны добавить вещи на лету, то пункт # 2 становится важным ...

Если у вас есть только один способ добавить , то вы можете посмотреть на то, как они делают это и посмотреть, если этот подход запускает любое событие (ы), которое вы можете использовать для уведомления (например, есть события для пасты, keyup и т. д.). Если есть несколько способов добавить эти данные (Insert Media, copy/paste, code view и т. Д.), То будет довольно сложно найти события, которые работают для всех этих возможных подходов.

Примечание:Не все TinyMCE плагины пожарах за все, что они делают, так что вы не можете найти событие, которое вы можете поймать прямо, когда содержание вводится независимо от того, как его добавили.

Если это так, вы можете использовать один из общих событий TinyMCE (например,«Изменение») и искать развернутые тегов в то время:

tinymce.init({ 
    selector: '#myTextarea', 
    setup: function (editor) { 
    editor.on('change', function() { 
     //Update the DOM here 
    }); 
    } 
}) 

Встроенный редактор событиях документированных здесь: https://www.tinymce.com/docs/advanced/events/