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

我用了nicEdit-

我需要插入youtube上的视频。我只需要插入url，例如：

http://www.youtube.com/watch?v=4GuqB1BQVr4

并替换为

如何使用nicEdit插入youtube上的视频

添加自定义编辑按钮 您需要添加一个自定义按钮，如下所述：

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

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

在下面添加您自己的自定义按钮，该按钮应如下所示：

YouTube按钮代码 就这样

---

（如果您愿意，上面的代码已经过测试）

JDandChips代码工作得很好，但是我发现它将视频放在了内容的底部。在光标处插入它

发现 改为 这对我很有用

下面是完整的插件代码

var-niccodepoptions={
按钮：{
'xhtml'：{name:'Edit HTML'，键入：'nicCodeButton'}，
'youTube'：{name:'youTube'，键入：'nicYouTubeButton'}
},
i配置文件：{
“youTube”：“/nicedit/youTube.gif”
}
};
var nicYouTubeButton=nicEditorAdvancedButton.extend({
宽度：“350px”，
addPane:函数（）{
这是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'}}
});
},
提交：职能（e）{
var代码=此。输入['youTubeUrl'].值；
变量宽度=此。输入['height'].值；
var height=this.inputs['width'].value；
if（code.indexOf（'watch？v='）>0）{
code=code.replace（'watch？v='，'embed/'）；
}
变量youTubeCode=''；
这个.removePane（）；
这个.ne.nicCommand（'insertHTML'，youTubeCode）；
}
});
注册插件（nicPlugin，nicYouTubeOptions）；

为需要在光标位置插入html的其他插件插入html的命令

---

很抱歉，这意味着插件在光标位置插入任何html。

即使在这里有您的指导，我也很难让它正常工作，因此我将尝试在这方面发布尽可能多的帮助。很可能这不是最终的解决方案，但这可能会帮助任何想要尝试添加按钮的人

我甚至很难找到一个按钮来显示，所以我把所有的按钮都缩小到几乎没有任何东西来理解它

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变量中创建的按钮（声明为“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”添加到列表中，确保在项目之间添加逗号

只需在空函数中添加以下代码

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();
}

宽度：“350px”， addPane:函数（）{ 这是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'}} }); }, 提交：职能（e）{ var代码=此。输入['youTubeUrl'].值； 变量宽度=此。输入['height'].值； var height=this.inputs['width'].value； if（code.indexOf（'watch？v='）>0）{ code=code.replace（'watch？v='，'embed/'）； } 变量youTubeCode=''； this.ne.selectedInstance.setContent（this.ne.selectedInstance.getContent（）+youTubeCode）； 这个.removePane（）； } 请确保不要删除任何}或{

---

希望这能帮助你们中有困难的人像我一样显示它。

在

nicEditors.registerPlugin（nicPlugin，nicYouTubeOptions）；

，什么是

nicYouTubeOptions

？在第一行应该有var nicYouTubeOptions={而不是var nicCodeOptions={

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

var nicYouTubeButton = nicEditorAdvancedButton.extend({

});

nicEditors.registerPlugin(nicPlugin,nicYouTubeOptions);

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'],

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();
}