如何修改bootstrap-wysihtml5的iframe src并嵌入Youtube/Vimeo iframe代码

Got it, let's get your wysihtml5 editor working with YouTube and Vimeo iframes, and fix that src modification issue you're facing. Here's a step-by-step solution tailored to your setup:

First off, wysihtml5's default sanitizer blocks iframes for security reasons, which is why your src might be getting altered or stripped. We need to adjust the parser rules to explicitly allow trusted iframe sources (YouTube/Vimeo) and tweak your initialization code accordingly.

Step 1: Update Editor Initialization with Custom Parser Rules #

Modify your existing wysihtml5 setup to include parser rules that whitelist iframes from YouTube and Vimeo. This ensures their src attributes aren't sanitized out:

$('#answer').wysihtml5({
  toolbar: {
    "font-styles": true,
    "emphasis": true,
    "lists": true,
    "html": true,
    "link": true,
    "image": true,
    "color": false
  },
  parserRules: {
    tags: {
      iframe: {
        check_attributes: {
          // Only allow valid YouTube/Vimeo embed URLs
          src: function(url) {
            return /^(https?:\/\/)(www\.)?(youtube\.com\/embed\/|youtu\.be\/|vimeo\.com\/video\/)/.test(url);
          },
          width: 'numbers',
          height: 'numbers',
          frameborder: 'numbers',
          allowfullscreen: 'empty' // Allow the allowfullscreen attribute
        }
      }
    }
  }
});

The regex in the src check ensures only embed-specific URLs are allowed (not regular video page links). This is critical because wysihtml5 will strip any iframe whose src doesn't match this pattern.

Step 2: Fix src Modification Issues #

If your iframe src is still being altered, it’s almost certainly because the sanitizer didn’t recognize the URL as valid. Make sure you’re using the correct embed formats for each platform:

• Valid YouTube Embed Code:

  <iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
  

• Valid Vimeo Embed Code:

  <iframe src="https://player.vimeo.com/video/123456789" width="640" height="360" frameborder="0" allowfullscreen></iframe>
  

Avoid using regular watch links (like youtube.com/watch?v=...) — these won’t work with the regex and will get sanitized.

Step 3: Optional – Add a Custom Embed Button (For Ease of Use) #

If you want to let users insert videos without writing HTML manually, you can add a custom toolbar button. Here’s a quick implementation for YouTube:

// Initialize editor and store reference
var editor = $('#answer').wysihtml5({
  // Include your existing toolbar and parser rules here
  customTemplates: {
    youtubeButton: function() {
      return "<li><a class='wysihtml5-command' data-wysihtml5-command='insertYouTube' href='#' tabindex='-1'>YouTube</a></li>";
    }
  }
}).data("wysihtml5").editor;

// Define the insertYouTube command
editor.commands.insertYouTube = {
  exec: function() {
    var embedUrl = prompt("Paste your YouTube embed URL:");
    if (embedUrl && /youtube\.com\/embed\/|youtu\.be\//.test(embedUrl)) {
      this.composer.commands.exec("insertHTML", `<iframe width="560" height="315" src="${embedUrl}" frameborder="0" allowfullscreen></iframe>`);
    } else {
      alert("Please enter a valid YouTube embed URL (e.g., https://www.youtube.com/embed/...)");
    }
  }
};

// Add the button to the toolbar
$('.wysihtml5-toolbar ul').append(editor.customTemplates.youtubeButton());

You can replicate this pattern for Vimeo by creating a similar insertVimeo command.

Key Reminders #

• Always use embed-specific URLs (not regular video pages) to pass the sanitizer check.
• The regex can be adjusted if you need to allow other trusted video platforms, but restricting to YouTube/Vimeo keeps your editor secure.
• If src issues persist, double-check that your URL matches the regex exactly (e.g., http vs https, www vs non-www).

内容的提问来源于stack exchange，提问作者Jass