Log in Sign Up

MagicEdit Tags

MagicEdit tags represent the core of the MagicEdit system, and allow site managers to edit the content that you determine is editable.

The MagicEdit system looks for <magicedit> tags in your HTML and replaces the contents dynamically when a user requests the page. There are no changes made to the page itself, but the system uses your page as a template. The region of HTML between the <magicedit> tags will be replaced if the site manager has modified it, otherwise the content will remain as it was in the original HTML.

By default, MagicEdit exposes a Rich Text Editor (currently the highly regarded CKEditor) to the site manager when editing a region, so the typical use of <magicedit> tags is to wrap a region of fully formatted HTML:

  <magicedit me_name="myEdit">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </magicedit>

NOTE: MagicEdit tags are removed by the server, so you will never see them if you view the source of a page.

IMPORTANT: The me_name attribute is optional, but you should generally use it. If no me_name is defined, then changing the placeholder content (what's inside the magicedit tags) will result in previous edits being lost. MagicEdit is not responsible for lost content if me_name is not used.

When a user logs in as a site manager, MagicEdit exposes an edit link after the editable region:

Clicking on the edit button opens up the editor:

Modifying the text and saving it immediately applies the changes to the site. To remove any edits and return to the original text, simply delete all of text from the editor and submit. The region will just default back to the placeholder text defined in the HTML.

Multiple Regions

It is important to use unique placeholder text for different regions if you do not set the me_name option (see below). If you do not explicitly name the region, MagicEdit will name it with a "hash" based on the content of the region, which is visible as the label above the textarea in the editor.

The MagicEdit system treats all regions with the same content as the same region if you do not set the me_name option. Therefore, if you use the same placeholder text for multiple regions, site-wide, they will all change identically when you edit one of them. This is highly useful in many cases, but can lead to unintended consequences if you are not aware of this functionality.

Make sure you either name each region or use different text inside each one (don't just stick the same "lorem ipsum" placeholder text everywhere).

<magicedit> Tags in the <head>

You can place <magicedit> tags in the head of your HTML document! This is very useful when combined with me_name for changing the title of a page dynamically. For example, you can have a header element in the page that the user can edit, and at the same time it will update the page title that appears in the browser title bar.

Here is how the MagicEdit tag works in the head:

  <head>
    ...
    <title>My Site Name - 
      <magicedit me_name="newsHeader">Header</magicedit>
    </title>
    ...
  </head>

Since there is no way for the site manager to edit content in the head, just putting a <magicedit> block in the head without tying it to a region in the page itself will have no effect. To be most effective, you need to set the "newsHeader" by doing something like this in the HTML:

  <html>
    ...  
    <h1>
      <magicedit me_plain me_name="newsHeader">Header</magicedit>
    </h1>
    ...
  </html>

Now, when the "newsHeader" region is changed in the HTML, the title will change as well!

Options

Here are the available options for MagicEdit tags.

me_name

It is best to name each individual MagicEdit region using the me_name option. Here is an example:

  <magicedit me_name="RegionName">
    ...
  </magicedit>

If you name different regions the same across the site (e.g., the company name or a copyright notice), they will all be synchronized with each other. Edit one to edit all, regardless of their initial content.

me_plain

In many cases it is highly advantageous not to allow the site manager to change the style of a MagicEdit region. To turn off the Rich Text Editor, just use the me_plain option. For example:

  <h1><magicedit me_plain>Header 1</magicedit></h1>

When using the me_plain option, you generally want to place the <magicedit> tags inside other HTML tags, and only wrap plain text. This is because you are only going to get plain text back unless the user actually types in the HTML tags themselves. The site manager may also be confused by all of the funny characters!

me_hidebuttons

If you do not want to expose the Edit button on a MagicEdit region, simply invoke the me_hidebuttons option. For example:

  <h1><magicedit me_name="header" me_hidebuttons>Header 1</magicedit></h1>

You should only use this when you know that there is another place on the site where the user can edit this instance. Remember that you can "edit once change everywhere" by using the same me_name on MagicEdit regions throughout the site. The me_hidebuttons option allows the site designer to choose when the edit button should be displayed and when it shouldn't.

me_repeat="no"

This option prevents making changes to global values of MagicEdit tags stored inside MagicRepeat regions. For instance, say you have a copyright tag inside a MagicRepeat section:

<magicrepeat> 
  <p>Some text.</p>
  <magicedit me_name="Copyright"> 
    ©2010 MagicEdit.com
  </magicedit>
</magicrepeat>

In this instance, the MagicEdit tags are unique to this MagicRepeat region. If you have a MagicEdit copyright elsewhere on your site, making changes to that region will not affect this example. However, if you set a false value (0, "no", or "false") on the me_repeat option to the <magicedit> tags inside a MagicRepeat region, the system will use the global values for that MagicEdit instance:

<magicrepeat> 
  <p>Some text.</p> 
  <magicedit me_name="Copyright" me_repeat="no"> 
    ©2010 MagicEdit.com
  </magicedit>
</magicrepeat>

Now your copyright notice will use the same value as the notice in your footer and you won't have to update every single section that is called from this MagicRepeat.

Try MagicEdit today!

Sign Up for free Demo
Scroll to Top