切换到 BBcode 时无法将 YouTube 视频添加到 ckeditor(英语：BBend)

Question

我安装了ckeditor并将其默认设置为html输出，我设法通过单击Flash按钮并放置YouTube链接来添加YouTube视频，如下所示：http://www.youtube.com/v/G6Na--PE9Yo

现在我切换到BBCODE，当我做同样的事情时，它不起作用。我什至尝试使用YouTube插件，但仍然无法正常工作。

如果你知道如何解决它，我很想听听。我有一个线索，但我不知道该怎么做。

当有人放置YouTube链接时，我希望它将其替换为以下语法：

[youtube]http://www.youtube.com/v/G6Na--PE9Yo[/youtube]

在 HTML 输出上，它应该是：

<embed allowfullscreen="true" height="300" src="http://www.youtube.com/v/G6Na--PE9Yo?version=3&amp;color1=0xb1b1b1&amp;color2=0xcfcfcf&amp;feature=player_embedded" type="application/x-shockwave-flash" width="500"></embed>

有什么办法可以做到这一点吗？

Answer 1

我使用了CKEditor4.1.2和BBCode附加组件4.1.3，但我认为最新版本（4.3）没有太大区别。您需要执行的所有更改都在BBCode附加组件中：

1. YouTube插件创建了iframe，但我们需要将它们视为bbcode youtube"标签"。因此，将iframe: 'youtube'添加到第 30 行的convertMap中。

2. 现在我们需要将该"标签"映射到BBCode标签。将youtube: 'youtube'添加到第 29 行的bbcodeMap

3. 现在我们需要指定如何处理这个youtube标签。转到editor.dataProcessor.htmlFilter.addRules（第 637 行）并为youtube标记添加新else if：

法典：

else if (tagName == 'youtube') {
   element.isEmpty = 0;
   var arr = attributes.src.split('/');
   var ytid = arr[arr.length - 1].split('?')[0];
   element.children = [new CKEDITOR.htmlParser.text(ytid)];
   element.attributes.ytheight = attributes.height;
   element.attributes.ytwidth = attributes.width;
}

第一行是从img标签复制粘贴。我不确定它的作用。接下来的 3 行用于从 src 属性获取 YouTube ID，并放在youtube标签之间，就像这样[youtube]{id}[/youtube]。在YouTube标签中放置完整的URL是一个坏主意，因为用户可以在那里放置任何URL。请参阅约定：http://www.bbcode.org/reference.php。这个解决方案在您的情况下就足够了，但在我的情况下就不行了。我也需要转移宽度和高度。所以最后 2 行添加了自定义属性ytheight和ytwidth.我使用 yt 前缀，以便其他具有height或width的元素不会将这些属性添加到他们的 BBCodes 中。

4.转到var BBCodeWriter = CKEDITOR.tools.createClass（第 407 行）。在proto:（第 432 行）中有一个函数attribute : function( name, val )（第 486 行）添加一个用于ytheight的else if和一个ytwidth

法典：

else if (name == 'ytwidth') { 
    this.write(' width=', val); 
} else if (name == 'ytheight') {
    this.write(' height=', val);
}

如果需要，可以通过这种方式添加更多属性。

最终输出：

[youtube height=315 width=560]0aSCPmabRpM[/youtube]

附言这种方法的缺点是所有iframe都将被视为YouTube，但我认为您不需要任何其他iframe。