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中添加了一个菜单选项，您还可以使用该选项添加视频.-

------ -------- EDIT

使用您的TinyMCE fiddle以及full featured TinyMCE 3，我可以将您的视频放在那里。似乎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}"

如您所见，它们之间存在一些差异。导致<video>标记在第二次被删除后的主要区别在于'sources'是[]而不是[{'src':''}]，就像它在第一次。如果您在浏览器的HTML源代码中手动更改此设置，则会看到它有效。

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

输入src以外的src=""属性。当它具有非空src时，它似乎有效。但是，我不知道这是否会打破<video>标记，这取决于您的目标是什么。所以，这对你来说可能或不可行，但值得一提。
使用TinyMCE上的protect设置。有了这个，您可以通过正则表达式指定应该保护哪些TinyMCE清理函数。这将使视频在TinyMCE的编辑模式下不可见，但会将其保留在HTML源代码中。对于您的情况，此设置将如下所示：
```
protect: [
    /\<\/?video[^>]*\>/g
]
```

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

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

1 个答案: