ngEmbed

An AngularJS directive for converting text emojis into image-based emoticons, also supporting automatic multimedia link embedding
0 people use it
Author: 5389035?v=3 ritz078

ngEmbed

An AngularJS filter/directive for converting text into emoticons, embedding videos (youtube/vimeo/mp4,ogg), audio, pdf, highlighting code syntax and embedding almost every service in an ordinary text string .

The demo examples are given here

PS : The jquery version of this module is embed-js.

Join the chat at https://gitter.im/ritz078/ngEmbed

Contents

Features

  • Converts emoticon text codes into emoticons :smile: , :heart:
  • Finds links in text input and turns them into html links.
  • Youtube and Vimeo video embedding with video details fetched from the api.
  • HTML5 player supported media embedding (mp3,mp4,ogg)
  • PDF viewing with preview and then the actual pdf in a frame.
  • Inline Code Syntax highlighting (uses highlight.js)
  • Twitter tweet embedding supported
  • Codepen, jsbin, jsfiddle, ideone, plunker and github gist embed supported
  • soundcloud and spotify support
  • Twitch tv, dotSub, dailymotion, TED and liveLeak support.

Dependencies

  • AngularJs 1.2 or above
  • angular-sanitize 1.2 or above
  • highlight.js (Optional if code highlighting required)
  • Twiiter widget js (if twitter embedding required)

Getting Started

Install through bower html bower install --save ng-embed Install through npm html npm install --save ng-embed

load css files html <link rel="stylesheet" href="path/to/ng-embed.min.css"/>

Then load the following files ```html

<!--==== Optional =====--> <!--===================-->

```

Load 'Emoticons' as a dependency javascript angular.module('yourAppname', ['ngEmbed'])

Filter Use

You can use the filter for basic use. Its features are limited to converting text into emojis, font smileys and HTML Links.

Options javascript embed:{ link :true, //for coverting urls into anchor tags linkTarget :'_self' //_blank|_self|_parent|_top|framename }

Directive Usage

The directive supports many features in additions to the features supported by the filter.

And is fully customizable

Directive ```html <ng-embed embed-data="text" embed-template-url="template.html" embed-options="options"

```

Attribute|Description ---------|----------- embed-data|The scope variable that contains the text string to be processed embed-options|The scope variable that contains the options object (mandatory) embed-template-url|User defined template for the processed text

Options

Default Template

You can make your custom template and use it and even change the styling of the default template by changing the classes. I am giving you the default template so that you are not confused while making your own template and properly know the class names if you want to change the styling.

There are certain variables that are available for the template. Its structure is given below.

Template Variables

These variable can be used while you are creating your custom template.

Examples

The examples are given here

Releases

Older releases are listed here

Contributing

  • If you are Interested in contributing to this project, you are most welcome.
  • If it is a bug-fix/improvement, first report it at issues
  • Discuss with us in detail about your issue/improvement
  • Get the issue allotted.
  • If you are contributing a bug-fix or a very minor addition, feel free to do a pull request on the master # branch.
  • If you are unsure about the bug/improvement, create an issue to discuss.
  • Report bugs @ issues

License

The MIT License (MIT)

Copyright (c) 2014 Ritesh Kumar

comments powered by Disqus
This page was last updated almost 2 years ago.