2

I created a plugin that allows for the embedding of iframes. The iframe is wrapped with a <div> that uses Bootstrap's ratio classes to keep everything responsive to an acceptable degree. The problem I'm having is that if you add content after this embed, the editor is automatically assuming you want to reuse <div class="ratio ratio-16x9"> as the tag for the next paragraph. Is there a way to indicate to TinyMCE that the next paragraph should return to using a <p> tag?

Here's what the editor is displaying if I show source code:

<div class="embed-container" style="max-width: 600px;">
<div class="ratio ratio-16x9"><iframe src="https://www.youtube.com/embed/jfKfPfyJRdk" allowfullscreen="allowfullscreen" data-mce-fragment="1"></iframe></div>
<div class="ratio ratio-16x9">Lorem ipsum dolor sit amet</div>
</div>

Here is a copy of the script I built for handling the insertion of content in case that helps.

function embedIframe(button,editor) {
    let frame = $(button).closest('.modal-content').find('iframe').contents();
    if (frame.find('#url').val() == '') {
        return;
    }
    
    let embed = '<div class="ratio ratio-'+frame.find('#ratio').val()+'">'+
        '<iframe src="'+parseUrl(frame.find('#url').val())+'" allowfullscreen></iframe>'+
        '</div>';
    
    if (frame.find('#maxwidth').val()) {
        embed = '<div class="embed-container" style="max-width:'+frame.find('#maxwidth').val()+'px">'+embed+'</div>';
    }
    
    Joomla.editors.instances[editor].replaceSelection(embed);
};

function parseUrl(url) {
    if (url.includes('iframe')) {
        url = url.match(/<iframe[^>]* src="([^"]*)"/)[1];
    }
    if (url.includes('youtube')) {
        url = 'https://www.youtube.com/embed/'+url.match(/^.*(youtu.be\/|v\/|embed\/|watch\?|youtube.com\/user\/[^#]*#([^\/]*?\/)*)\??v?=?([^#\&\?]*).*/)[3]
    } else if (url.includes('vimeo')) {
        url = 'https://player.vimeo.com/video/'+url.match(/^(?:https?:\/\/(?:[\w]+\.)*vimeo\.com(?:[\/\w:]*(?:\/videos)?)?\/([0-9]+)[^\s]*)/)[1]
    }
    return url;
}
6
  • Are you able to share the plugin code or part thereof? Is there a reason why you are unable to just embed the iframe using <iframe>?
    – Dtorr1981
    Nov 3, 2022 at 19:58
  • You can enable Iframes in TinyMCE within the plugin settings. By default, Iframes are prohibited. Delete 'iframe' under Prohibited Elements and see if that helps.
    – Dtorr1981
    Nov 3, 2022 at 20:06
  • The problem isn't so much that the editor is stripping out the iframe, it's that whatever content I add after adding the iframe uses the same classes and element as the iframe.
    – Chaosxmk
    Nov 4, 2022 at 13:10
  • I see you're trying to embed Youtube/Vimeo videos with the iFrame plugin. Have you looked at the plugins OSyoutube/OSvimeo or OSEmbed by Joomlashack? I guess I'm not really understanding the purpose of the plugin.
    – Dtorr1981
    Nov 6, 2022 at 21:19
  • 1
    FYI: The following regex patterns can be simplified: [\w] -> \w, [0-9] -> \d, [^#\&\?] -> [^#&?], [^\s] -> \S. Also, technically, youtu.be should be youtu\.be and youtube.com should be youtube\.com. Finally, rather than declare three capture groups, make the first two non-capturing (?: ... ), then only make the third a capturing group ( ... ), then access it via [1] instead of [3]. Nov 6, 2022 at 22:34

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.