切换到 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.

如果你知道如何解决它，我很想听听.我有一个线索，但我不知道如何做到这一点.

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.因此，将 iframe: 'youtube' 添加到第 30 行的 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.

现在我们需要映射那个标签"到 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 行)并为 youtube 标记添加新的 else if:

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.这个解决方案在你的情况下就足够了，但在我的情况下就不够了.我也需要转移宽度和高度.所以最后两行添加自定义属性 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对于 ytheight 和一个 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]

附言这种方法的缺点是所有 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屋！