Magic Icon String Deposit (): Magic JavaScript

Quick Jump ↵

Insert text strings into the Magic Editor and other form fields

Initial Setup

Add <link href="/PATH/TO/magic/tricks/darkroom/darkroom..css" rel="stylesheet">
<script type="text/javascript" src="/PATH/TO/magic/tricks/darkroom/darkroom..js" charset="UTF-8"></script>
<link href="/PATH/TO/magic/tricks/string_deposit/string_deposit..css" rel="stylesheet">
<script type="text/javascript" src="/PATH/TO/magic/tricks/string_deposit/string_deposit..js" charset="UTF-8"></script>

below your <script type="text/javascript" src="/PATH/TO/magic/wand..js" charset="UTF-8"></script>

Add data-mjf="string_deposit" id="ELEMENT_ID" to your <input type="text"> and/or <textarea> tag.

Add the code below inside your <body> tag…

Inside the /PATH/TO/magic/tricks/string_deposit/ folder are two files: 1- strdep_ex.html and 2- strdep_ex_2.html.
It's easier to adapt one of these to suit your needs than building one from scratch. Simply duplicate the existing file and modify as needed.

If you'd like the Darkrooms to be be drag droppable, add <link href="/PATH/TO/magic/tricks/drag_n_drop/drag_n_drop..css" rel="stylesheet">
<script type="text/javascript" src="/PATH/TO/magic/tricks/drag_n_drop/drag_n_drop..js" charset="UTF-8"></script>

below your <script type="text/javascript" src="/PATH/TO/magic/tricks/darkroom/darkroom..js" charset="UTF-8"></script>

and <script type="text/javascript">$m.trick.drag_n_drop.free = true;</script> inside your <body> tag.

Add <script type="text/javascript">$m.string_deposit = true;</script> inside your <body> tag.

Examples

Empty input field — default configuration

<input type="text" data-mjf="string_deposit" id="string_deposit_ex_1">

Magic Editor textarea — default configuration

<textarea data-mjf="magic_editor|string_deposit" id="string_deposit_ex_2">

Populated input field — custom URL

<input type="text" data-mjf="string_deposit" data-mjf_string_deposit_url="strdep_ex_2.html" id="string_deposit_ex_3">

Populated textarea — custom dimensions

<textarea data-mjf="string_deposit" data-mjf_string_deposit_dims="265x265" id="string_deposit_ex_4">

Populated input field — overwrite field contents

<input type="text" data-mjf="string_deposit" data-mjf_string_deposit_action="overwrite" id="string_deposit_ex_5">

Notes

It might be obvious already but the Magic Editor needs to be properly set-up to use it with String Deposit.

Change Log

13.1.25

  • Fixed bug where Magic Editor toolbar button would be added on each AJAX request

12.12.21

  • Better documentation and misc bug fixes

12.12.17

  • Initial release
To Do
  • Fix IE < 8 Magic Editor insert at end of content bug.
  • Fix Chrome's jumping bug.
  • Fix icon placement in everything but Firefox.
  • Replace selected text on non-Magic Editor fields.

« Back to the main documentation