Tweets plugin for Imperavi Redactor

README.md

Tweets plugin for Imperavi Redactor

Usage:

• Add plugin's file to your assets folder or in the (bottom of the );
• Add font-awesome http://fortawesome.github.io/Font-Awesome/ (since this plugin using font-awesome icon, you can put your own icon anyway, see docs: http://imperavi.com/redactor/docs/how-to-add-button/)
• Put plugin name to plugins hash when configuring Imperavi Redactor instance:

$('.redactor').redactor({
        focus: true,
        plugins: ['tweets'],
    );

• Enjoy :)

tweets.js

/**
 * Imperavi Redactor Plugin for Embedding Tweets
 * Compatible with Redactor >= 10.1.1
 *
 * @author Vladimir Katansky <[email protected]>
 * @version 1.0.0
 *
 */
if (!RedactorPlugins) var RedactorPlugins = {};

(function($)
{
RedactorPlugins.tweets = function() {

    return {
        getTemplate: function()
        {
            return String() +
                '<div class="tweets-plugin">' +
                '   <section>' +
                '       <p>' +
                '           <label>Pass link to tweet </br>' +
                '               (e.g. https://twitter.com/DailyStolenBase/status/596855080806146049)' +
                '           </label>' +
                '               <input type="text" id="tweet-url" value="" placeholder="#" style="width: 100%" />' +
                '       </p>' +
                '       <p>' +
                '           <label>' +
                '               <input type="checkbox" id="tweet-show-media" value="1" checked /> Show image' +
                '           </label>' +
                '       </p>' +
                '       <p>' +
                '           <label>' +
                '               <input type="checkbox" id="tweet-show-thread" value="1" /> Show thread' +
                '           </label>' +
                '       </p>' +
                '   </section>' +
                '</div>';
        },
        init: function () {
            var button = this.button.add('tweets', 'Tweets');

            this.modal.addTemplate('tweets', this.tweets.getTemplate());
            this.button.setAwesome('tweets', 'fa-twitter');
            this.button.addCallback(button, this.tweets.show);
        },
        show: function(e) {
            if (typeof e != 'undefined' && e.preventDefault) e.preventDefault();

            this.modal.load('tweets', 'Insert Tweets', 600);

            //create buttons
            this.modal.createCancelButton();
            this.tweets.buttonInsert = this.modal.createActionButton(this.lang.get('insert'));

            this.tweets.buttonInsert.on('click', $.proxy(this.tweets.insert, this));

            this.selection.save();
            this.buffer.set();
            this.modal.show();
        },
        insert: function () {
            var tweetURL = $('#tweet-url').val();
            var tweetHideMedia = ($('#tweet-show-media').prop('checked') == true) ? 0 : 1;
            var tweetHideThread = ($('#tweet-show-thread').prop('checked') == true) ? 0 : 1;

            $.get('https://api.twitter.com/1/statuses/oembed.json', {
                url: tweetURL, omit_script: 1,
                related: 'tjournalru', maxwidth: 510, 'lang': 'en', hide_media: tweetHideMedia,
                hide_thread: tweetHideThread
            }, $.proxy(function (data) {
                if (data.html) {
                    this.selection.restore();
                    this.insert.html(data.html);
                    this.modal.close();
                    this.observe.load();
                } else {
                    alert('Error! Incorrect Twitter URL. Please, copy and paste twitter URL exactly from browser');
                }
            }, this), 'jsonp');
        }
    }
}
})(jQuery);