TinyMCE的3自定义嵌入式视频代码不工作

Question

我已经开始用了tinyMCE 3.我试图复制下面的代码粘贴到HTML源代码编辑器一样

<video id="testplayer" data-account="4338955589001" 
     data-player="Bkh63tBcx" data-embed="default" 
     class="video-js" controls="" 
     data-video-id="5347595845001" 
     style="width: 100%; height: 100%; 
     position: absolute; top: 0px; bottom: 0px; right: 0px; 
     left: 0px;"></video> 

但是当我点击更新，它出现在编辑器中，但再次如果我点击HTML源代码编辑器，清除上面的代码。请让我知道我错过了什么？

通过：http://archive.tinymce.com/tryit/3_x/full.php复制粘贴上面的代码，但重新打开HTML源代码编辑器后清除。

Answer 1

这是我的答案之前的细节。见下面来看看实际的帮助，这个问题：

----前-------

请有look in the documentation。

您必须将media插件添加到TinyMCE设置，以便它不会撕裂<video>标记。

这插件还增加了在Insert > Media一个菜单选项，您也可以使用添加您的video.-

------编辑--------

使用您的TinyMCE fiddle，还有full featured TinyMCE 3，我能够把你的视频放在那里。看来TinyMCE 3有一些问题，TinyMCE 4可以正常工作。

要添加视频而不是使用HTML源功能，请使用媒体功能。如果您点击菜单上的视频图标，则会出现一个弹出窗口，其中包含用于添加视频的选项。其中一种选择是直接插入源代码。如果您这样做，则在查看HTML源代码时，视频不会被撕掉。我不确定TinyMCE做了什么不同，但是通过HTML源代码将其清除，而使用媒体源则不会。

------ EDIT 2 --------

进一步的调查，关于为什么“HTML源”点击通过媒体按钮的“源”选项卡中添加视频后两次，我去检查富文本编辑器中出现的对象上的HTML之间的差异。

第一次（添加标签后右），这似乎在富文本编辑器对象的HTML具有以下属性：

data-mce-json="{'video':{'attrs':{'id':'testplayer','data-account':'4338955589001','data-player':'Bkh63tBcx','data-embed':'default','class':'video-js','data-video-id':'5347595845001','style':'width: 100%; height: 100%; position: absolute; top: 0px; bottom: 0px; right: 0px; left: 0px;','preload':'none','controls':'controls','src':null,'poster':null},'sources':[{'src':''}]},'params':{'src':null},'type':'video','class':'mceItemMedia mceItemVideo','id':'testplayer','width':'320','height':'240'}" 

打开HTML源代码，并单击“更新” ，并再次检查对象的HTML源代码，相同的属性是：

data-mce-json="{'video':{'attrs':{'id':'testplayer','width':'320','height':'240','style':'width: 100%; height: 100%; position: absolute; top: 0px; bottom: 0px; right: 0px; left: 0px;','data-account':'4338955589001','data-player':'Bkh63tBcx','data-embed':'default','class':'video-js','data-video-id':'5347595845001','preload':'none','controls':'controls','src':''},'sources':[]},'params':{},'hspace':null,'vspace':null,'align':null,'bgcolor':null}" 

正如你所看到的，它们之间存在着一些差异。导致<video>标签在第二次后被剥去的主要区别在于'sources'是[]而不是[{'src':''}]，因为它是第一次。如果您在浏览器的HTML源代码中手动更改该内容，则会看到它的工作原理。

现在，为了解决这个问题，我看到两个可能的解决方案：

1. 输入src属性，比其他src=""。当它有一个非空src，它似乎工作。不过，我不知道这是否会破坏你的标签，这取决于你的目标是什么。所以，这对你来说可能或不可行，但值得一提。

2. 在TinyMCE上使用protect设置。有了这个，你可以通过一个正则表达式来指定TinyMCE清理函数应该保护什么。这会使视频在TinyMCE的编辑模式下隐藏，但会保留在HTML源代码中。对于你的情况，该设置会是这样：

   protect: [ 
       /\<\/?video[^>]*\>/g 
   ] 
   

你只需要同时测量可能的解决办法，看看其中是否有利于你的情况。