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

我使用了CKEditor 4.1.2和BBCode附加组件4.1.3，但我不认为最新版本（4.3）有很大不同。您需要做的所有更改都在BBCode插件中：

YouTube加载项会创建iframe，但我们需要将它们视为bbcode的youtube“tag”。因此，请将iframe: 'youtube'添加到第30行的convertMap。
现在我们需要将“标签”映射到BBCode标签。将youtube: 'youtube'添加到第29行的bbcodeMap
现在我们需要指定如何处理此youtube标记。转到editor.dataProcessor.htmlFilter.addRules（第637行）并为else if代码添加新的youtube：

代码：

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标记中放置完整的网址是个坏主意，因为用户可以在其中放置任何网址。请参阅约定：http://www.bbcode.org/reference.php。这个解决方案在你的情况下已经足够了，但在我的情我也需要传输宽度和高度。因此，最后两行添加了自定义属性ytheight和ytwidth。我使用yt前缀，以便其他具有height或width的元素不会将这些属性添加到其BBC代码中。

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

代码：

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

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

最终输出：

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

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

切换到bbcode时，无法将youtube视频添加到ckeditor

1 个答案: