4

我安装了 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>

有什么办法吗？

4

1 回答 1

4

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

  1. YouTube 插件会创建 iframe，但我们需要将它们视为youtubebbcode 的“标签”。所以添加iframe: 'youtube'到第convertMap30 行。

  2. 现在我们需要将该“标签”映射到 BBCode 标签。添加youtube: 'youtube'到第bbcodeMap29 行

  3. 现在我们需要指定如何处理这个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 行是从属性中获取 YouTube idsrc并放在youtube这样的标签之间[youtube]{id}[/youtube]。在 YouTube 标记中放置完整的 URL 是个坏主意，因为用户可以在其中放置任何 URL。请参阅约定：http ://www.bbcode.org/reference.php 。这个解决方案在你的情况下就足够了，但在我的情况下还不够。我也需要转移宽度和高度。所以最后 2 行添加了自定义属性ytheight和ytwidth. 我使用yt前缀，以便其他元素具有height或width不会将这些属性添加到它们的 BBCode 中。

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

代码：

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

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

最终输出：

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

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

于 2013-11-27T08:18:59.017 回答