Question

我需要从youtube插入视频。我只需要插入网址，例如：http://www.youtube.com/watch?v=4GuqB1BQVr4

并替换为

<iframe width="560" height="315" src="http://www.youtube.com/embed/4GuqB1BQVr4" frameborder="0" allowfullscreen></iframe>

如何使用nicEdit从youtube插入视频？

Answer 1

JDandChips代码效果很好，但我发现它将视频放在内容的底部。将其插入光标

找到

 this.ne.selectedInstance.setContent(this.ne.selectedInstance.getContent() + youTubeCode);
 this.removePane();

更改为

  this.removePane();
  this.ne.nicCommand('insertHTML', youTubeCode);

对我很有用。

这是完整的插件代码

var nicCodeOptions = {
buttons : {
    'xhtml': { name: 'Edit HTML', type: 'nicCodeButton' },
    'youTube' : {name : 'YouTube', type : 'nicYouTubeButton'}
},
iconFiles: {
    'youTube': '/nicedit/youtube.gif'
}
};

var nicYouTubeButton = nicEditorAdvancedButton.extend({
width: '350px',

addPane: function () {
    this.addForm({
        '': { type: 'title', txt: 'YouTube Url' },
        'youTubeUrl': { type: 'text', txt: 'URL', value: 'http://', style: { width: '150px'} },
        'height': { type: 'text', txt: 'Height', value: '560', style: { width: '150px'} },
        'width': { type: 'text', txt: 'Width', value: '315', style: { width: '150px'} }
    });
},

submit: function (e) {
    var code = this.inputs['youTubeUrl'].value;
    var width = this.inputs['height'].value;
    var height = this.inputs['width'].value;

    if (code.indexOf('watch?v=') > 0) {
        code = code.replace('watch?v=','embed/');
    }

    var youTubeCode = '<iframe width="' + width + '" height="' + height + '" src="' + code + '" frameborder="0" allowfullscreen></iframe>';

    this.removePane();
    this.ne.nicCommand('insertHTML', youTubeCode);
}
});
nicEditors.registerPlugin(nicPlugin,nicYouTubeOptions);

nicCommand为需要在光标位置插入html的其他插件插入html。

很抱歉，打算让插件在光标位置GO HERE插入任何html。

Answer 2

添加自定义nicEdit按钮

您需要添加自定义按钮，如下所示：http://wiki.nicedit.com/w/page/516/Creating%20a%20Plugin

在我第一次阅读本文档时，我发现有些部分令人困惑，因此我将向您介绍如何添加工作按钮。

如果你有nicEdit.js的开发版本，请转到文件的底部，你会看到一个名为“nicCodeButton”的自定义按钮。

在此下方添加您自己的自定义按钮，如下所示：

YouTube按钮代码

var nicYouTubeButton = nicEditorAdvancedButton.extend({
    width: '350px',

    addPane: function () {
        this.addForm({
            '': { type: 'title', txt: 'YouTube Url' },
            'youTubeUrl': { type: 'text', txt: 'URL', value: 'http://', style: { width: '150px'} },
            'height': { type: 'text', txt: 'Height', value: '560', style: { width: '150px'} },
            'width': { type: 'text', txt: 'Width', value: '315', style: { width: '150px'} }
        });
    },

    submit: function (e) {
        var code = this.inputs['youTubeUrl'].value;
        var width = this.inputs['height'].value;
        var height = this.inputs['width'].value;

        if (code.indexOf('watch?v=') > 0) {
            code = code.replace('watch?v=','embed/');
        }

        var youTubeCode = '<iframe width="' + width + '" height="' + height + '" src="' + code + '" frameborder="0" allowfullscreen></iframe>';

        this.ne.selectedInstance.setContent(this.ne.selectedInstance.getContent() + youTubeCode);
        this.removePane();
    }
});

接下来，您需要将按钮添加到自定义配置和要使用的面板的图标图像，也可以在文件底部找到。一旦完成，它将看起来像这样：

将按钮添加到配置

/* START CONFIG */
var nicCodeOptions = {
    buttons : {
        'xhtml': { name: 'Edit HTML', type: 'nicCodeButton' },
        'youTube' : {name : 'YouTube', type : 'nicYouTubeButton'}
    },
    iconFiles: {
        'youTube': 'nicEditorIcons2.gif'
    }
};
/* END CONFIG */

就是这样！

（以上代码已经过测试，如果您想使用它）

Answer 3

即使你在这里得到了所有的指导，我也很难让它工作，所以我会尝试尽可能多地发布这方面的帮助。有可能它不是最终解决方案，但也许这可以帮助任何想要尝试添加按钮的人。

我甚至难以显示一个按钮，所以我将它全部缩减为几乎没有任何东西可以解决它。

var nicYouTubeOptions = {
  buttons : {
    'youtube': {name : 'YouTube Link', type : 'nicYouTubeButton'}
  },
  iconFiles: {
    'youtube': 'images/youtube.gif'
  }
};

因此，第一部分代码会设置您的按钮详细信息。换句话说，用于按钮的图像和将鼠标悬停在按钮上时看到的文本。类型旁边列出的最后一部分是'nicYouTubeButton'，这表示按下按钮时要调用的函数。

var nicYouTubeButton = nicEditorAdvancedButton.extend({

});

这只是一个完成所有事情的函数（当前为空）。

nicEditors.registerPlugin(nicPlugin,nicYouTubeOptions);

最后一行使用OPTIONS函数注册插件，不 BUTTON函数。

要让它在编辑器中正常工作，您需要添加在OPTIONS变量中创建的按钮（在此处声明为'youtube'，注意小写）。为此，您需要修改标记为文本顶部附近的行：

buttonList : ['save','bold','italic','underline','left','center','right','justify','ol','ul','fontSize','fontFamily','fontFormat','indent','outdent','image','upload','link','unlink','forecolor','bgcolor','xhtml','table','youtube'],

如您所见，我已将“youtube”添加到列表中，确保在项目之间添加逗号。

只需在您的EMPTY函数nicYouTubeButton中添加以下代码：

width: '350px',

addPane: function () {
    this.addForm({
        '': { type: 'title', txt: 'YouTube Url' },
        'youTubeUrl': { type: 'text', txt: 'URL', value: 'http://', style: { width: '150px'} },
        'height': { type: 'text', txt: 'Height', value: '560', style: { width: '150px'} },
        'width': { type: 'text', txt: 'Width', value: '315', style: { width: '150px'} }
    });
},

submit: function (e) {
    var code = this.inputs['youTubeUrl'].value;
    var width = this.inputs['height'].value;
    var height = this.inputs['width'].value;

    if (code.indexOf('watch?v=') > 0) {
        code = code.replace('watch?v=','embed/');
    }

    var youTubeCode = '<iframe width="' + width + '" height="' + height + '" src="' + code + '" frameborder="0" allowfullscreen></iframe>';

    this.ne.selectedInstance.setContent(this.ne.selectedInstance.getContent() + youTubeCode);
    this.removePane();
}

请务必不要移除任何}或{

希望这有助于你们中的任何一个难以让它像我一样出现。

为youtube视频添加自定义NicEdit编辑器按钮

3 个答案:

找到

更改为

这是完整的插件代码

添加自定义nicEdit按钮

YouTube按钮代码

将按钮添加到配置