Magic Icon Magic Editor (): Magic JavaScript

Quick Jump ↵

Formatting content in a rich-text editor

Usage

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/magic_editor/magic_editor..css" rel="stylesheet">
<script type="text/javascript" src="/PATH/TO/magic/tricks/magic_editor/magic_editor..js" charset="UTF-8"></script>

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

Add data-mjf="magic_editor_form" id="ELEMENT_ID" to your <form> tag.

Add data-mjf="magic_editor" id="ELEMENT_ID" to your <textarea> tag.

Add the code below inside your <body> tag…

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.

Example

Custom Toolbars

You can build and organize your own toolbar by duplicating and changing the example code below.

Custom Buttons

You can build own toolbar buttons by following the example code below…

Notes

  • After you write your new button, create a custom toolbar as described above and add your new button to it.
  • In most cases you'll want to keep use_css to false unless you know what you're doing.
  • The win_keystroke and mac_keystroke can be set to an empty string. Be careful mapping them to existing keystrokes, you could get unpredictable behavior.
  • The command_type should be set to custom. More documentation on this coming soon.
Change Log

14.1.12

  • Minor bug fixes.

13.10.28

  • Fixed the Removed formatting bug.

13.7.2

  • New Insert a special character button and functionality.
  • Removed the buggy <font> to <span> code clean up functionality.

13.3.27

  • Code optimization.

13.3.26

  • Better language file loading.

13.3.19

  • Fixed some MSIE 10 bugs.

13.2.8

  • Removed the legacy "ADD CONTENT HERE" necessity.
  • Simplified table editing controls in Firefox.
  • Buttons that utilize Darkrooms are now more reliable.
  • Better MSIE9 support.
  • Better Word doc cleanup.
  • Misc bug fixes.

12.12.21

  • Added "Remove Link" functionality inside hyperlink Darkroom.
  • Removed the "Remove a Hyperlink" toolbar button in light of above change.
  • Removed id="me_dr_body" manipulations in Darkrooms.
  • Misc bug fixes.

12.12.12

  • Added an esc shortcut that will hide everything.
  • Empty tags, including iframes, are no longer being auto-magically removed.

12.11.6

  • New toolbar icons.

12.10.18

  • Appropriate buttons are now selected when clicking a styled element. For example, the bold button shows a border when the selected/focus'ed word is clicked.
  • <font> tags and their deprecated attributes are now replaced <span> tags and a single style attribute, in most cases.
  • Fixed MSIE 9's word wrap issue with the HTML source view.
  • Fixed MSIE 9's buggy selection restoration.

12.10.12

  • Consolidated 1st and 2nd toolbars into a single toolbar that wraps the buttons.
  • Removed the status bar.
  • Reorganized toolbar buttons.
  • Removed the magic_editor_setup.12.3.19.js file and added the code to magic_editor.src.js.
  • New Custom Toolbars functionality.
  • New Custom Buttons functionality.
  • "Remove formatting" is now more reliable.

12.10.5

12.8.20

12.7.20

  • Fixed a bug where the editors weren't always initialized properly during AJAX requests.

12.5.29

  • Fixed "Image" not setting Alt and Title selected text correctly bug.
  • Fixed "Hyperlink" false bug.
  • Fixed "Search" false bug.

12.4.3

  • Fixed MSIE 9's image insertion bug.

12.3.22

  • New "Paste from Microsoft® Word™" toolbar button.
  • New "View Editor Fullscreen" toolbar button.
  • Updated HTML source editor to be shown in a Darkroom instead of inline.
  • Fixed a bug where some HTML entities would be incorrectly convereted to first letter uppercase.

12.1.31

  • We're now localized — please see the Introduction tab, Usage section of the Main Documentation and look for the lang : "en_us" property - this is new.

11.12.29

  • Fixed bug where Magic Editor styling was applied to non-Magic Editor Darkroom links.
  • Minor code clean up.

11.11.30

  • Fixed MSIE image insertion.
  • Minor optimization.

11.11.18

  • Removing empty tags on clean up.
  • New border option for images.

11.11.14

  • Set 400px minimum widths on editors.
  • New search and replace.
  • New double-click to edit images and anchors.
  • New <blockquote> insertion.
  • New Video insertion.
  • <b>...</b> will be automatically replaced with <strong>...</strong>.
  • <i>...</i> will be automatically replaced with <em>...</em>.
  • Darkroom is no longer magically added. Please review the Setup instructions above.

11.7.24

  • Fixed broken form submissions when submitting in source mode.
  • Better styling when toggling between design and source mode.
  • Removed extra </script> tags from Darkroom pages.

11.5.10

  • Added Darkroom version config options.
  • Code optimization.
  • Bug fixes.

11.4.29

  • Migrated to latest MJS code base.
  • Code optimization.

11.3.25

  • Beta release 1

11.3.15

  • Alpha release 2

11.1.4

  • Alpha release 1
To Do
  • Get working in touch-based browsers.
  • Migrate Magic Editor iframe pages to Defaults CSS.
  • Edit <table> tags.
  • Document internal methods and properties.
  • Fix the bug where when selecting text and the cursor goes outside of the editor, the selection is unreliable.

« Back to the main documentation