- Install the toolbar in your Internet Explorer 6.0 + browser by
going to http://www.aspModules.com/at/Toolbar/installer.htm and
installing the version appropriate for your operating system. This
is the only step your clients will have to perform.
- Insert this code on the page you would like to edit right AFTER
the body tag. The code can be placed in an include file if you wish
(if you are more interested in a database example go here:
<script id="AdminimizerScripts"></script>
<xml id="AdminimizerToolbar"
src="Settings.xml"></xml>
<xml id="AdminimizerData">
<HiddenFields>
<Field
name="SaveType" value="File" />
</HiddenFields>
</xml>
- Place span or div tags around the content you would like to
edit like so:
<div id="editSpace"
name="myContent">Editable Content!</div>
The div tags (span tags also work) must all have the
same id (e.g. "editSpace") and they must have
unique name attributes. You can have as many editable areas on a
page as you wish. (If your page is in a frameset click here.)
- Set up your support files. There are 2 required support
files and one optional support file:
- The XML settings file. In the example site this is called
"settings.xml." This file contains all of the configuration
and registration settings for the tool bar. If you place it in a
different directory than the page you must change the path to this
file in the script above. Click here to learn more. Click here to download a
generic one (right click and choose "save target as...") or click here to create a custom one using
our online wizard.
- The Target file. This file (called "Saver.asp" in the example
site) contains the scripts that actually save the edited content
back to the web server. Click
here to download a zip file that
contains Saver.asp. The provided scripts will save
content to disk or to a database on a Windows server. You are free
to create your own scripts to meet your needs, or to modify the
provided scripts. The path to this file is set in the XML
settings file.
- The ImageEditor file. This file is optional. The included
ImageEditor file will list and show all the images in a particular
directory. Click here to download a
zip file that contains ImageEditor.asp. Images can be inserted
into a web page by dragging and dropping them at the desired
position. The location and size of the ImageEditor file can be
set in the XML settings file and the script within this file can be
modified to meet your needs.
How much does it cost and how is it
licensed?
The Toolbar will work on all domains for 60
days. After 60 days you will need to register your domain in order
to use the toolbar. Registration costs $295/domain (limited to 10
users per domain).
How does it work?
When you press the "Edit"
button, the Toolbar sets the "contentEditable" property of
span tags with the appropriate ID to "true" and it sets the
border and background style attributes for the span tag. At this
point the content within the span tag is editable within the
browser window. When you press the "save" button the toolbar
searches through the page for content within tags with the
appropriate ID. It then submits the content to the Target
page using standard http post. This content can be retrieved
and saved in any number of ways, the ASP sample
script provided will save it back to disk, or place it in a
database.
Are
there any examples?
You are looking at one! All of the pages in this documentation
section can be edited using the toolbar. If you have downloaded this example to your own
server then you can change it and save the edited content. You
can also try our online demo.
How do I configure the
Toolbar?
Everything is controlled by the settings.xml file. Most of it is
pretty self explanatory. You can set tooltips, the fonts you have
available on your site, the color options, all of the form
captions, and which options are enabled on a particular page. A few
things are a bit more complicated:
- The Registration is per domain. For demonstration the toolbar
can be used for 60 days without a key; to use it longer
you must register and place the key and registration string you
receive in the <Sites>and <Key>nodes of
the settings file.
- You can also change the id name you use for the span tags. It
defaults to "editSpace" but the <EditID>is where it gets
this.
- You can change the name of the Target page. The default is
"saver.asp" but this is controlled by the <TargetPage>node of
the settings file.
For an in-depth explanation of the settings file click here.
Am I limited to text or can I use standard
HTML form elements?
You can use SELECT tags and INPUT tags of any
type to pass content to the Target page if you wish. You simply
have to set the id attribute of these tags to your editID value.
TEXTAREA tags cannot be used.
example:
<INPUT name="example" type="checkbox"
ID="editSpace" value="1" CHECKED>
How do I use the Toolbar to edit content
within a Frameset?
Place a metatag on the page that contains the frameset:
<META ID="ATeditFrame"
VALUE="contentFrame">
Where "contentFrame" is the name of the frame that contains
the content you want to edit. Set up the editable page as described
above.
Known Problems
There are a few known problems:
- The Adminimizer Toolbar cannot edit content in
framesets across domains. (The content you are editing must be in
the same domain as the page that contains the frame set.) This is a
security limitation imposed by Internet Explorer.
- It will only work in Internet Explorer 6.0, or in IE 5.5 if you
have also installed
MSXML3 (free from Microsoft).
- The Toolbar cannot submit content that contains or is
within TEXTAREA tags.
documentation
documentation
