如何在NicEditor中添加按钮

时间:2013-03-30 17:21:16

标签: jquery nicedit

我在一个测试应用程序中使用NicEditor,所以我想了一个按钮来添加你的视频管,但是直到我找到示例,即使在示例网站niceditor中也没有用,这个和那个cogido添加按钮但没有出现在按钮栏niceditor上

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

1 个答案:

答案 0 :(得分:0)

您是将此插件脚本添加到nicedit脚本还是添加到页面中? 我遇到了这个问题,这就是我修复它的方法:

确保'youTube': '/nicedit/youtube.gif'与您的网页相关而不是脚本,并删除第一个正斜杠'youTube':'nicedit/youtube.gif'这完全取决于您是否在页面上使用插件或在Nicedit.js脚本中。

这就是我将代码添加到页面的方式(你发现的顺序非常重要,我找到了)

<script> Nicedit.js </script>
<script> YOUR PLUGIN CODE (above)</script>
###CONFIG ###
<script>
bkLib.onDomLoaded(function() {
new nicEditor({buttonList : ['youTube','bold','italic','underline','strikeThrough','fontSize','fontFormat','left','center','right','justify','ol','ul','removeformat','indent','outdent','hr']}).panelInstance('article');
});
</script>