Installation

Installing REMARK jQuery is pretty straight forward. Include the both the jQuery and REMARK jQuery plugin. jQuery and remake.min.js using script html element(s), like so:

    <link rel="stylesheet" href="remark-redactor-plugin/remark.css" type="text/css" />
    
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript" src="remark-redactor-plugin/remark.js"></script>
    <script type="text/javascript" src="PATH-TO-YOUR-REDACTOR/redactor.min.js"></script>

* Notice the jQuery library I included was google code library, I recommend using latest version.
* remark.css is optional. It is only add to outline on Remarked image. (for difference).

Adding Plugin to Redactor

<script>
$(function(){
    $("#redactor").redactor({
       plugins: ['remark']
    });
});
</script>

Remark plugin added on Redactor

Usage

  1. Select image
  2. Click on Remark toolbar
  3. Fill Caption and Description field
  4. Optional. Enable or Disable Headline mode
  5. Optional. Change the alignment
  6. Then Save.


Image selected and called Remark modal



The image is Remarked



  • You can easily add/modify Caption
  • You can easily add/modify Description
  • You can repostion image
  • Remark always follow the image and it's deminsions
  • Remark possible to configure more than <figure>, <figcaption>
  • You can use it like as Headline. It means Caption and Description can be placed front of the image.
  • Shade and Alignment etc... You know it has many config options.


Result


BamDaa Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas inventore enim possimus quam molestias dignissimos officiis reprehenderit autem quod odio aliquid, iusto nesciunt quaerat voluptatibus, quae perferendis, non maxime. Veritatis molestiae, corporis sed sequi veniam animi vero eos iure natus, voluptate iste alias sapiente? Aut provident, blanditiis cupiditate molestias. Quam temporibus, et, sapiente, quae molestiae provident delectus praesentium esse distinctio impedit, laudantium veniam? Nemo nisi impedit quaerat, blanditiis omnis necessitatibus aspernatur, cupiditate id eius quidem laboriosam voluptas amet reprehenderit quos deserunt placeat, delectus quo. Eius, possimus! Nisi modi dolore rerum illo obcaecati voluptatibus assumenda illum ullam, unde, eos nam maiores delectus suscipit harum ad facilis tenetur accusamus placeat repellendus. Sit obcaecati animi laudantium harum, quos? Illum consectetur qui maxime eaque possimus id aut, laborum labore, fugiat odio, nulla nostrum. Nemo, id nobis. Ipsam adipisci harum optio dolores molestiae voluptatem, corporis, ducimus neque, cumque temporibus nam sequi dolorum totam.

BamDaa

Sed similique, minus voluptate ea officiis quidem nemo exercitationem suscipit dolorem commodi, dolor, beatae tempore atque vel, voluptatum amet sunt enim nostrum dicta quas obcaecati id odit? Quisquam eum deleniti ducimus illo impedit vitae id eius omnis, dolor corrupti accusamus modi. Doloremque voluptatem consequatur accusamus eum quas impedit, corporis esse fugit, aperiam eligendi est dolorum et voluptates. Officia repellendus quo excepturi quasi inventore distinctio doloribus quisquam numquam vero, iste quis fugiat sunt illum, vitae nobis similique obcaecati amet reiciendis itaque voluptates autem vel ducimus totam ut. Nesciunt quaerat officia rerum deserunt iusto porro, veritatis sapiente cum nam culpa, possimus eius corrupti facere fuga rem recusandae? Molestias sequi ipsam voluptatem magni perspiciatis cupiditate accusantium. BamDaa Illo reiciendis soluta animi corrupti accusamus aspernatur, enim, quasi quas praesentium obcaecati ad nemo, provident earum voluptatibus repudiandae, eveniet neque adipisci. Ea amet, veniam deserunt quod, neque voluptatem itaque nesciunt, repellat praesentium ipsum laborum molestias animi iure accusantium quae culpa labore architecto libero earum nostrum ut sapiente tempore temporibus fugiat? Qui accusantium aperiam, modi dolorum nulla, architecto a fugiat perferendis tenetur debitis fuga ut molestias tempora reprehenderit, iusto ex nisi amet maxime voluptatibus id autem. Repellat quis itaque, praesentium dolor molestiae odio a ad! Quaerat voluptatibus tempora, eligendi incidunt officiis voluptates nobis fugiat reiciendis, soluta harum quam iure, natus quidem laboriosam. Hic error veniam architecto tenetur, possimus veritatis aliquam impedit eveniet quam, molestias quasi facere consectetur perferendis, dolore eos pariatur ullam nulla voluptas cumque! Placeat necessitatibus blanditiis labore quis cupiditate, obcaecati accusamus cum molestias sit amet. Suscipit sequi sapiente, cum aliquam, ducimus officiis tenetur necessitatibus quae animi praesentium! Minima distinctio deleniti, inventore eveniet dolorem ratione placeat soluta, dicta aliquam mollitia tempora, quasi? Consequuntur repellat vel fugit, id illo doloremque. Reiciendis laboriosam beatae at, voluptas praesentium ad blanditiis eligendi quos ex eum fugit eaque in, id. Numquam in eveniet aliquid totam rem, sint! Velit doloribus, exercitationem quo officia tempora, assumenda quam vitae animi dolorem! Nesciunt et aliquam non asperiores voluptate ea molestias commodi facere optio porro obcaecati earum nihil, sed dolorem animi illo, iste! Ipsam cumque quam voluptatibus, ullam placeat soluta asperiores perspiciatis dolorum, minima, iure ratione, consequatur iusto rem sed maiores. Ab eius voluptas dignissimos minus illo molestias harum consequatur eaque consectetur, perferendis ea explicabo odit repudiandae! Voluptatem harum rem nam nemo dignissimos? Aliquam illum asperiores, iste illo, inventore tenetur nobis optio repellat, fugit tempora voluptatem corrupti ullam eum dolor veniam reiciendis velit natus explicabo libero labore sunt? Expedita necessitatibus quaerat adipisci. Dolor debitis omnis illum voluptatum distinctio doloremque adipisci atque deserunt.

BamDaa

Sed tenetur debitis suscipit vero magni quibusdam nisi, at neque. Repellendus veritatis, natus labore velit. Numquam illum impedit earum vitae possimus adipisci, veniam voluptas saepe inventore. Soluta voluptas fuga commodi veritatis odit recusandae doloremque explicabo natus neque quaerat consequuntur minus, sit, architecto, provident dolore vel, assumenda veniam! Voluptas dolorem laborum iste iure itaque, sed ipsam eius nulla reprehenderit id exercitationem quidem fuga, temporibus ipsa minus molestias expedita nesciunt eos alias atque odit! Aspernatur suscipit vitae obcaecati nobis unde similique, soluta sapiente necessitatibus cum fugiat qui a animi amet. Animi omnis, illum distinctio! Enim obcaecati voluptas ut sequi, qui quibusdam suscipit non, perspiciatis, at consequuntur odio neque libero, sint quae repellendus reprehenderit in minus omnis ipsam. Laboriosam accusantium nemo id mollitia laudantium tempore facere est autem ut dolor.