table of contents - dmxzone · 2011-03-23 · fully customizable toolbars - from the advanced html...

Advanced HTML Editor 3 Manual DMXzone.com

Copyright © 2011 DMXzone.com All Rights Reserved

To get more go to DMXzone.com

of 67

Table of contents

Table of contents ..................................................................................................................................................................... 1 About Advanced HTML Editor 3 ........................................................................................................................................... 2 Features in Detail ..................................................................................................................................................................... 3 Tutorial: Using Advanced HTML Editor 3 with Insert Record Behavior ......................................................................... 20 Tutorial: Using Advanced HTML Editor 3 with Update Record Behavior ..................................................................... 28 Reference: Skins & Iconsets ................................................................................................................................................. 36 Reference: Upload, Resize and Edit Images ................................................................................................................... 43 Reference: Working with Colors ......................................................................................................................................... 47 Reference: Creating and Editing Tables .......................................................................................................................... 52 Reference: Dreamweaver Integration.............................................................................................................................. 58 Video: Advanced HTML Editor 3 Main Features Overview ........................................................................................... 67 Video: Insert, Upload and Resize Images in Advanced HTML Editor 3 ....................................................................... 67 Video: Using Advanced HTML Editor 3 with Insert Record Behavior ........................................................................... 67 Video: Using Advanced HTML Editor 3 with Upload Record Behavior ....................................................................... 67




of 67

About Advanced HTML Editor 3

Creating beautiful and rich content online has never been easier. With the

Advanced HTML Editor 3 you can enable editing of live text, images, tables and

other content without any HTML knowledge, visually like in Microsoft Word. Turn the

brand new, fully rewritten Advanced HTML Editor 3 into your own custom CMS with

just a few clicks, directly from within Dreamweaver and make your websites

dynamic and editable by your clients.

The smart context menus and rich editing options will save you time throughout the content editing process.

Customize the editor especially for your users by selecting the toolbars you wish and display it in one of the

many desired languages. The great supplied CSS based designs and icon packages, which can be edited,

will guarantee you the perfect fit on your website design.

Fully jQuery powered, XHTML/HTML5 and cross-browser compatible, the editor offers great dependent file

copy, synchronizations built-in and integrated with Dreamweaver file upload, and site synchronization.




of 67

Features in Detail

Fully rewritten from the ground up! - The code of the new editor has been fully rewritten to empower

the web technologies from the latest generation web browsers. It’s now also fully extensible, so new

features and plugins can be easily plugged in naturally.

Fully customizable toolbars - From the Advanced HTML Editor 3 user interface you can add or remove

any tools you need or don’t need to be visible on the toolbar.

Let your users create formatted content without having to know any HTML code - Type in any content

and with the push of a button change the font to bold, italic, etc. Change the font size and color.




of 67

Live and Design View in Dreamweaver - If you need a quick preview of your editor, simply use the

Design view, where you can explore all the toolbars, skin and iconset that have been selected.




of 67

Support for all latest browsers - All modern browsers are supported (IE8+ FF 3.6+, Safari 5+, Chrome

10+, Opera 10+).

Ajax Image Upload Integrated – The editor has an integrated AJAX image upload with progressbar.




of 67

Drag & Drop Images - For everyone that uses FireFox or Chrome, you can simply upload an image by

dragging it from your source and drop it in the Add/Edit Image popup window. As soon as you drop

it, the Live preview will show you the result.




of 67

Produces Clean HTML code – The Advanced HTML Editor checks and removes all HTML tags so you

can get a clean and valid XHTML markup.

Full table editor integrated - You can edit your table any time you want from the context menu or

from all the available options on the toolbar.




of 67

Inline selection based smart context menu - For a quick edit, you can use the context menu,

available in the editor.

Multi language - Multiple languages for the Advanced HTML Editor 3 menus available.




of 67

Inline property dialogs - Color pickers, Images upload, Tables and many more supplied in the editor.




of 67

Full Undo/Redo manager built in – Single-step and multi-level undo/redo capabilities.

Full screen mode - For greater preview of your work in the editor you can always set it up to full

screen mode, which will fit your browser size.




of 67

Rich Image Upload & Resize - Great support for many DMXzone extensions, such as Pure PHP/ASP

Upload and Smart Image Processor PHP/ASP.

Different Skins and Iconsets - The Advanced HTML Editor 3 is supplied with different skins to fit your

website design perfectly.

http://www.dmxzone.com/go?4509








of 67




of 67

Full Toolbar Customization and Preview - Live preview of the selected toolbars and iconstets as well as

the position of the toolbars, which can be changed any time.




of 67

Fully jQuery powered - Works with the latest jQuery 1.4.4

Build in conversion - You can easily convert from Advanced HTML Editor 2 to Advanced HTML Editor

3

Dependent file copy and synchronization - Great dependent file copy and synchronizations built-in

and integrated with Dreamweaver file upload and site synchronization




of 67

Full XHTML and HTML5 support

Extensive XSS and Script Cleaning – All vulnerable malicious scripts are removed before submitting so

that you end up with clean JavaScript code.

CSS Styles Support – You can add an extra CSS file to be used for the styling dropdown and be

displayed in the Advanced HTML Editor 3. Also, the Advanced HTML Editor picks up all the CSS styles

used on the pages where the editor is on and offers them as choice to the user!




of 67

Enter Handling - Define your enter handling with paragraph (p tag) or break line (br tag).

Copy and Paste from Word - Copy and paste from MS Word and you will get all the content as it was

in Word but with a clean HTML formatting automatically. You can also copy and paste from any web

page and preserve all the layout and images!

All you need to do is insert your image!




of 67

Great Integration with Dreamweaver Insert & Update Server Behaviors for storing your content in any

database.

Great Dreamweaver Integration - Interactive dialog in Dreamweaver with all the options you’ll need.




of 67

Inline Property Inspector - The property inspector enables you to change several options after you’ve

created the Advanced HTML Editor 3.




of 67

Before you begin

Make sure to setup your site in Dreamweaver first before creating a page. If you don’t know how to do that

please read this.

Installing the extension Read the tutorial at http://www.dmxzone.com/go?4671

Login, download the product, and look up your serial at http://www.dmxzone.com/myZone/purchases

Get the latest extension manager from Adobe at

http://www.adobe.com/exchange/em_download/

Open the .mxp file (the extension manager should start-up) and install the extension.

If you experience any problems contact our Live Support!

http://kb2.adobe.com/cps/140/tn_14028.html


http://www.dmxzone.com/myZone/purchases

http://www.adobe.com/exchange/em_download/




of 67

Tutorial: Using Advanced HTML Editor 3 with Insert Record Behavior In this tutorial we will show you how to use Advanced HTML Editor 3 with default Dreamweaver Insert Record

Behavior in order to insert its content into a database on submit.

*You can also check out the video.





of 67

How to do it 1. First, we’ve created a database connection and now we’re going to insert the Advanced HTML

Editor.




of 67

2. You can customize the appearance of your Advanced HTML Editor 3 and when you’re done, simply

click ok.




of 67

3. Open the Insert menu (1), select Form menu item (2) and than Button menu item (3).




of 67

4. Add an ID and Label for the button, and Click OK.




of 67

5. Click the Add item button under Server Behaviors tab (1) and select the Insert Record menu item (2).




of 67

6. Once the Insert Record window opens, we are going to set up the form to insert Advanced HTML

Editor 3 content into the ‘content’ column of our database table. Select the ‘content’ column(1),

open the Value dropdown menu(2), select the FORM.advHTMLEdit1 item(3) and also a page to be

redirected to after inserting(4).




of 67

7. This is how you can use Advanced HTML Editor 3 with default Dreamweaver Insert Record Behavior in

order to insert its content into a database on submit.




of 67

Tutorial: Using Advanced HTML Editor 3 with Update Record Behavior In this tutorial we will show you how to use Advanced HTML Editor 3 with default Dreamweaver Update

Record Behavior in order to update database records on submit.

*You can also check out the video.





of 67

How to do it 1. We’ve already inserted Advanced HTML Editor 3 on our page, created a standard Dreamweaver

Recordset and a Hidden field.




of 67

2. Select the Insert Menu (1), than the Form menu item (2) and choose the Button menu item (3).




of 67

3. Once the Input Tag Accessibility Attributes window opens, add an ID for the subimit button, and Click

OK.




of 67

4. Our form that contains the Advanced HTML Editor 3 and the submit button is ready. Now we’re going

to set up the Update Record Behavior. Click the Add item button under Server Behaviors tab (1) and

select the Update Record menu item (2).




of 67

5. The Update Record window opens. Choose a value for the ‘id’ column (1) and select the hidden field

that was inserted earlier: FORM.hiddenField (2).




of 67

6. Select the ‘content’ column (3) and select a value for the ‘content’ column: FORM.advHTMLEdit2 item

(4). You can also set a page to be redirected to after updating.




of 67

7. This is how easily you can use Advanced HTML Editor 3 with standard Dreamweaver Update Record

Behavior in order to update database records on submit.




of 67

Reference: Skins & Iconsets

Default Skin/Default Iconset:

Default Skin/Dark Iconset:

Default Skin/Modern Iconset:

Default Skin/Colorful 32 Iconset:




of 67

Dark Skin/Default Iconset:

Dark Skin/Dark Iconset:

Dark Skin/Modern Iconset:

Dark Skin/Colorful 32 Iconset:

Blue Skin/Default Iconset:




of 67

Blue Skin/Dark Iconset:

Blue Skin/Modern Iconset:

Blue Skin/Colorful 32 Iconset:

Metal Skin/Default Iconset:

Metal Skin/Dark Iconset:




of 67

Metal Skin/Modern Iconset:

Metal Skin/Colorful 32 Iconset:

Gold Skin/Default Iconset:

Gold Skin/Dark Iconset:

Gold Skin/Modern Iconset:




of 67

Gold Skin/Colorful 32 Iconset:

Mint Skin/Default Iconset:

Mint Skin/Dark Iconset:

Mint Skin/Modern Iconset:




of 67

Mint Skin/Colorful 32 Iconset:

Office Skin/Default Iconset:

Office Skin/Dark Iconset:

Office Skin/Modern Iconset:




of 67

Office Skin/Colorful 32 Iconset:




of 67

Reference: Upload, Resize and Edit Images

Image Insert from URL - A simple and quick way to implement an image in your site is simply to add

the URL of the image in the Add/Edit Image popup, you can also add alternate text, border, align it,

choose spacing or resize it.




of 67

Smart Image Upload and Resize - If you own the Pure PHP2 /ASP Upload 3 and Smart Image Processor

PHP/ASP 2 serverside extensions, you can upload and resize images directly from your computer,

which is greatly presented from a beautiful progressbar. They will guarantee greatest image resize

quality and cross server support no matter what server you have!

Live Upload Preview - Once you upload your picture or enter the image URL, there is a great preview

before placing it in the editor.









of 67

Drag & Drop - For everyone that uses FireFox or Chrome, you can simply upload an image by

dragging it from your source and drop it in the Add/Edit Image popup window. As soon as you drop

it, the Live preview will show you the result.




of 67

Quick Image Editing - If you need to make some changes on your image, you can use the Add/Edit

Image menu or simply through the EditImage context menu.




of 67

Reference: Working with Colors

Text color - You can choose from the many color palletes supplied in this extension.




of 67

Background color - Set a background color for the whole page or just for your text, it’s up to you.




of 67

Web colors - All colors used in designing web pages that you will need for your text or tables.

Grey Scale - From white to black, everything is possible with a single click.

Named Colors - Choose the color by its name




of 67

Full Color Pallete - The total number of colors that a given system is able to generate or manage.

Color Space - HEX, RGB and HSL




of 67

Live Preview - You can follow the preview of the chosen color in real time so it fits your design the

best.




of 67

Reference: Creating and Editing Tables

Insert table - It’s extremely easy to add a table to your editor from the Insert Table menu. You can

also choose the many options you can edit as well.

Edit table properties - You can edit your table properties from the context menu by width, alignment,

border thickness (If you do not specify a border attribute, the table will be displayed without borders)

and cell spacing.




of 67




of 67

Edit cell properties - You can fill in your table cells with color, resize them at any time as well as align.

No wrap indicates that text should not wrap in the cell. All major browsers will display the text in the

<th> element as bold and centered (Header).




of 67

Insert/Delete Columns and Rows - You can add/delete columns and rows from the toolbar as well as

from the context menu.




of 67

Table in a table - You can put a table inside an existing table if you need to, in our case devided with

different colors.




of 67

Images and colors in a table - For a great looking table you can insert images, headings, text colors

and background colors.




of 67

Reference: Dreamweaver Integration

Great Dreamweaver Integration - Interactive dialog in Dreamweaver with all the options you’ll need.




of 67

Inline Property Inspector - The property inspector enables you to change several options after you’ve

created the Advanced HTML Editor 3.

Live and Design View in Dreamweaver - If you need a quick preview of your editor, simply use the

Design view, where you can explore all the toolbars, skin and iconset that have been selected.




of 67

Dependent file copy and synchronization - Great dependent file copy and synchronizations built-in

and integrated with Dreamweaver file upload and site synchronization




of 67

Image Upload and Resize possibilities - If you own the Pure PHP2 /ASP Upload 3 and Smart Image

Processor PHP/ASP 2 serverside extensions, you can upload and resize images directly from your

computer, which is greatly presented from a beautiful progressbar.

Many Integrated Languages - We’ve integrated many languages so you can work with your editor

the easiest possible way.









of 67




of 67

7 Design Skins - The Advanced HTML Editor 3 is supplied with seven pure CSS designed skins.




of 67

Formatting - You can enable or disable any JavaScript usage in your HTML, force XHTML style and

define your enter handling - paragraph (p tag) or break line (br tag).




of 67

Full Toolbar Customization and Preview - Live preview of the selected toolbars and iconsets as well as

the position of the toolbars, which can be changed any time.




of 67




of 67

Video: Advanced HTML Editor 3 Main Features Overview

With this movie we will show you how to insert the Advanced HTML Editor 3 on your page

and also give you a preview of the main features packed in it.

Video: Insert, Upload and Resize Images in Advanced HTML Editor 3

With this movie we will show you how easy it is to Upload, Resize and Insert images in

Advanced HTML Editor 3 with the integrated Pure PHP/ASP Upload and Smart Image

Processor PHP/ASP support.

Video: Using Advanced HTML Editor 3 with Insert Record Behavior

With this movie we will show you how to use Advanced HTML Editor 3 with default

Dreamweaver Insert Record Behavior in order to insert its content into a database on

submit.

Video: Using Advanced HTML Editor 3 with Upload Record Behavior

With this movie we will show you how to use Advanced HTML Editor 3 with standard

Dreamweaver Update Record Behavior in order to update database records on submit.





table of contents - dmxzone · 2011-03-23 · fully customizable toolbars - from the advanced html...

Documents