Tinymce 3自定义嵌入视频代码不工作

我从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>

但当我点击updated时，它会出现在编辑器上，但若我再次点击HTML源代码编辑器，它会清除上面的代码。请让我知道我错过了什么

---

通读：并复制粘贴在上面的代码，但在重新打开HTML源代码编辑器后，它就清晰了。

这是我在详细信息之前的回答。请参见下文以查看此问题的实际帮助：

----以前-------

请喝一杯

您必须将

媒体

插件添加到TinyMCE设置中，这样它就不会撕开

标签

该插件还在

Insert>Media

中添加了一个菜单选项，您也可以使用它添加视频-

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

使用你的，还有，我可以把你的视频放在那里。TinyMCE 3似乎有一些问题，TinyMCE 4可以很好地解决这些问题

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

------编辑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}"

正如你所看到的，它们之间有几个不同之处。导致

标记在第二次之后被撕掉的主要区别是

'sources'

是

[]

，而不是像第一次一样的

[{'src'：'}]

。如果您在浏览器的HTML源代码中手动更改此选项，您将看到它可以正常工作

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

输入

src

属性，而不是

src=”“

。当它有一个非空的

src

时，它似乎可以工作。然而，我不知道这是否会打破你的标签，这取决于你的目标是什么。所以，这对你来说可能可行，也可能不可行，但值得一提

使用TinyMCE上的设置。有了它，您可以通过正则表达式指定应该保护哪些内容不受TinyMCE清理函数的影响。这将使视频在TinyMCE的编辑模式下不可见，但会保留在HTML源代码中。对于您的情况，此设置如下所示：

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

保护：[
/\]*\>/g
]

---

您只需要测量两种可能的解决方案，看看它们是否适合您的情况。

tinyMCE link上已经提供了该选项，即使我将上述代码粘贴到它显示的媒体中。但是当我使用惰性/编辑HTML时，代码会被删除automatic@JithendraKumar请告诉我们您有哪个TinyMCE版本，并将您的确切设置粘贴到此处。这将有助于我们了解问题所在，并帮助您@Vitor Costa这是准确的设置和现场小提琴@JithendraKumar查看我编辑的答案。用你的小提琴，我想出了一个添加视频源的方法。请看它是否对您有帮助：正如您所说，我们可以把视频，当我们编辑为编辑html的第二次编辑它撕裂了视频代码。但同样的代码，如果我们从“编辑HTMl”选项卡编辑两次，它会再次删除代码。