New button on sceditor

Forum version : Phpbb2
Position : Administrator 
Concerned browser(s) : Google Chrome 
Who the problem concerns : all
Forum link : http://gamemunity.team-talk.net/


So i want similar to youtube button but i want to add html code because youtube videos so i made this code but its kinda wrong ( im learning javascript im not that good xD) so here's the code i did:

Code:

$(function(){
    $(function(){
          $('<a class="sceditor-button vid_facebook" unselectable="on" title="Facebook Videos"><div unselectable="on" style="background-image:url(http://i68.servimg.com/u/f68/18/88/10/81/social11.png)">Facebook Videos</div></a>').insertAfter('.sceditor-button-youtube').click(function(){
             
              $('#text_editor_textarea').sceditor-dropdown .sceditor-insertlink;
                e.inserthtml(' <div class="fb-video" data-href="' + insertlink + '" data-width="500"></div>', '', true, true, true);
          });
      });
});

That's a way to go about it, but have you considered using the native editor commands to create a new button ? Take a look over the documentation for the SCEditor here : http://www.sceditor.com/documentation/getting-started/ It offers a lot of information on how to modify the editor.

Here's the default youtube button from the editor source :

Code:

$(function() {
  if ($.sceditor) {
    $.sceditor.command.set("vid-facebook", {

      // drop down
      _dropDown: function(editor, caller, handleIdFunc) {
        var matches, content = $('<div><div><label for="youtubeurl">' + editor._("URL:") + '</label> <input type="text" id="youtubeurl" class="url" placeholder="http://" value="" /></div><div><input type="button" value="' + editor._("Insert") + '" class="button"></div>');
        content.find('.button').click(function(e) {
          var val = content.find("#youtubeurl").val().replace("http://", "");
          if (val !== "") {
            matches = val.match(/(?:v=|v\/|embed\/|youtu.be\/)(.{11})/);
            if (matches) {
              val = matches[1]
            }
            if (/^[a-zA-Z0-9_\-]{11}$/.test(val)) {
              handleIdFunc(val)
            } else {
              alert(editor._('Invalid YouTube video'))
            }
          }
          editor.closeDropDown(true);
          e.preventDefault()
        });
        editor.createDropDown(caller, "insertlink", content)
      },

      // wysiwyg mode
      exec: function(caller) {
        var editor = this;
        $.sceditor.command.get('vid-facebook')._dropDown(editor, caller, function(id) {
          editor.wysiwygEditorInsertHtml('<iframe width="560" height="315" src="http://www.youtube.com/embed/' + id + '?wmode=opaque" data-youtube-id="' + id + '" frameborder="0" allowfullscreen></iframe>')
        })
      },

      // source mode
      txtExec : function(caller) {
        var editor = this;
        $.sceditor.command.get('vid-facebook')._dropDown(editor, caller, function(id) {
          editor.insert('[youtube]' + id + '[/youtube]')
        })
      },

      tooltip: "Insert a YouTube video"

    });

    // add button to editor toolbar
    toolbar += ',vid-facebook';
  }
});

You can most likely modify this to fit what you're trying to achieve. I already took the liberty of changing the command name to vid-facebook for you. If you need any help let me know.

i need help its confused for me xD

bump

@Ange Tuteur Help me :3