# qooxdoo

## the new era of web development

### Navigation

- index
- next |
- previous |
- » Home »
- qooxdoo v1.5 documentation »
- GUI Toolkit »

# HTML Editing

HtmlArea is a html editing widget which is part of the framework. This widget is available as low-level and UI-level implementation. The first targets traditional webpages / single-page applications and the latter Rich Internet Applications (RIA) as preferred usecase.

Here you can find some interesting technical info.

Note

Please keep in mind that the HtmlArea component provides basic HTML editing functionality. It is not a full-blown HTML editor and will not be developed towards it.

## Demo

## Setup

One important step is necessary to get the HtmlArea up and running.

Note

If you setup the component without handing the source parameter you have to place a blank.html file next to your applications index.html.

This is necessary due the Same-Origin Policy implemented by most browsers.

## Features

- Feature List
  - End-User Features
    - Text Formatting
    - Alignment
    - Lists
    - Inserting
    - Document Wide Formatting
    - Additional Features
  - Developer Features
    - Events
    - Content Manipulation
    - Advanced Paragraph-Handling
    - Additional Features
- Technical Feature List
  - Startup
  - Content Wrapping
  - Editable Document
    - Internet Explorer
    - Gecko, Webkit and Opera
  - Focus Management
  - Advanced Key Events

## Integration Guide

- Integrate the HtmlArea in your application
  - Use Public API
  - Use Events
  - Lazy Initialization
  - Toolbar Details
  - No Own Focus Management
  - Keyboard Shortcuts
- Available keyboard shortcuts
- Recommendations
  - Common Font Families
  - InsertHtml Command
  - Avoid DIV elements with fixed width or height

## Technical Background

- General information about HTML Editing
  - External Information
    - General infos
    - Browsers
      - Mozilla ("Midas")
      - IE ("HTML Edit")
      - Opera
      - Safari
    - Compatibility
    - General
  - Overview of existing WYSIWYG editors
  - Browser-specific overview of "execCommand"
- Copy and Paste
  - IE
  - Safari
  - Gecko
  - Opera
- Text Align
  - Browsers
  - Problems
- Browser Bugs
  - Gecko
  - Internet Explorer
  - Webkit/Safari
- Default Paragraph Handling
  - Browsers
  - Word processors / E-mail clients

## Implementation Details

- Undo and Redo
  - Limitations
  - Implementation: Description on a high-level
    - Using the Decorator Pattern
    - Tracking changes using stacks
      - Command
      - Content-block
      - Custom
      - Internal
- Paragraph Handling
  - Formatting across multiple paragraphs
  - Alignment
  - Customization
    - insertParagraphOnLinebreak
    - insertLinebreakOnCtrlEnter
  - Technical Background
    - Paragraph-Handling in Firefox
      - Browser control
      - HtmlArea control
        - Phase 1: Collecting styles
        - Phase 2: Style string creation
        - Phase 3: Nodes creation
        - Phase 4: Cleanup
      - Reasons for own paragraph handling
      - Issues
- List Handling