SCEditor Auto-Embed Button

Page 2 of 2 Previous  1, 2

Go down

SCEditor Auto-Embed Button

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.

Version 1.2 (current): Facebook, Twitter, Instagram, Imgur, Soundcloud, Flickr

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

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.20 EN (2018-08-12)
* 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

  Soundcloud
https://soundcloud.com/the-bugle/bugle-179-playas-gon-play
https://soundcloud.com/tenaciousd/sets/rize-of-the-fenix/

  Flickr
https://www.flickr.com/photos/babsphotosecosse/29042463337/in/explore-2018-08-11/

*/
 
$(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>'
    },
    // Soundcloud
    soundcloud: {
      site: "Soundcloud",
      type: "Song",
      match: /soundcloud.com/,
      code: '<div class="embed-soundcloud" soundcloud_link="{LINK}"></div>'
    },
    // Flickr
    flickr: {
      site: "Flickr",
      type: "Photo",
      match: /flickr.com\/photos\/(.+?)\/(\d+?)(\/)/,
      code: '<div class="embed-flickr" flickr_link="{LINK}" flickr_id="{M2}"></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");
      var insta_id = this.getAttribute("insta_id");
      insta_link = insta_link.replace("www.", "");
      insta_link = insta_link.replace("instagram", "instagr.am");
      insta_link = insta_link.replace(".com", "");
      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() {
  var insta_embedSDK = "https://www.instagram.com/static/bundles/base/EmbedSDK.js/17c189f82307.js";
  $('head').append('<script async src="' + insta_embedSDK + '" 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>');
  });
});

// Load Soundcloud Embed

$(document).ready(function() {
  $('div.embed-soundcloud').filter(function(){
    var current = this;
    var sc_link = this.getAttribute("soundcloud_link");
    var h = (sc_link.match(/\/sets\//)) ? 450 : 166;
    $(current).after('<iframe data-s9e-mediaembed="soundcloud" scrolling="no"' +
    'src="https://w.soundcloud.com/player/?url=' + sc_link + '" style="border:0;height:' + h + 'px;' +
    'max-width:900px;width:100%"></iframe>');
  });
});

// Load Flickr Embed

$(document).ready(function() {
  $('div.embed-flickr').filter(function(){
    var current = this;
    var flickr_link = this.getAttribute("flickr_link");
    var flickr_id = this.getAttribute("flickr_id");
    $(current).after('<div style="overflow:hidden;position:relative;padding-bottom:100%">' +
    '<iframe scrolling="no" src="https://www.flickr.com/photos/_/' + flickr_id + '/player/"' +
    'style="border:0;max-width:900px;height:100%;left:0;position:absolute;width:100%"></iframe></div>');
  });
});

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 August 13th 2018, 7:05 pm; edited 7 times in total
avatar
Wecoc
Forumember

Male Posts : 136
Reputation : 98
Language : Catalan, Spanish, English

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

Back to top Go down


Re: SCEditor Auto-Embed Button

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
Manager
Manager

Female Posts : 4485
Reputation : 746
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Re: SCEditor Auto-Embed Button

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 : 344
Reputation : 25
Language : Dutch/English
Location : The Netherlands

http://www.nederlandheelt.nl/forum

Back to top Go down

Re: SCEditor Auto-Embed Button

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
Manager
Manager

Female Posts : 4485
Reputation : 746
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Re: SCEditor Auto-Embed Button

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 : 136
Reputation : 98
Language : Catalan, Spanish, English

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

Back to top Go down

Re: SCEditor Auto-Embed Button

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
Manager
Manager

Female Posts : 4485
Reputation : 746
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Re: SCEditor Auto-Embed Button

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 : 44202
Reputation : 3142
Language : English
Location : United States

http://fmthemesdesignteam.forumotion.com/

Back to top Go down

Re: SCEditor Auto-Embed Button

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 : 344
Reputation : 25
Language : Dutch/English
Location : The Netherlands

http://www.nederlandheelt.nl/forum

Back to top Go down

Re: SCEditor Auto-Embed Button

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
Manager
Manager

Female Posts : 4485
Reputation : 746
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Re: SCEditor Auto-Embed Button

Post by Snows on August 3rd 2018, 2:09 am

@Wecoc wrote: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.

This code is no longer working in my forum, please someone should help
avatar
Snows
Forumember

Posts : 33
Reputation : 4
Language : English

http://Www.9jatechs.com

Back to top Go down

Re: SCEditor Auto-Embed Button

Post by SLGray on August 3rd 2018, 3:11 am

Make sure that JavaScript Management is activate.


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

avatar
SLGray
Administrator
Administrator

Male Posts : 44202
Reputation : 3142
Language : English
Location : United States

http://fmthemesdesignteam.forumotion.com/

Back to top Go down

Re: SCEditor Auto-Embed Button

Post by Snows on August 3rd 2018, 3:39 am

@SLGray wrote:Make sure that JavaScript Management is activate.
is active, it has been working fine but suddenly it stopped working.
avatar
Snows
Forumember

Posts : 33
Reputation : 4
Language : English

http://Www.9jatechs.com

Back to top Go down

Re: SCEditor Auto-Embed Button

Post by SLGray on August 3rd 2018, 3:52 am

Well, there was an issue awhile back where Forumotion turned it off to fix the issue.


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

avatar
SLGray
Administrator
Administrator

Male Posts : 44202
Reputation : 3142
Language : English
Location : United States

http://fmthemesdesignteam.forumotion.com/

Back to top Go down

Re: SCEditor Auto-Embed Button

Post by Snows on August 3rd 2018, 3:57 am

@SLGray wrote:Well, there was an issue awhile back where Forumotion turned it off to fix the issue.
Are you saying the code is no longer working for forumotion forums?
avatar
Snows
Forumember

Posts : 33
Reputation : 4
Language : English

http://Www.9jatechs.com

Back to top Go down

Re: SCEditor Auto-Embed Button

Post by SLGray on August 3rd 2018, 4:58 am

No, I mean JavaScript Management.


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

avatar
SLGray
Administrator
Administrator

Male Posts : 44202
Reputation : 3142
Language : English
Location : United States

http://fmthemesdesignteam.forumotion.com/

Back to top Go down

Re: SCEditor Auto-Embed Button

Post by TonnyKamper on August 3rd 2018, 3:08 pm

@Snows wrote:
@SLGray wrote:Make sure that JavaScript Management is activate.
is active, it has been working fine but suddenly it stopped working.

There is a problem with the code, it leaves out the closing < /div > tag at the end for some unknown reason, this is not solved yet..
But if you really want to keep using it, try this, for me the code works fine if you put that closing tag manually at the end of the code in the editor, then click send and it displays fine Smile
avatar
TonnyKamper
Forumember

Female Posts : 344
Reputation : 25
Language : Dutch/English
Location : The Netherlands

http://www.nederlandheelt.nl/forum

Back to top Go down

Re: SCEditor Auto-Embed Button

Post by Snows on August 4th 2018, 12:05 pm

@TonnyKamper wrote:
@Snows wrote:
@SLGray wrote:Make sure that JavaScript Management is activate.
is active, it has been working fine but suddenly it stopped working.

There is a problem with the code, it leaves out the closing < /div > tag at the end for some unknown reason, this is not solved yet..
But if you really want to keep using it, try this, for me the code works fine if you put that closing tag manually at the end of the code in the editor, then click send and it displays fine Smile
Have tried that but it's not still working for me
avatar
Snows
Forumember

Posts : 33
Reputation : 4
Language : English

http://Www.9jatechs.com

Back to top Go down

Re: SCEditor Auto-Embed Button

Post by TonnyKamper on August 4th 2018, 11:39 pm

@Snows wrote:Have tried that but it's not still working for me

I'm sure you already did, but just to make sure, did you put the closing tag without the spaces I had to put in to make it visible here? The right format for the closing div tag is:
Code:
</div>
avatar
TonnyKamper
Forumember

Female Posts : 344
Reputation : 25
Language : Dutch/English
Location : The Netherlands

http://www.nederlandheelt.nl/forum

Back to top Go down

Re: SCEditor Auto-Embed Button

Post by Wecoc on August 6th 2018, 9:20 pm

As far as there has been more problems than expected, I will soon make a big update on the code to make it cleaner.
I will test it in different browsers and forum versions to make sure everything works as expected.
Until then please be patient, I can't say it exactly for now but it should be ready in one week or so.
avatar
Wecoc
Forumember

Male Posts : 136
Reputation : 98
Language : Catalan, Spanish, English

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

Back to top Go down

Re: SCEditor Auto-Embed Button

Post by TonnyKamper on August 6th 2018, 10:27 pm

@Wecoc wrote:As far as there has been more problems than expected, I will soon make a big update on the code to make it cleaner.
I will test it in different browsers and forum versions to make sure everything works as expected.
Until then please be patient, I can't say it exactly for now but it should be ready in one week or so.

Thank you very much @Wecoc we'll be waiting patiently for the update, thank you for spending your time on this Smile
avatar
TonnyKamper
Forumember

Female Posts : 344
Reputation : 25
Language : Dutch/English
Location : The Netherlands

http://www.nederlandheelt.nl/forum

Back to top Go down

Re: SCEditor Auto-Embed Button

Post by Wecoc on August 13th 2018, 7:01 pm

New version 1.2 now available!

- The Insagram external javascript wasn't working anymore due to an update on their API, now it's working again.
- 2 minor bugs (because of undefined local variables) were found and fixed. This may solve the closing div problem but I can't confirm.
- Added basic Soundcloud & Flickr embeds.
- Tested on Internet Explorer, Firefox and Chrome, including "Chrome device toolbar" version. Tested on phpBB2, phpBB3 and modernBB. No changes were found between versions.

I will remove the "Beta" on its name since I consider it pretty finished now.
I know the list of possible pages to embed is incomplete but with the script as it is so far, it isn't very hard to intuit how to include some of them in particular cases, if your forum really needs any of them. Also some aren't very interesting in my opinion, for example I wouldn't embed raw Github/Pastebin texts since you get the same simply using the raw version link already offered by the page.

Maybe in a close future I'll add some more interesting ones but for now I'm content if everything works Laughing

About including more embeds:
There are basically two types of embeds; those which size (specially height) is variable depending on the content inside, and those with fixed height. The first ones use an embed API so you have to load the external javascript in a script tag, while with the second ones usually a simple iframe does the trick.

Facebook and Twitter are good examples of the first case, Soundcloud and Flickr are the second case instead.

Hope everything is fine now Smile
avatar
Wecoc
Forumember

Male Posts : 136
Reputation : 98
Language : Catalan, Spanish, English

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

Back to top Go down

Re: SCEditor Auto-Embed Button

Post by TonnyKamper on August 14th 2018, 1:50 pm

Thank you @Wecoc I just tested it on Invision and it's working perfectly on that version, but on phpBB2, phpBB3 and ModernBB it still leaves out the closing div tags.. and on phpBB2 it still isn't working in the new topic editor, only on the quick reply, but with no closing div tags.. in the new topic editor the button isn't showing up not even anymore when it's on the topics instead of all pages..

So to sum it up in Invision it works perfectly, the other versions are stuck with posts without closing div tags, they need to be added manually and phpBB2 can only use it in the quick reply but also needs to add the closing div tag manually.
avatar
TonnyKamper
Forumember

Female Posts : 344
Reputation : 25
Language : Dutch/English
Location : The Netherlands

http://www.nederlandheelt.nl/forum

Back to top Go down

Re: SCEditor Auto-Embed Button

Post by YoshiGM on August 26th 2018, 1:19 am

The code don't seems to work in my Spanish Test forum :/
avatar
YoshiGM
Forumember

Male Posts : 757
Reputation : 108
Language : Spanish & English
Location : Mexico

http://asistencia.foroactivo.com/u21373

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