The Magic Editor

Making seamless inline edits with no code changes required.

The Magic Editor lets you make changes to website or web app content inline, on the page that the content appears.

Making changes to the Editmode home page using the Magic Editor.

How it works

1. Make sure the magic editor is enabled on the page you're visiting (This happens by default if you've installed one of our plugins. See also: Enabling The Magic Editor

2. Hit the keyboard shortcut to activate. On mac that's: CMD, Shift, E, on windows its CTRL, Shift, E

   Alternatively you can just add "?editmode=1" to the url of the page you're visiting

3. Find the content you want to change, and modify it as you please.

4. When you're finished, find the Editmode Bar and hit "Save Changes"

What you can do

The Magic Editor currently supports updating Plain Text, Rich Text, and Images stored on Editmode. It also supports working with collections, allowing users to add additional items to a collection, delete items and drag to reorder items.

Enabling the magic editor

The Magic Editor is loaded by default in any app that has an Editmode sdk installed - so it works out of the box with editmode-rails and editmode-react, unless it has been explicitly disabled. The Magic Editor does not currently support sites using editmode-react-native.

The magic editor is enabled by simply loading our javascript library into your page and specifying the relevant project id.

<!–– Tell Editmode where content is stored by specifying a project id ––>
<script>window.chunksProjectIdentifier = 'prj_lAue7jUkFm2n'</script>

<!–– Activate the magic editor by loading it from the CDN ––>
<script src="https://static.editmode.com/editmode@2.0.0/dist/editmode.js" async ></script>

Enabling the Magic Editor without using the inline <script /> tag

Some companies prefer not to load an additional javascript script into their page. For this we have a subdomain-based solution that is reserved for your team members (for example edit.yoursite.com) which proxies your main site and injects the script (so requires no code changes to your codebase). This takes a small amount of manual set up so needs to be performed by someone from our internal team. Please reach out to us if this is something you need.

Behind The Scenes

This section is intended for a technical audience - it may be of use if you're attempting to debug the editor or to build your own frontend.

The Magic Editor works by simply scanning the page for any element of type <em-span /> and applying the editable behaviour to it, so to make a piece of content on your page editable, all you have to do is make sure it's wrapped in markup that looks like this:

<em-span data-chunk="cnk_5227179fcc3f521b9c95"
         data-chunk-editable="true" 
         data-chunk-type="single_line_text" 
         data-chunk-cache-id="home_heroprj_Y5HfCBS4rqZgHeadline">
         Supercharge your workflow Simplify your life.
</em-span>

We'll be writing a separate guide to elaborate on the logic behind how to construct and use each of these attributes.