0

我用过 nicEdit - http://nicedit.com/

我需要插入来自 youtube 的视频。我只需要插入 url 例如：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 的视频？

4

3 回答 3

6

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。

抱歉，意思是说插件可以在光标位置插入任何 html GO HERE。

于 2012-10-13T00:44:21.797 回答
3

添加自定义 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 */

而已！

（上面的代码已经测试过了，如果你想使用它）

于 2012-09-13T11:15:56.343 回答
1

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

我什至很难显示一个按钮，所以我把它全部减少到几乎没有弄清楚。

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

因此，这第一部分代码设置了您的按钮详细信息。换句话说，您用于按钮的图像和您将鼠标悬停在其上时看到的文本。type 旁边列出的最后一部分是'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();
}

确保不要删除任何 } 或 {

希望这可以帮助你们中的任何人难以让它像我一样出现。

于 2013-11-02T17:56:26.523 回答