The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

New button on sceditor

View previous topic View next topic Go down

In progress New button on sceditor

Post by Luis Ferreira on November 23rd 2015, 1:12 pm

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

Luis Ferreira
Forumember

Posts : 53
Reputation : 1
Language : Poruguese

http://gamemunity.team-talk.net/

Back to top Go down

In progress Re: New button on sceditor

Post by Ange Tuteur on November 23rd 2015, 1:34 pm

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. Smile

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: New button on sceditor

Post by Luis Ferreira on November 23rd 2015, 2:30 pm

i need help its confused for me xD

Luis Ferreira
Forumember

Posts : 53
Reputation : 1
Language : Poruguese

http://gamemunity.team-talk.net/

Back to top Go down

In progress Re: New button on sceditor

Post by Luis Ferreira on November 28th 2015, 2:29 pm

bump Smile

Luis Ferreira
Forumember

Posts : 53
Reputation : 1
Language : Poruguese

http://gamemunity.team-talk.net/

Back to top Go down

In progress Re: New button on sceditor

Post by Luis Ferreira on December 3rd 2015, 12:26 pm

@Ange Tuteur Help me :3

Luis Ferreira
Forumember

Posts : 53
Reputation : 1
Language : Poruguese

http://gamemunity.team-talk.net/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum