Hybrid Rich Text Editor Abstraction Layer

Resolve Bottlenecks,
Find Innovative SolutionsGenerate Solutions

Solution Overview

Problem

Browser-based rich text editors face challenges in cross-browser compatibility due to varying levels of browser editing support, difficulty in turning off content-editable features, and limitations in flowing text around content, as well as issues with leveraging client text services and clipboard processing.

Innovation Solution

A cross-browser hybrid rich text editor architecture that integrates browser content editability with JavaScript, manages its own insertion pointer, processes keystrokes, and employs an abstraction layer to provide consistent functionality across browsers, enabling features like real-time preview and extensibility through third-party plugins.

Engineering Contradictions & Design Principles

VSEngineering Contradiction Analysis

1Ease of operation

If browser content editability is leveraged for rich text editing, then editing functionality is improved, but cross-browser compatibility deteriorates due to varying levels of browser support

Engineering Contradiction:

Improveediting functionalityVSAvoidcross-browser compatibility

Core Design Contradiction:

Ease of operationVSAdaptability or versatility

Solution Approach 1:

The patent introduces an abstraction layer that mediates between the browser's content editable features and the rich text editor functionality. This abstraction layer provides a unified interface that handles browser-specific variations, allowing the RTE to leverage browser content editability while maintaining cross-browser compatibility through standardized access methods.

Inventive Principle:

Principle #24Intermediary (Mediator)

Solution Approach 2:

The patent segments the rich text editor into distinct layers: the abstraction layer that handles browser-specific variations and the core RTE functionality that remains consistent across browsers. This segmentation allows each layer to address specific concerns independently, improving both editing functionality and cross-browser compatibility.

Inventive Principle:

Principle #1Segmentation

2Adaptability or versatility

If JavaScript is added on top of browser editing to offer additional features, then editing capabilities are improved, but implementation complexity increases due to browser-specific differences

Engineering Contradiction:

Improveediting capabilitiesVSAvoidimplementation complexity

Core Design Contradiction:

Adaptability or versatilityVSDevice complexity

Solution Approach 1:

The abstraction layer serves as an intermediary that simplifies JavaScript implementation by providing unified methods for common operations. Instead of writing separate JavaScript code for each browser, developers interact with the abstraction layer which handles browser-specific variations, reducing implementation complexity while maintaining enhanced editing capabilities.

Inventive Principle:

Principle #24Intermediary (Mediator)

Solution Approach 2:

The abstraction layer implements universal methods that work across all browsers, allowing a single JavaScript implementation to provide enhanced editing capabilities on top of browser editing without requiring browser-specific code paths. This multi-functional approach reduces implementation complexity while maintaining versatility.

Inventive Principle:

Principle #6Universality (Multi-functionality)

3Ease of operation

If content is placed in IFrame or block element for browser content editability, then editing functionality is improved, but text flow around content deteriorates

Engineering Contradiction:

Improveediting functionalityVSAvoidtext flow

Core Design Contradiction:

Ease of operationVSShape

Solution Approach 1:

The patent applies local quality by making only the specific insertion point content-editable rather than the entire block element. This allows text to flow naturally around the editing region while maintaining browser content editability features where needed, resolving the conflict between editing functionality and text flow.

Inventive Principle:

Principle #3Local quality

4Ease of operation

If browser content-editable features are enabled, then editing functionality is improved, but control over styling and layout deteriorates due to overlapping features

Engineering Contradiction:

Improveediting functionalityVSAvoidstyling control

Core Design Contradiction:

Ease of operationVSDevice complexity

Solution Approach 1:

The abstraction layer mediates between browser content-editable features and styling control by providing a unified interface for both operations. It allows styling commands to be issued independently of the content-editable features, ensuring that styles are applied correctly while maintaining editing functionality.

Inventive Principle:

Principle #24Intermediary (Mediator)

Data Source

PatentUS8694904B2Cross-browser rich text editing via a hybrid client-side model

Publication Date: 2014.04.08 MICROSOFT TECHNOLOGY LICENSING LLC

AI summary

A full-featured cross-browser hybrid rich text editor for editing webpage content. The hybrid editor is integrated with a user interface (e.g., toolbar, menu bar), and provides the appropriate context-sensitive behavior when users interact with the user interface and the interface contents. The hybrid editor responds immediately to basic commands (e.g., cursor movements, inserts, selections, repeated key presses, etc.), and employs behaviors and effects that are more aligned with familiar editor experiences, such as in a word processor. The editor architecture leverages the strengths of both the current browser content editability and JavaScript, limits the browser-based content editing to the insertion pointer, paste, processes content as the content is entered or when cursor is moved around, and implements an abstraction layer that maps browser-specific functions independent of the browser to the underlying support of the hybrid editor.