WebEdit Restricted Editing Part One - Inserting Editable Regions
http://www.interspire.com/content/articles/18/1/WebEdit-Restricted-Editing-Part-One-%2d-Inserting-Editable-Regions
By Joseph De Araujo
Published on 12/11/2005
These editable regions will stop curious editing by your clients (or novice users) in other parts of the page, and at the same time will protect your dynamic code from being rewritten by the editor.
This is part 1 of a 3 part series of editable regions tutorials that will show you how editable regions will make your developing life easier and will integrate your editing and maintenance process seamlessly online and offline.
In this tutorial, I will show you how you can simply insert editable regions to restrict editing to certain parts of the page.
You will need a copy of WebEdit Professional & one built website page.
Editable regions restrict editing of content
By wrapping your content with an opening editable region tag and a closing editable region tag, you will control the editor to only allow a user to edit inside the open and close tags. All other content becomes non-editable and non-selectable.
Using editable regions protects all other parts of the page from editor changes
In some WYSIWYG editors, the content must be passed through an interpreter and in most cases will be rewritten. If the code is in any way dynamic, this code will be saved back into your file as the outputted html code. By using editable regions, you can have dynamic code in the page that is being edited, but only the editable regions content will be saved back into the original file. Any dynamic code will be preserved in the original document.
Editable regions in WebEdit are compatible with Dreamweaver (DW) editable regions and will allow for a seamless maintenance process on and offline.
When synchronizing a local website with a remote copy, DW will update the content that is between the editable regions. If a developer were to quickly make a change to a template and save this template then all the files linked to this template would change automatically (DW will usually prompt whether you would like to update all files linked to the template). The editable region content. ie. The clients up to date editing of their website, will be maintained in this sitewide updating process, because DW will only update the areas outside of the editable regions. This opens up a very powerful updating process between developer and client/end user.
As you can see, if you already use DW to build your websites you can simply add Webedit Professional to allow your clients or users to update the website themselves to make your job so much easier. This will also, in most cases, support another visual html editor that uses proprietary editable regions tags to define editable regions.
You must only use one type of editable region in your files – you cannot mix both types together in the same file.
Here are some general rules to live by when using editable regions:
As you can see there are several places that might need editing, in this page, but I would not like the layout to be compromised because I want to keep this professional looking design as it is.
Fig 1.1
The parts of this page that I wish to restrict for editing are the latest news section on the left hand side as well as the main content section of the page.
I would also like to go a little further to only allow my client to edit the text of the page header (the title above the main content section), but I do not want them able to move the page header from it's current position.
Diving straight in, I'll show you the code for this page.
// start code example
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
< table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="15"> </td>
<td valign="top">
< h1>Latest News</h1>
<p> <font color="77D8C3">00 / 00 / 0000</font><br>
<strong>Lorem ipsum</strong> Lorem ipsum dolor sit amet, consectetaur.</p>
<p> <font color="77D8C3">00 / 00 / 0000</font><br>
<strong>Lorem ipsum</strong> Lorem ipsum dolor sit amet, consectetaur.</p>
<p> <font color="77D8C3">00 / 00 / 0000</font><br>
<strong>Lorem ipsum</strong> Lorem ipsum dolor sit amet, consectetaur.<br>
</p></td>
<td width="30"> </td>
</tr>
</table>
< /td>
</tr>
</table>
// end code example
On the side section I have two tables that control the layout of the latest news section.
If I would like to restrict editing to everything inside the inner table including the header and the content formatting, I would simply place my editable content tags immediately outside of the inner table tags.
// start code example
< table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
< !-- #BeginEditable "sidetable" -->
< table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="15"> </td>
<td valign="top">
< h1>Latest News</h1>
<p> <font color="77D8C3">00 / 00 / 0000</font><br>
<strong>Lorem ipsum</strong> Lorem ipsum dolor sit amet, consectetaur.</p>
<p> <font color="77D8C3">00 / 00 / 0000</font><br>
<strong>Lorem ipsum</strong> Lorem ipsum dolor sit amet, consectetaur.</p>
<p> <font color="77D8C3">00 / 00 / 0000</font><br>
<strong>Lorem ipsum</strong> Lorem ipsum dolor sit amet, consectetaur.<br>
</p></td>
<td width="30"> </td>
</tr>
</table>
< !-- #EndEditable -->< /td>
</tr>
</table>
// end code example
Fig 1.2 - Snapshot of this region in the editor. Allowing full control of content in the side tables.
If I was to only allow changing of the latest news header and the text in the inner table, without allowing formatting, my code would look like the following:
// start code example
< table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
< table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="15"> </td>
<td valign="top">
< h1>
< !-- #BeginEditable "sidetableheader" -->Latest News<!-- #EndEditable -->
< /h1>
< p> <font color="77D8C3">
< !-- #BeginEditable "sidedate1" -->00 / 00 / 0000<!-- #EndEditable -->
< /font><br>
< strong>
< !-- #BeginEditable "sidesub1" -->Lorem ipsum<!-- #EndEditable -->
< /strong>
< !-- #BeginEditable "sidecontent1" -->Lorem ipsum dolor sit amet, consectetaur.<!-- #EndEditable -->
< /p>
< p>
< font color="77D8C3">
< !-- #BeginEditable "sidedate2" -->00 / 00 / 0000<!-- #EndEditable -->
< /font>
< br>
< strong>
< !-- #BeginEditable "sidesub2" -->Lorem ipsum<!-- #EndEditable -->
< /strong>
< !-- #BeginEditable "sidecontent2" -->Lorem ipsum dolor sit amet, consectetaur. <!-- #EndEditable -->
< /p>
< p> <font color="77D8C3">
< !-- #BeginEditable "sidedate3" -->00 / 00 / 0000<!-- #EndEditable -->
< /font>
< br>
< strong>
< !-- #BeginEditable "sidesub3" -->Lorem ipsum<!-- #EndEditable -->
< /strong>
< !-- #BeginEditable "sidecontent3" -->Lorem ipsum dolor sit amet, consectetaur. <!-- #EndEditable -->
< br>
</p></td>
<td width="30"> </td>
</tr>
</table>
< /td>
</tr>
</table>
// end code example
Fig. 1.3 Snapshot of these regions in the editor. Allowing access to only the text within these editable regions areas
Upload and open this in the editor and you'll see the individual sections on the side that can be edited. Repeat and complete this process for the page header and page content sections and you've got yourself a complete page.
Stay tuned for Part Two which covers the use of editable regions and dynamic scripting on the same page.
In WebEdit Professional, Restricted editing mode allows you to "lock" the page being edited and only allows editing of predefined regions. We call these regions "editable regions".
These editable regions will stop curious editing by your clients (or novice users) in other parts of the page, and at the same time will protect your dynamic code from being rewritten by the editor.
This is part 1 of a 3 part series of editable regions tutorials that will show you how editable regions will make your developing life easier and will integrate your editing and maintenance process seamlessly online and offline.
In this tutorial, I will show you how you can simply insert editable regions to restrict editing to certain parts of the page.
You will need a copy of WebEdit Professional & one built website page.
These editable regions will stop curious editing by your clients (or novice users) in other parts of the page, and at the same time will protect your dynamic code from being rewritten by the editor.
This is part 1 of a 3 part series of editable regions tutorials that will show you how editable regions will make your developing life easier and will integrate your editing and maintenance process seamlessly online and offline.
In this tutorial, I will show you how you can simply insert editable regions to restrict editing to certain parts of the page.
You will need a copy of WebEdit Professional & one built website page.
WebEdit Restricted Editing Part One - Inserting Editable Regions
Introduction
In WebEdit Professional, Restricted editing mode allows you to "lock" the page being edited and only allows editing of predefined regions. We call these regions "editable regions".These editable regions will stop curious editing by your clients (or novice users) in other parts of the page, and at the same time will protect your dynamic code from being rewritten by the editor.
This is part 1 of a 3 part series of editable regions tutorials that will show you how editable regions will make your developing life easier and will integrate your editing and maintenance process seamlessly online and offline.
In this tutorial, I will show you how you can simply insert editable regions to restrict editing to certain parts of the page.
You will need a copy of WebEdit Professional & one built website page.
Introduction to restricted editing
Restricted editing in WebEdit does what it's name suggests – it simply restricts editing to regions of the page. The features available through the use of editable regions are outlined briefly below:Editable regions restrict editing of content
By wrapping your content with an opening editable region tag and a closing editable region tag, you will control the editor to only allow a user to edit inside the open and close tags. All other content becomes non-editable and non-selectable.
Using editable regions protects all other parts of the page from editor changes
In some WYSIWYG editors, the content must be passed through an interpreter and in most cases will be rewritten. If the code is in any way dynamic, this code will be saved back into your file as the outputted html code. By using editable regions, you can have dynamic code in the page that is being edited, but only the editable regions content will be saved back into the original file. Any dynamic code will be preserved in the original document.
Editable regions in WebEdit are compatible with Dreamweaver (DW) editable regions and will allow for a seamless maintenance process on and offline.
When synchronizing a local website with a remote copy, DW will update the content that is between the editable regions. If a developer were to quickly make a change to a template and save this template then all the files linked to this template would change automatically (DW will usually prompt whether you would like to update all files linked to the template). The editable region content. ie. The clients up to date editing of their website, will be maintained in this sitewide updating process, because DW will only update the areas outside of the editable regions. This opens up a very powerful updating process between developer and client/end user.
As you can see, if you already use DW to build your websites you can simply add Webedit Professional to allow your clients or users to update the website themselves to make your job so much easier. This will also, in most cases, support another visual html editor that uses proprietary editable regions tags to define editable regions.
What do editable regions tags look like?
There are two forms of editable region tags compatible with DW4 and DWMX.You must only use one type of editable region in your files – you cannot mix both types together in the same file.
| 1. | <!-- #BeginEditable "comment here" --> Your editable content is inserted here. <!-- #EndEditable --> |
| 2. | <!-- InstanceBeginEditable name="comment here" --> Your editable content is inserted here. <!-- InstanceEndEditable --> |
Here are some general rules to live by when using editable regions:
- You must use editable regions tags just like a normal html tag. They cannot traverse across other tags. Eg. You cannot open an editable region inside a table cell and close it in another table cell. Try to find a ‘parent' element to wrap the region with or a child element to wrap the regions around.
- The syntax of the editable regions tags must be kept as shown above including all spaces.
The quotes must be double quotes, the spaces after the start tag and before the end tag must be maintained, and the editable regions tags are case sensitive.
If this is not maintained, the editor will simply ignore the tag.
Restricting Content using editable regions
Below is a snapshot of the website I will use editable regions in (fig 1.1)As you can see there are several places that might need editing, in this page, but I would not like the layout to be compromised because I want to keep this professional looking design as it is.
Fig 1.1
The parts of this page that I wish to restrict for editing are the latest news section on the left hand side as well as the main content section of the page.
I would also like to go a little further to only allow my client to edit the text of the page header (the title above the main content section), but I do not want them able to move the page header from it's current position.
Diving straight in, I'll show you the code for this page.
// start code example
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
< table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="15"> </td>
<td valign="top">
< h1>Latest News</h1>
<p> <font color="77D8C3">00 / 00 / 0000</font><br>
<strong>Lorem ipsum</strong> Lorem ipsum dolor sit amet, consectetaur.</p>
<p> <font color="77D8C3">00 / 00 / 0000</font><br>
<strong>Lorem ipsum</strong> Lorem ipsum dolor sit amet, consectetaur.</p>
<p> <font color="77D8C3">00 / 00 / 0000</font><br>
<strong>Lorem ipsum</strong> Lorem ipsum dolor sit amet, consectetaur.<br>
</p></td>
<td width="30"> </td>
</tr>
</table>
< /td>
</tr>
</table>
// end code example
On the side section I have two tables that control the layout of the latest news section.
If I would like to restrict editing to everything inside the inner table including the header and the content formatting, I would simply place my editable content tags immediately outside of the inner table tags.
// start code example
< table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
< !-- #BeginEditable "sidetable" -->
< table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="15"> </td>
<td valign="top">
< h1>Latest News</h1>
<p> <font color="77D8C3">00 / 00 / 0000</font><br>
<strong>Lorem ipsum</strong> Lorem ipsum dolor sit amet, consectetaur.</p>
<p> <font color="77D8C3">00 / 00 / 0000</font><br>
<strong>Lorem ipsum</strong> Lorem ipsum dolor sit amet, consectetaur.</p>
<p> <font color="77D8C3">00 / 00 / 0000</font><br>
<strong>Lorem ipsum</strong> Lorem ipsum dolor sit amet, consectetaur.<br>
</p></td>
<td width="30"> </td>
</tr>
</table>
< !-- #EndEditable -->< /td>
</tr>
</table>
// end code example
Fig 1.2 - Snapshot of this region in the editor. Allowing full control of content in the side tables.
If I was to only allow changing of the latest news header and the text in the inner table, without allowing formatting, my code would look like the following:
// start code example
< table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
< table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="15"> </td>
<td valign="top">
< h1>
< !-- #BeginEditable "sidetableheader" -->Latest News<!-- #EndEditable -->
< /h1>
< p> <font color="77D8C3">
< !-- #BeginEditable "sidedate1" -->00 / 00 / 0000<!-- #EndEditable -->
< /font><br>
< strong>
< !-- #BeginEditable "sidesub1" -->Lorem ipsum<!-- #EndEditable -->
< /strong>
< !-- #BeginEditable "sidecontent1" -->Lorem ipsum dolor sit amet, consectetaur.<!-- #EndEditable -->
< /p>
< p>
< font color="77D8C3">
< !-- #BeginEditable "sidedate2" -->00 / 00 / 0000<!-- #EndEditable -->
< /font>
< br>
< strong>
< !-- #BeginEditable "sidesub2" -->Lorem ipsum<!-- #EndEditable -->
< /strong>
< !-- #BeginEditable "sidecontent2" -->Lorem ipsum dolor sit amet, consectetaur. <!-- #EndEditable -->
< /p>
< p> <font color="77D8C3">
< !-- #BeginEditable "sidedate3" -->00 / 00 / 0000<!-- #EndEditable -->
< /font>
< br>
< strong>
< !-- #BeginEditable "sidesub3" -->Lorem ipsum<!-- #EndEditable -->
< /strong>
< !-- #BeginEditable "sidecontent3" -->Lorem ipsum dolor sit amet, consectetaur. <!-- #EndEditable -->
< br>
</p></td>
<td width="30"> </td>
</tr>
</table>
< /td>
</tr>
</table>
// end code example
Fig. 1.3 Snapshot of these regions in the editor. Allowing access to only the text within these editable regions areas
Upload and open this in the editor and you'll see the individual sections on the side that can be edited. Repeat and complete this process for the page header and page content sections and you've got yourself a complete page.
Conclusion
As you can see from my examples above, editable regions are very easy to integrate into any website layout. Hopefully this part one tutorial will get you started, to allow you to restrict editing of content using your Webedit Professional editor.Stay tuned for Part Two which covers the use of editable regions and dynamic scripting on the same page.