javascript - How to get preview of video in TinyMCE - Stack Overflow

admin管理员组

文章数量:1427989

I'm using tinyMCE as WYSIWYG editor on my blog. Unfortunately when I add video (from youtube or vimeo) it's not visible in editor window (I can only see the code when viewing it in HTML mode). Is there a way to generate preview or even better to have the ability to play video in the editor window ?

I'm using tinyMCE as WYSIWYG editor on my blog. Unfortunately when I add video (from youtube or vimeo) it's not visible in editor window (I can only see the code when viewing it in HTML mode). Is there a way to generate preview or even better to have the ability to play video in the editor window ?

• javascript
• youtube
• tinymce
• wysiwyg
• preview

Share Improve this question Follow asked Apr 21, 2011 at 18:26 mike_hornbeckmike_hornbeck 1,62233 gold badges3030 silver badges5252 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

No straight-forward solution available, but I think the question deserves a better answer than the one above.

In TinyMCE before version 3.4b3, media that was embedded as an iframe would play in the WYSIWYG mode. Yes, a WYSIWYG editor can do this (as opposed to what is claimed in the answer above).

In version 3.4b3 the media plugin was changed to match a change in YouTube's embed code.

From 3.4b3 and onward, the media plugin replaces the iframe with a yellow box having the same size of the media it's representing. The original iframe attributes are encapsulated as JSON and preserved in a special tag during editing. Later When the text is saved out, the attributes are restored into the original iframe.

Searching on this or similar topics returns several suggestions to use valid_elements or extended_valid_elements. Those settings will affect how HTML elements are treated. They cannot be used to enable media preview in the WYSIWYG mode.

This seems to be by design, as is indicated by how the TinyMCE CTO reasons about media vs placeholders here. And he also demonstrates the acceptable operation of the media plugin in this screencast where no preview is displayed after switching to the preview mode.

I'm still looking for a good solution for this using the standard product. As an alternative, a custom version of the media plugin could be written with domain white-listing added to tell it to leave iframes from those domains untouched so they will display also in WYSIWYG.

AFAIK, TinyMCE (or basically any WYSIWYGs) can't do that.

media_live_embeds

When you enable this option users will see a live preview of embedded video content within the editable area, rather than a placeholder image. This means that users can play a video clip, such as YouTube, within the editor.

本文标签： javascriptHow to get preview of video in TinyMCEStack Overflow