0

我从 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 源代码编辑器后它就清楚了。

4

1 回答 1

0

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

- - 前 - - - -

请查看文档。

您必须将media插件添加到 TinyMCE 设置中，这样它就不会破坏<video>标签。

该插件还添加了一个菜单选项Insert > Media，您也可以使用它来添加您的视频。-

- - - 编辑 - - - -

使用您的TinyMCE fiddle以及功能齐全的 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 源代码中手动更改它，您会发现它可以工作。

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

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

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

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

您只需要衡量两种可能的解决方案，看看它们中的任何一个是否适合您的情况。

于 2017-03-09T18:33:42.123 回答