切换到bbcode时无法将youtube视频添加到ckeditor [英] can't add youtube video to ckeditor when switching to bbcode

问题描述

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

I installed ckeditor and had it set by default to html output, and i managed to add youtube video by clicking flash button and putting youtube link like so: http://www.youtube.com/v/G6Na--PE9Yo

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

now i switched to bbcode, and when i do the same thing it's not working. i even tried with a YouTube plugin but still not working.

如果您知道如何修复它，我很想听听。
i有领先优势，但我不知道该怎么做。

If you know how to fix it I would love to hear. i have a lead but i don't know how to to this.

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

when ever someone putting youtube link, I want it to replace it to this syntax:

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

并且在html输出上应该是：

and on html output it should be:

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

有什么办法吗？

推荐答案

我使用了CKEditor 4.1.2和BBCode插件4.1.3，但我认为最新版本（4.3）并没有太大区别。
您需要做的所有更改都在BBCode附件中：

I used CKEditor 4.1.2 and BBCode add-on 4.1.3 but I don't think latest versions (4.3) are much different. All changes you need to do are in the BBCode add-on:

1. YouTube附件会创建iframe，但我们需要注意它们作为 youtube 标签对于bbcode。因此，请在第30行的 iframe：'youtube'添加到 convertMap 中。

1. YouTube add-on creates iframes but we need to treat them as youtube "tag" for bbcode. So add iframe: 'youtube' to the convertMap in line 30.

现在，我们需要将该 tag映射到到BBCode标签。将 youtube：'youtube'添加到第29行的 bbcodeMap

Now we need to map that "tag" to BBCode tag. Add youtube: 'youtube' to the bbcodeMap in line 29

现在，我们需要指定该 youtube 标记的处理方式。转到 editor.dataProcessor.htmlFilter.addRules （第637行），并为<$ c $添加新的 else if c> youtube 标签：

Now we need to specify what to do with this youtube tag. Go to editor.dataProcessor.htmlFilter.addRules (line 637) and add new else if for the youtube tag:

代码：

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 不会将这些属性添加到其BBCode中。

The 1st line is a copy-paste from img tag. I'm not sure what it does. Next 3 lines are here to get YouTube id form the src attribute and put in between youtube tags like this [youtube]{id}[/youtube]. It is a bad idea to put a full URL in the YouTube tag, because a user can put any URL there. See conventions: http://www.bbcode.org/reference.php. This solution is enough in your case but not in mine. I need to transfer width and height too. So 2 last lines add custom attributes ytheight and ytwidth. I use the ytprefix so that other elements those have height or width won't get these attributes added to their BBCodes.

4。转到 var BBCodeWriter = CKEDITOR.tools.createClass （第407行）。在 proto：（第432行）中有一个函数 attribute：function（name，val）（第486行） ）添加 else if 表示 yight 和一个 ytwidth

4.Go to var BBCodeWriter = CKEDITOR.tools.createClass (line 407). And there in proto: (line 432) there is a function attribute : function( name, val ) (line 486) add an else if for ytheight and one ytwidth

代码：

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

您可以根据需要以这种方式添加更多属性。

You can add more attributes in that way if you want.

最终输出：

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

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

P.S. The drawback of this method that all iframes will be treated as YouTube but I don't think you need any other iframes.

这篇关于切换到bbcode时无法将youtube视频添加到ckeditor的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！