Init

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2014 MCProHosting
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

readme.md

@@ -0,0 +1,7 @@
+# redimage
+
+Simple redactor plugin to allow embedding of external images. How does Redactor not already have this built-in? I don't know.
+
+# License
+
+MIT

redimage.js

@@ -0,0 +1,97 @@
+(function () {
+
+    var plugins = this.RedactorPlugins = this.RedactorPlugins || {};
+
+    /**
+     * Redimage plugin. Little hack there - we're attaching properties to the
+     * function itself rather than using an object literal, so that a consumer
+     * of this plugins can modify/override functions as they like.
+     *
+     * @return {[type]} [description]
+     */
+    plugins.redimage = function () {
+        return plugins.redimage;
+    };
+
+    /**
+     * Returns the template string for the modal popup.
+     *
+     * @return {String}
+     */
+    plugins.redimage.getTemplate = function() {
+        return String() +
+            '<section id="redactor-modal-redimage-insert">' +
+                '<label>Link to Image</label>' +
+                '<input type="text" id="redactor-redimage-link" />' +
+                '<label>Image Title</label>' +
+                '<input type="text" id="redactor-redimage-title" />' +
+            '</section>';
+    };
+
+    /**
+     * Initialises the plugin, adding its image to the Redactor toolbar.
+     */
+    plugins.redimage.init = function () {
+        var button = this.button.add('redimage-btn', 'Link Image');
+        this.button.setAwesome('redimage-btn', 'fa-photo');
+        this.button.addCallback(button, this.redimage.show);
+    };
+
+    /**
+     * Displays the modal popup.
+     */
+    plugins.redimage.show = function () {
+        // Create a new modal template and load the popup
+        this.modal.addTemplate('redimage', this.redimage.getTemplate());
+        this.modal.load('redimage', 'Insert Image', 500);
+
+        // Add a cancel button.
+        this.modal.createCancelButton();
+
+        // Add a button to finish and insert the image.
+        var button = this.modal.createActionButton(this.lang.get('insert'));
+        button.on('click', plugins.redimage.insert);
+
+        // Show the popup.
+        this.selection.save();
+        this.modal.show();
+    };
+
+    /**
+     * Inserts an image into the Redactor document.
+     */
+    plugins.redimage.insert = function () {
+        var link = escape($('#redactor-redimage-link').val());
+        var title = escape($('#redactor-redimage-title').val());
+
+        this.insert.html('<img src="' + link + '" alt="' + title + '">');
+        this.modal.close();
+    };
+
+    /**
+     * Used by `escape` to convert characters to HTML entities. From lodash.
+     *
+     * @param {string} match The matched character to escape.
+     * @returns {string} Returns the escaped character.
+     */
+    function escapeHtmlChar(match) {
+      return {
+            '&': '&amp;',
+            '<': '&lt;',
+            '>': '&gt;',
+            '"': '&quot;',
+            "'": '&#39;'
+        }[match];
+    }
+    /**
+     * Converts the characters `&`, `<`, `>`, `"`, and `'` in `string` to their
+     * corresponding HTML entities. From lodash.
+     *
+     * @param {string} string The string to escape.
+     * @returns {string} Returns the escaped string.
+     */
+    function escape (str) {
+        return str.replace(/[&<>"'"]/g, escapeHtmlChar);
+    }
+
+}).call(this);

test/index.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Redimage</title>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="http://imperavi.com/js/redactor/redactor.css" />
+    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
+</head>
+<body>
+    <div id="page">
+        <textarea id="content" name="content"></textarea>
+    </div>
+
+    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
+    <script src="../redimage.js"></script>
+    <script src="http://imperavi.com/js/redactor/redactor.js"></script>
+    <script type="text/javascript">
+    $(function()
+    {
+        $('#content').redactor({
+            plugins: ['redimage']
+        });
+    });
+    </script>
+</body>
+</html>