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.
- 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:
E, on windows its
EAlternatively 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"
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.
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.
<!–– 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/[email protected]/dist/editmode.js" async ></script>
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.
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:
Supercharge your workflow Simplify your life.
We'll be writing a separate guide to elaborate on the logic behind how to construct and use each of these attributes.