# qooxdoo

## the new era of web development

### Navigation

- index
- next |
- previous |
- » Home »
- qooxdoo v1.3 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.

## 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 exisiting 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