SCEditor Auto-Embed Button [BETA]

Page 2 of 2 Previous  1, 2

Go down

SCEditor Auto-Embed Button [BETA]

Post by Wecoc on May 14th 2018, 6:24 am

First topic message reminder :

This code adds a new button in the SCEditor toolbar. There you can insert an external link and it will be converted to embed code to insert in your post.
Caution: As in default embedding, the user should have HTML activated or the post will display raw code instead.

This is just a Beta, the final version will have more external links available.

Version 1.17 (current): Facebook, Twitter, Instagram, Imgur

Suggest box:
Flickr
GitHub Gist
Google Drive
Google+
Google Sheets
Kickstarter
Mixcloud
Pastebin
Pinterest
Reddit
Scribd
SlideShare
Soundcloud
Spotify
TED Talks
Telegram
Tumblr
Twitch
UStream
Vimeo
Youtube

The webs in the suggest box may or may not be included.
I know the toolbar has already a Youtube option, but YT has other embedding options not available with the default option. I didn't test that deeply yet, though.
If you have a suggestion you think should totally be in that list please post it below.

Insert this Javascript.
AP Modules Javascript codes management Create a new Javascript

Code:
/*
* -- SCEditor Auto-Embed Button --
* Version: 1.17 EN (2018-05-17)
* Author: Wecoc
* Description: BBCode to insert embed codes using the URL directly
 
* Available sites (with example links):
 
  Facebook
https://www.facebook.com/20531316728/posts/10154009990506729
https://www.facebook.com/facebook/videos/10153231379946729
https://www.facebook.com/zuck/posts/10102577175875681?comment_id=1193531464007751
https://www.facebook.com/zuck/posts/10102577175875681?comment_id=1193531464007751&reply_comment_id=654912701278942
 
  Twitter
https://twitter.com/IJasonAlexander/status/526635414338023424
 
  Instagram
https://www.instagram.com/p/fA9uwTtkSN/
 
  Imgur
http://imgur.com/AsQ0K3P
http://imgur.com/a/9UGCL
http://imgur.com/gallery/9UGCL
http://i.imgur.com/u7Yo0Vy.gifv
http://i.imgur.com/UO1UrIx.mp4
*/
 
$(function() {
 
  // Install here custom plugins
  installFacebookEmbedPlugin();
  installTwitterEmbedPlugin();
 
  /*--------------------- CONFIGURATION ---------------------*/
 
  var embed_codes = {
    // Facebook
    facebook_post: {
      site: "Facebook",
      type: "Post",
      match: /facebook.com\/(.+?)\/posts\/(.+?)(\/)?$/,
      code: '<div class="fb-post" data-href="{LINK}" data-width="500" data-show-text="true"></div>'
    },
    facebook_comment: {
      site: "Facebook",
      type: "Comment",
      match: /facebook.com\/(.+?)\/posts\/(.+?)\?comment_id=(.+?)(&reply_comment_id=(.+?))?$/,
      code: '<div class="fb-comment-embed" data-href="{LINK}" data-width="560" data-include-parent="true"></div>'
    },
    facebook_photo: {
      site: "Facebook",
      type: "Photo",
      match: /facebook.com\/((.+?)\/)?photo(s)?(\/)?(.+?)(\/)?$/,
      code: '<div class="fb-post" data-href="{LINK}" data-width="500" data-show-text="false"></div>'
    },
    facebook_video: {
      site: "Facebook",
      type: "Video",
      match: /facebook.com\/((.+?)\/)?video(s)?(\/)?(.+?)(\/)?$/,
      code: '<div class="fb-video" data-href="{LINK}" data-width="500" data-show-text="false"></div>'
    },
    // Twitter
    twitter: {
      site: "Twitter",
      type: "Tweet",
      match: /twitter.com\/(.+?)\/(\d+)/,
      code: '<div class="embed-tweet" tweet_link="{LINK}" tweet_id="{M2}"></div>'
    },
    // Instagram
    instagram: {
      site: "Instagram",
      type: "Post",
      match: /instagram.com\/p\/(.+?)\//,
      code: '<div class="embed-instagram" insta_link="{LINK}" insta_id="{M1}"></div>'
    },
    // Imgur
    imgur: {
      site: "Imgur",
      type: "Post",
      match: /imgur.com\/(.+?)(\.|$)/,
      code: '<div class="embed-imgur" imgur_link="{LINK}" imgur_id="{M1}"></div>'
    },
  };
  lang = {
    tooltip: "Embed sites",
    insert:  "Insert",
    url:    "URL"
  };
 
  /*------------------ END OF CONFIGURATION ------------------*/
 
  if (!$.sceditor || !window.toolbar) return;
  $('head').append('<style type="text/css">' +
    '.sceditor-button-embed div{ background-image: url(https://i62.servimg.com/u/f62/14/49/87/10/embed_10.png) !important }' +
  '</style>');
 
  $.sceditor.command.set('embed', {
    dropDown : function(editor, caller, callback) {
      // Create shortcut select
      var content = $(
      '<div>' +
      '  <div>' +
      '    <label unselectable="on">' + lang.url + '</label>' +
      '    <input type="text" class="embed-url" placeholder="http://" value="" />' +
      '  </div>' +
      '  <div>' +
      '    <input type="button" class="button" value="' + lang.insert + '" />' +
      '  </div>' +
      '</div>'
      );
      content.find('.button').click(function(e) {
        callback(content.find('.embed-url').val());
        editor.closeDropDown(true);
      });
      editor.createDropDown(caller, 'embed', content);
    },
    // wysiwyg
    exec : function(caller) {
      var editor = this; $.sceditor.command.get('embed').dropDown(editor, caller, function(text) {
        var result, result_match;
        for (i in embed_codes){
          result_match = text.match(embed_codes[i].match);
          if (result_match){
            result = embed_codes[i].code;
            result = result.replace(new RegExp('{LINK}', "gm"), text);
            result = result.replace(new RegExp('{M1}', "gm"), result_match[1]);
            result = result.replace(new RegExp('{M2}', "gm"), result_match[2]);
            result = result.replace("<", "&"+"#60;").replace(">", "&"+"#62;");
            editor.insert(result, '', true, true, true);
            return;
          }
        }
        editor.insert(text, '', true, true, true);
      });
    },
 
    // source
    txtExec : function(caller) {
      var editor = this; $.sceditor.command.get('embed').dropDown(editor, caller, function(text) {
        var result, result_match;
        for (i in embed_codes){
          result_match = text.match(embed_codes[i].match);
          if (result_match){
            result = embed_codes[i].code;
            result = result.replace(new RegExp('{LINK}', "gm"), text);
            result = result.replace(new RegExp('{M1}', "gm"), result_match[1]);
            result = result.replace(new RegExp('{M2}', "gm"), result_match[2]);
            editor.insert(result, '', true, true, true);
            return;
          }
        }
        editor.insert(text, '', true, true, true);
      });
    },
    tooltip : lang.tooltip
  });
  toolbar = toolbar.replace(/youtube/,'embed,youtube'); // add the button to the toolbar
});
 
// Load Facebook Embed
 
function installFacebookEmbedPlugin(){
  $('head').append('<div id="fb-root"></div>' +
  '<script>(function(d, s, id) {' +
    'var js, fjs = d.getElementsByTagName(s)[0];' +
    'if (d.getElementById(id)) return;' +
    'js = d.createElement(s); js.id = id;' +
    'js.src = \'https://connect.facebook.net/ca_ES/sdk.js#xfbml=1&version=v3.0\';' +
    'fjs.parentNode.insertBefore(js, fjs);' +
  '}(document, \'script\', \'facebook-jssdk\'));</script>');
};
 
// Load Twitter Embed
 
function installTwitterEmbedPlugin(){
  $('head').append('<script>window.twttr = (function(d, s, id) {' +
    'var js, fjs = d.getElementsByTagName(s)[0], t = window.twttr || {};' +
    'if (d.getElementById(id)) return t;' +
    'js = d.createElement(s); js.id = id;' +
    'js.src = "https://platform.twitter.com/widgets.js";' +
    'fjs.parentNode.insertBefore(js, fjs);' +
    't._e = []; t.ready = function(f) { t._e.push(f); }; return t;' +
  '}(document, "script", "twitter-wjs"));</script>');
};
 
function waitforTwitterEmbedPlugin(){
  setTimeout(function(){
    if (!window.twttr || !window.twttr.widgets){ waitforTwitterEmbedPlugin(); return; }
    $('div.embed-tweet').filter(function(){
      var current = this;
      var tweet_link = this.getAttribute("tweet_link");
      var tweet_id = this.getAttribute("tweet_id");
      twttr.widgets.createTweet(tweet_id, current);
    });
  }, 100);
};
 
$(document).ready(function() {
  $('head').append('<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>');
  waitforTwitterEmbedPlugin();
});
 
// Load Insagram Embed

function waitforInstagramEmbedPlugin(){
  setTimeout(function(){
    if (!window.instgrm){ waitforInstagramEmbedPlugin(); return; }
    $('div.embed-instagram').filter(function(){
      var current = this;
      var insta_link = this.getAttribute("insta_link");
      insta_link = insta_link.replace("https", "http");
      insta_link = insta_link.replace("www.", "");
      insta_link = insta_link.replace("instagram", "instagr.am");
      insta_link = insta_link.replace(".com", "");
      var insta_id = this.getAttribute("insta_id");
      var oembed = "https://api.instagram.com/oembed?url=" + String(insta_link);
      $.get(oembed, function(data){
        $(current).after(data.html);
        instgrm.Embeds.process();
      });
    });
  }, 100);
};

$(document).ready(function() {
  $('head').append('<script async src="https://www.instagram.com/static/bundles/base/EmbedSDK.js" charset="utf-8"></script>');
  waitforInstagramEmbedPlugin();
});

// Load Imgur Embed

$(document).ready(function() {
  $('div.embed-imgur').filter(function(){
    var current = this;
    var imgur_link = this.getAttribute("imgur_link");
    var imgur_id = this.getAttribute("imgur_id");
    imgur_id = imgur_id.replace("gallery", "a");
    $(current).after('<blockquote class="imgur-embed-pub" lang="en" data-id="' + imgur_id + '"></blockquote>');
    $('head').append('<script async src="//s.imgur.com/min/embed.js" charset="utf-8"></script>');
  });
});

Title: Auto-Embed Button
Placement: In all the pages

Here's how it works, it's very simple. Also you don't have to change anything in the script.

Spoiler:

You can see some examples in the code's description.


Last edited by Wecoc on May 17th 2018, 7:27 pm; edited 5 times in total
avatar
Wecoc
Forumember

Male Posts : 127
Reputation : 82
Language : Catalan, Spanish, English

http://www.mundo-maker.com/

Back to top Go down


Re: SCEditor Auto-Embed Button [BETA]

Post by skouliki on May 17th 2018, 7:49 am

thanks @APE its working ...my issue was that in my forum for some X reason i cannot even see the button at first place '

any ideas where to look ?
checked all java, checked templates, checked css...all similar with my test forum which has no issue


@Wecoc you will not believe the solution to this !!!
when i place the java in the topics and not in all pages the code button appeared cheers
@TonnyKamper try this to see if this will work for you also in phpBB2 forum

the only issue i have is that the button appears only in the quick reply editor not in the new post or in the post reply editor
so in a few words, i must not have both codes in the same place (placement) this is the conflict ONLY in my main forum
avatar
skouliki
Graphic Designer
Graphic Designer

Female Posts : 3894
Reputation : 651
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Re: SCEditor Auto-Embed Button [BETA]

Post by TonnyKamper on May 17th 2018, 12:55 pm

@skouliki wrote:@Wecoc you will not believe the solution to this !!!
when i place the java in the topics and not in all pages the code button appeared cheers
@TonnyKamper try this to see if this will work for you also in phpBB2 forum

the only issue i have is that the button appears only in the quick reply editor not in the new post or in the post reply editor
so in a few words, i must not have both codes in the same place (placement) this is the conflict ONLY in my main forum

I can confirm that by placing it in the topics the button also appeares in the quick reply editor on phpBB2 @skouliki
Problem with that is you can only use it for replies and you can't use the preview feature, because it doesn't work and the button is lost on the editor in that mode.. but except for that all embeds work perfectly.. so could it be that for phpBB2, phpBB3 and PunBB the selector for the editor maybe needs to be addressed differently? phpBB2 and PunBB have the same issue and on phpBB3 on my end the poster profile still get's out of place..
avatar
TonnyKamper
Forumember

Female Posts : 312
Reputation : 18
Language : Dutch/English
Location : The Netherlands

http://www.nederlandheelt.nl/forum

Back to top Go down

Re: SCEditor Auto-Embed Button [BETA]

Post by skouliki on May 17th 2018, 1:21 pm

@TonnyKamper wrote:
I can confirm that by placing it in the topics the button also appeares in the quick reply editor on phpBB2 @skouliki
Problem with that is you can only use it for replies and you can't use the preview feature, because it doesn't work and the button is lost on the editor in that mode.. but except for that all embeds work perfectly.. so could it be that for phpBB2, phpBB3 and PunBB the selector for the editor maybe needs to be addressed differently? phpBB2 and PunBB have the same issue and on phpBB3 on my end the poster profile still get's out of place..

yes you are right the button is lost in the preview ...lets hope Wecoc can figure out a solution to this
avatar
skouliki
Graphic Designer
Graphic Designer

Female Posts : 3894
Reputation : 651
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Re: SCEditor Auto-Embed Button [BETA]

Post by Wecoc on May 17th 2018, 7:42 pm

Thank you very much for the feedback. I updated the code a bit more, using the GIFActif code as reference since they are similar.
Bug 1 (button not appearing) should be fixed now, let's see if it's true.

lets hope Wecoc can figure out a solution to this
Soon or later I will, at least I believe now I'm getting closer blackeye

As for the Bug 2 (post content break)
@TonnyKamper this may sound strange but if it still occurs with the new version please disable the code.
I will try the code myself directly in the console box of your forum until I get exactly the origin of the problem, but I can't do that if you have the code already enabled in your forum.
avatar
Wecoc
Forumember

Male Posts : 127
Reputation : 82
Language : Catalan, Spanish, English

http://www.mundo-maker.com/

Back to top Go down

Re: SCEditor Auto-Embed Button [BETA]

Post by skouliki on May 17th 2018, 8:07 pm

in my case, the issue remains as i stated in my last post ..i didnt see any change
avatar
skouliki
Graphic Designer
Graphic Designer

Female Posts : 3894
Reputation : 651
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Re: SCEditor Auto-Embed Button [BETA]

Post by SLGray on May 17th 2018, 8:12 pm

The members who are having issues do you have heavy modified templates?


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 43468
Reputation : 3084
Language : English
Location : United States

http://fmthemesdesignteam.forumotion.com/

Back to top Go down

Re: SCEditor Auto-Embed Button [BETA]

Post by TonnyKamper on May 17th 2018, 10:49 pm

@Wecoc wrote:Thank you very much for the feedback. I updated the code a bit more, using the GIFActif code as reference since they are similar.
Bug 1 (button not appearing) should be fixed now, let's see if it's true.

lets hope Wecoc can figure out a solution to this
Soon or later I will, at least I believe now I'm getting closer blackeye

As for the Bug 2 (post content break)
@TonnyKamper this may sound strange but if it still occurs with the new version please disable the code.
I will try the code myself directly in the console box of your forum until I get exactly the origin of the problem, but I can't do that if you have the code already enabled in your forum.

In my case the new code didn't changed anything too @Wecoc the button is still not showing up in phpBB2 in the New Topic editor, only in the quick reply one..
I have now disabled the code on my phpBB3 forum for you Wecoc, because the new code didn't changed anything on there either... so please feel free to experiment with it in the console and if you need access to an account, I can provide it Smile

@SLGray wrote:The members who are having issues do you have heavy modified templates?
I have slightly modified templates on the phpBB2 version @SLGray but forcing the default templates didn't made a difference, the button still isn't showing up in the editor of New Topic..

avatar
TonnyKamper
Forumember

Female Posts : 312
Reputation : 18
Language : Dutch/English
Location : The Netherlands

http://www.nederlandheelt.nl/forum

Back to top Go down

Re: SCEditor Auto-Embed Button [BETA]

Post by skouliki on May 18th 2018, 6:54 am

@SLGray wrote:The members who are having issues do you have heavy modified templates?
I also forced the default templates and switch off all java but this didnt solve the issue
avatar
skouliki
Graphic Designer
Graphic Designer

Female Posts : 3894
Reputation : 651
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Page 2 of 2 Previous  1, 2

Back to top


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