javascript - 媒体元素集成到 Ckeditor

Question

我在使用 wysiwig 编辑器 ckeditor 时遇到了一些麻烦。在尝试摆脱任何基于 Flash 的媒体播放器时，我偶然发现了 MediaElement (http://mediaelementjs.com/)，它被认为是播放音频和视频的良好替代方案 (http://drupal.org/node/1035630)。

有没有一种简单的方法可以将此播放器集成到媒体插件中？我想应该有一种方法可以将基于 Flash 的播放器换成媒体元素......？

想法？

Answer 1

您可以基于 flash 插件创建自定义插件。

大小写很重要，这里是风格指南:编码风格指南 http://docs.cksource.com/FCKeditor_3.x/Design_and_Architecture/Coding_Style

复制_source/plugins/flash目录并重命名，我们称它为mediaelement。

将重命名的目录放在这里 /plugins/mediaelement。

然后将 /plugins/mediaelement/dialogs/flash.js 重命名为 mediaelement.js。

将您的 16px X 16px 工具栏按钮图像添加到 /plugins/mediaelement/images/ 目录。
我知道 .png 文件有效，没有尝试过其他文件。

---

配置:
在您的配置中加载新插件:

config.extraPlugins = 'mediaelement';

将按钮添加到您的工具栏配置设置 'MediaElement'

config.toolbar_xxx

---

文件修改
您需要更改对“flash”插件名称和文件的引用。以下是加载插件和打开对话框窗口所需的最小更改:

插件/mediaelement/dialogs/mediaelement.js (174)

CKEDITOR.dialog.add( 'mediaelement', function( editor )

插件/mediaelement/plugin.js (22 - 33)

  CKEDITOR.plugins.add( 'mediaelement',
  {
    init : function( editor )
    {
      editor.addCommand( 'mediaelement', new CKEDITOR.dialogCommand( 'mediaelement' ) );
      editor.ui.addButton( 'MediaElement',
        {
          label : 'Media Element',
          command : 'mediaelement',
          icon: this.path + 'images/mediaelement_btn.png'
        });
      CKEDITOR.dialog.add( 'mediaelement', this.path + 'dialogs/mediaelement.js' );

这里有一些关于创建插件的教程:
http://docs.cksource.com/CKEditor_3.x/Tutorials

它们会让您了解结构和所需元素。我是通过在使用现有插件的副本时浏览教程来学习这一点的，这需要一些时间，但你需要的大部分内容都在那里。

教程包含有关创建对话框窗口和使用的参数的信息，它们将帮助您了解 plugins/mediaelement/dialogs/mediaelement.js 文件中发生的事情。

您可以修改对话框文件以包含由 MediaElement 实现使用的字段。我建议您将 flash 的嵌入代码与用于媒体元素的嵌入代码进行比较，看看哪些部分相互对应，然后相应地修改对话框文件。