Add custom NicEdit editor button for youtube videos

Question

I've used the nicEdit - http://nicedit.com/

I need to insert the videos from youtube. I need to insert only url for example: http://www.youtube.com/watch?v=4GuqB1BQVr4

and replace to

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

How can i insert the videos from youtube using nicEdit?

score 6 · Answer 1 · edited May 23 '17 at 11:56

JDandChips code works great, however I found that it was placing the video at the bottom of the content. To insert it at the cursor

find

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

change to

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

works great for me.

Here's the full plugin code

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

The nicCommand to insert html for other plugins that require inserting the html at the cursor position.

Sorry, meant to say for a plugin to insert any html at the cursor position GO HERE.

on `nicEditors.registerPlugin(nicPlugin,nicYouTubeOptions);`, what is `nicYoutubeOptions`? — Malcolm Salvador, Aug 15 '17 at 08:47
In first line there should be var nicYoutubeOptions = { instead of var nicCodeOptions = { — TakeruDavis, Mar 21 '19 at 08:16

score 3 · Answer 2 · answered Sep 13 '12 at 11:15

Adding a custom nicEdit button

You need to add a custom button as outlined here: http://wiki.nicedit.com/w/page/516/Creating%20a%20Plugin

There are parts of this documentation that I found confusing when I first read it, so I will walk you through how to add the working button.

If you have the development version of nicEdit.js, go to the bottom of the file and you will see a custom button called "nicCodeButton".

Below this add your own custom button, which should look like this:

YouTube button code

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

Next you need to add your button to the custom config and an icon image for the panel to use, also found at the bottom of the file. It will look like this once complete:

Add you button to config

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

That's it!

(The above code has been tested if you'd like to use it)

score 1 · Answer 3 · answered Nov 02 '13 at 17:56

I had difficulty getting this to work even with all your guidance here so I will try to post as much help as possible on this. Chances are that its not the final solution but maybe this can help anyone looking to try and get a button added.

I had difficulty even getting a button to show so I reduced it all to virtually nothing to figure it out.

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

So this first section of code sets up your button details. In other words the image you use for the button and the text you see when you hover over it. The final part listed next to type is 'nicYouTubeButton' and this declares what function is to be called when the button is pressed.

var nicYouTubeButton = nicEditorAdvancedButton.extend({

});

This is just simply the function (currently empty) which does everything.

nicEditors.registerPlugin(nicPlugin,nicYouTubeOptions);

This final line registers the plugin using the OPTIONS function and not the BUTTON function.

To get this working in the editor now, you need to add the button (declared as 'youtube', note lowercase here) which has been created in the OPTIONS variable. To do this you need to modify the line near the top of the file marked like so:

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

As you can see, I have already added 'youtube' to the list making sure to add that comma between items.

Simply add the following code in your EMPTY function 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();
}

Be sure not to remove any of the } or {

Hope this helps any of you having difficulty getting it to show up like me.