A JavaScript plugin that analyses the string and automatically embeds the supported emojis, media, maps, tweets, code and services.

Important links

• Features
• Full Documentation
• Examples

Installation

To install the stable version:

npm install --save embed-js

CDN

• jsDelivr

Simple Usage

Let's assume that the HTML structure is as written below

<div id="element">
   <!--===== your string here =======-->
</div>

Creating an instance of embed.js

var x = new EmbedJS({
  input: document.getElementById('element'),
  googleAuthKey : 'xxxx'
})

Next step is replacing the original text with the processed text.

//Render the result
x.render();

There may be cases where you just want the processed string to use it according to your need. You can get it by the following method.

//Get the resulting string
x.text(function(data){
  console.log(data); //The resultant string
})

If you wan't to destroy the instance. It will also replace the processed string with the original string.

//Destroy the instance
x.destroy()

Options

var options = {
	//An option when set to true will use marked.js to parse markdown and convert it to HTML.
	// Make sure you have loaded marked.js before loading embed.js if this option is set to
	// true else the plugin will throw an error.
	marked                 : false,

	// The option takes the marked.js options.
	markedOptions          : {},

	// Instructs the plugin whether or not to embed urls/ convert urls into HTML anchor tags.
	link                   : true,

	linkOptions            : {
		// Same as the target attribute in html anchor tag . supports all html supported target values.
		target : 'self',

		// Accept array of extensions to be excluded from converting into HTML anchor links
		exclude: ['pdf'],

		// Same as the rel attribute.
		rel    : ''
	},

	// Set to false if you want to disable converting emoji codes into actual emojis.
	emoji                  : true,

	// Include the names of custom emojis. Eg : ['emoji1', 'emoji2']. Now they can be
	// used using :emoji1: :emoji2:
	customEmoji            : [],


	fontIcons              : true,
	customFontIcons        : [],
	highlightCode          : false,
	videoJS                : false,
	videojsOptions         : {
		fluid  : true,
		preload: 'metadata'
	},
	locationEmbed          : true,
	mapOptions             : {
		mode: 'place'
	},
	tweetsEmbed            : false,
	tweetOptions           : {
		maxWidth  : 550,
		hideMedia : false,
		hideThread: false,
		align     : 'none',
		lang      : 'en'
	},
	singleEmbed            : false,

	// For using the open graph support (fetching site's meta data) , you will have
	// to set up your own server due to cross domain restrictions. This option takes
	// the api template as the string where url is a variable.
	openGraphEndpoint      : null,

	// Urls that have the array items in their string won't be processed by the
	// openGraph API.
	openGraphExclude       : [],

	// Set to false if you want to disable embedding supported video formats.
	videoEmbed             : true,


	videoHeight            : null,
	videoWidth             : null,
	videoDetails           : true,
	audioEmbed             : true,
	excludeEmbed           : [],
	inlineEmbed            : [],
	inlineText             : true,
	codeEmbedHeight        : 500,
	vineOptions            : {
		maxWidth  : null,
		type      : 'postcard', //'postcard' or 'simple' embedding
		responsive: true,
		width     : 350,
		height    : 460
	},

	// The google dev auth key needed if the user is using youtube embedding or
	// google map embedding feature of the plugin.
	googleAuthKey          : '',

	soundCloudOptions      : {
		height      : 160,
		themeColor  : 'f50000', //Hex Code of the player theme color
		autoPlay    : false,
		hideRelated : false,
		showComments: true,
		showUser    : true,
		showReposts : false,
		visual      : false, //Show/hide the big preview image
		download    : false //Show/Hide download buttons
	},
	videoClickClass        : 'ejs-video-thumb',
	customVideoClickHandler: false,
	beforeEmbedJSApply     : function () {},
	afterEmbedJSApply      : function () {},
	onVideoShow            : function () {},
	onTweetsLoad           : function () {},
	videojsCallback        : function () {},
	onOpenGraphFetch       : function () {},
	videoClickHandler      : function () {}
}

Creating custom build

Set the features you don't want to false in build.json and then run

grunt build

This will create a customized build of the plugin.

Adding custom emojis

1. Add the image to assets/images/emojis. Make sure the name of the file is same as emoji name.
2. Pass the emoji name as the value to customEmoji. See the example here
3. Run grunt build-emoji && grunt build

License

MIT © Ritesh Kumar