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.
- Getting Started
- Filter Usage
- Directive Usagein
- Default Template
- Template Variables
- 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.
- 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)
Install through bower
bower install --save ng-embed
Install through npm
npm install --save ng-embed
load css files
<link rel="stylesheet" href="path/to/ng-embed.min.css"/>
Then load the following files ```html
<!--==== Optional =====--> <!--===================-->
Load 'Emoticons' as a dependency
You can use the filter for basic use. Its features are limited to converting text into emojis, font smileys and HTML Links.
link :true, //for coverting urls into anchor tags
linkTarget :'_self' //_blank|_self|_parent|_top|framename
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
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.
These variable can be used while you are creating your custom template.
The examples are given here
Older releases are listed here
- 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
The MIT License (MIT)
Copyright (c) 2014 Ritesh Kumar