# getmeuk/contenttools

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/getmeuk-contenttools).**

3,977 stars · 390 forks · JavaScript · MIT

## Links

- GitHub: https://github.com/GetmeUK/ContentTools
- Homepage: http://getcontenttools.com
- awesome-repositories: https://awesome-repositories.com/repository/getmeuk-contenttools.md

## Topics

`contenttools` `wysiwyg-editors`

## Description

ContentTools is a JavaScript framework and suite of tools for building visual WYSIWYG editors. It provides a DOM manipulation library for parsing and transforming HTML strings into structured editable regions, alongside a visual document orchestrator that manages element behaviors and state transitions.

The framework includes a specialized browser selection manager to ensure consistent caret positioning and text range highlighting across different web browsers. It also features an HTML content validator used to sanitize output and convert third-party media links into valid embed formats.

The system covers a broad range of capabilities, including interactive DOM manipulation for draggable and resizable elements, rich text formatting, and image processing workflows for cropping and rotating. It also provides tools for editing history tracking via DOM snapshots and a UI component system for managing toolboxes and hierarchical breadcrumb navigation.

The project enforces security through element attribute restrictions to prevent unauthorized modifications of HTML tags.

## Tags

### User Interface & Experience

- [Programmatic Element Editing](https://awesome-repositories.com/f/user-interface-experience/programmatic-element-editing.md) — Provides the core classes and logic used to build and manage HTML elements designated as content-editable. ([source](http://getcontenttools.com/api))
- [Rich Text WYSIWYG Editors](https://awesome-repositories.com/f/user-interface-experience/rich-text-wysiwyg-editors.md) — Provides a framework for building rich text editors that visually handle formatted text and media content.
- [WYSIWYG Editors](https://awesome-repositories.com/f/user-interface-experience/wysiwyg-editors.md) — Provides a framework for building visual rich text editors that allow direct browser-based HTML editing. ([source](http://getcontenttools.com/api))
- [Behavioral Tag Mappings](https://awesome-repositories.com/f/user-interface-experience/buttons/custom-html-elements/style-to-element-mappings/behavioral-tag-mappings.md) — Associates specific DOM tag names or custom data attributes with corresponding element classes for content handling. ([source](http://getcontenttools.com/api/content-edit))
- [Regional Component Conversions](https://awesome-repositories.com/f/user-interface-experience/content-block-editors/block-type-conversion/regional-component-conversions.md) — Implements the core logic for transforming standard HTML blocks into interactive editable regions.
- [Selection Consistency Layers](https://awesome-repositories.com/f/user-interface-experience/cross-browser-layout-consistency/selection-consistency-layers.md) — Ensures consistent text selection and highlighting behavior across different web browsers. ([source](http://getcontenttools.com/api))
- [DOM Manipulation Libraries](https://awesome-repositories.com/f/user-interface-experience/dom-manipulation-libraries.md) — Includes a library for parsing, transforming, and normalizing HTML strings into structured editable regions.
- [Element Behavior Configurations](https://awesome-repositories.com/f/user-interface-experience/element-behavior-configurations.md) — Provides a system to define if elements can be dragged, dropped, resized, merged, or removed. ([source](http://getcontenttools.com/api/content-edit))
- [Rich Text Editable Regions](https://awesome-repositories.com/f/user-interface-experience/text-editing-components/rich-text-editable-regions.md) — Transforms block-level elements within a container into interactive editable regions to maintain browser performance. ([source](http://getcontenttools.com/api/content-edit))
- [Selection State Persistence](https://awesome-repositories.com/f/user-interface-experience/text-selection-control/selection-state-persistence.md) — Saves and restores caret positions and selection ranges to maintain user context during DOM re-mounting. ([source](http://getcontenttools.com/api/content-edit))
- [Selection State Management](https://awesome-repositories.com/f/user-interface-experience/visual-node-editors/area-selection/path-based-node-selection/canvas-node-selection-states/selection-state-management.md) — Provides utilities to query and retrieve the range of currently selected content within an element. ([source](http://getcontenttools.com/api/content-select))
- [Editor UI Components](https://awesome-repositories.com/f/user-interface-experience/editor-ui-components.md) — Provides a system for managing and mounting editor-specific UI components like toolboxes, modals, and inspectors. ([source](http://getcontenttools.com/api/content-tools))
- [Property Editing Panels](https://awesome-repositories.com/f/user-interface-experience/element-property-inspection/property-editing-panels.md) — Provides an interface to update an element's attributes, CSS styles, and inner HTML content. ([source](http://getcontenttools.com/api/content-tools))
- [Aspect Ratio Preserving Resizing](https://awesome-repositories.com/f/user-interface-experience/resizable-panes/dimension-controllers/minimum-dimension-calculators/image-bounding-boxes/aspect-ratio-preserving-resizing.md) — Adjusts image and video dimensions while preserving aspect ratios and respecting width constraints. ([source](http://getcontenttools.com/api/content-edit))
- [Tag-Based Styling Systems](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/styling-systems/class-based-styling/css-styling/tag-based-styling-systems.md) — Defines and registers CSS classes that apply to specific HTML tags within the editor. ([source](http://getcontenttools.com/api/content-tools))

### Software Engineering & Architecture

- [DOM Element Class Mappings](https://awesome-repositories.com/f/software-engineering-architecture/dom-element-class-mappings.md) — Maps DOM tag names and data attributes to JavaScript classes to control rendering and behavior.
- [Editor Lifecycle APIs](https://awesome-repositories.com/f/software-engineering-architecture/programmatic-content-apis/editor-lifecycle-apis.md) — Manages the editor's initialization, state, and the definition of editable regions using CSS selectors. ([source](http://getcontenttools.com/api/content-tools))
- [Action-Based State Transitions](https://awesome-repositories.com/f/software-engineering-architecture/action-based-state-transitions.md) — Tracks the current editor state and updates it based on processed actions using transition rules. ([source](http://getcontenttools.com/api))
- [State Machine Logic](https://awesome-repositories.com/f/software-engineering-architecture/state-machine-logic.md) — Tracks editor state and applies updates based on predefined action rules and callback functions.

### Web Development

- [Text Selection Management](https://awesome-repositories.com/f/web-development/browser-integration-utilities/text-selection-management.md) — Ensures consistent text highlighting and caret behavior across different web browsers using a wrapper around native APIs.
- [DOM Manipulation](https://awesome-repositories.com/f/web-development/dom-manipulation.md) — Implements draggable, resizable, and editable HTML elements with custom behaviors and state tracking.
- [Editor State Orchestrators](https://awesome-repositories.com/f/web-development/history-management/visual-editor-history/editor-state-orchestrators.md) — Provides a visual document orchestrator to manage element behaviors, state transitions, and editing history.
- [HTML Content Management](https://awesome-repositories.com/f/web-development/html-content-management.md) — Parses and transforms HTML strings into structured formats for manipulation, cleaning, and optimized export.
- [HTML String Parsing](https://awesome-repositories.com/f/web-development/html-dom-manipulators/html-string-parsing.md) — Provides a JavaScript-based parser to convert HTML strings into structured DOM nodes for editor processing. ([source](http://getcontenttools.com/api))
- [Undo-Redo History](https://awesome-repositories.com/f/web-development/history-management/undo-redo-history.md) — Implements undo and redo functionality by storing sequential snapshots of the document structure.
- [HTML Attribute Restrictions](https://awesome-repositories.com/f/web-development/html-attribute-restrictions.md) — Enforces security by restricting forbidden attributes on specific HTML tags to prevent unauthorized modifications. ([source](http://getcontenttools.com/api/content-tools))
- [HTML Output Optimizers](https://awesome-repositories.com/f/web-development/html-output-optimizers.md) — Generates optimized HTML output by removing internal scaffolding classes and browser-specific formatting. ([source](http://getcontenttools.com/api/content-edit))
- [HTML Sanitization Utilities](https://awesome-repositories.com/f/web-development/html-sanitization-utilities.md) — Ships utilities for sanitizing HTML output and transforming media links into valid embed formats.
- [Inline Text Formatting](https://awesome-repositories.com/f/web-development/inline-text-formatting.md) — Adds or removes specific HTML tags to a range of characters for visual styling. ([source](http://getcontenttools.com/api/content-tools))

### Content Management & Publishing

- [Document Element Insertion](https://awesome-repositories.com/f/content-management-publishing/document-element-insertion.md) — Enables the insertion of interactive elements like links, images, videos, and tables into editable content. ([source](http://getcontenttools.com/api/content-tools))
- [Web Content Authoring Interfaces](https://awesome-repositories.com/f/content-management-publishing/web-content-authoring-interfaces.md) — Provides interfaces for uploading and editing media assets while maintaining valid HTML embed formats.

### Development Tools & Productivity

- [Caret Position Normalization](https://awesome-repositories.com/f/development-tools-productivity/automatic-tag-closing/tag-format-toggling/caret-position-normalization.md) — Ensures consistent caret positioning across browsers by wrapping empty text nodes around self-closing tags. ([source](http://getcontenttools.com/api/content-select))
- [Output Normalizers](https://awesome-repositories.com/f/development-tools-productivity/balanced-tag-matching/html-tag-matchers/output-normalizers.md) — Cleans internal scaffolding and reorders tags by length to generate optimized HTML for export.
- [Undo-Redo State History](https://awesome-repositories.com/f/development-tools-productivity/change-tracking/state-tracking-utilities/action-based-state-tracking/undo-redo-state-history.md) — Stores sequential DOM snapshots to implement undo and redo functionality. ([source](http://getcontenttools.com/api/content-tools))

### Graphics & Multimedia

- [Media Upload Workflows](https://awesome-repositories.com/f/graphics-multimedia/image-editing-processing/image-editors/image-manipulation-toolkits/media-upload-workflows.md) — Provides a coordinated workflow dialog for uploading, rotating, and cropping images before insertion. ([source](http://getcontenttools.com/api/content-tools))

### Part of an Awesome List

- [Standalone Editors](https://awesome-repositories.com/f/awesome-lists/devtools/standalone-editors.md) — Library for building HTML content editors.