ContentEditable

Rare Earth Juejin Tech Community

May 5, 2025 · Frontend Development

Design and Implementation Considerations for Building a Rich Text Editor from Scratch

This article explores the motivations, architectural choices, zero‑width character handling, data‑structure design, and implementation strategies—including execCommand, ContentEditable, and Canvas approaches—for creating a custom rich‑text editor that balances flexibility, performance, and browser compatibility.

ContentEditableData StructureJavaScript

0 likes · 29 min read

Design and Implementation Considerations for Building a Rich Text Editor from Scratch

Rare Earth Juejin Tech Community

Apr 12, 2025 · Frontend Development

Make Any Webpage Editable with a Single JavaScript Command (document.designMode)

This article demonstrates how to turn an entire web page into an editable document instantly by setting the document.designMode property to "on" via the browser console, explains how to disable it, and compares related APIs such as contentEditable and execCommand.

ContentEditableDOMJavaScript

0 likes · 4 min read

Make Any Webpage Editable with a Single JavaScript Command (document.designMode)

Rare Earth Juejin Tech Community

Jul 5, 2024 · Frontend Development

Implementing an @User Mention Input Component with Highlight and Deletion Handling in React

This article explains how to build a custom React @mention input component that highlights mentioned users, treats the whole @username as a single deletable unit, tracks cursor position for a floating selector, and returns both the plain text and the list of mentioned users to the parent component.

ContentEditableMentionsReact

0 likes · 12 min read

Implementing an @User Mention Input Component with Highlight and Deletion Handling in React

Bilibili Tech

Sep 16, 2022 · Frontend Development

Understanding contenteditable and Modern Rich Text Editors with Slate.js

The article explains how the HTML contenteditable attribute enables in‑place editing, why legacy execCommand‑based editors are inconsistent, and how modern frameworks such as Slate.js—built on React and Immutable.js—provide a structured, location‑based data model with Transform and Node APIs for reliable, portable rich‑text editing.

ContentEditableJavaScriptReact

0 likes · 12 min read

Understanding contenteditable and Modern Rich Text Editors with Slate.js

政采云技术

Jul 26, 2022 · Frontend Development

Frontend Rich Text Basics and Implementation

This article introduces the concept of rich text in the frontend, explains two primary input methods (iframe with designMode and contenteditable elements), details the Selection API for handling text ranges, demonstrates toolbar commands using execCommand, and provides complete demo code for building a simple rich‑text editor.

ContentEditableRich TextexecCommand

0 likes · 15 min read

Frontend Rich Text Basics and Implementation

TikTok Frontend Technology Team

Nov 12, 2021 · Frontend Development

Evolution Stages of Rich Text Editors: From L0 to L2

This article outlines the evolution of rich‑text editors through L0, L1, and L2 stages, comparing their underlying APIs, data models, selection handling, and collaborative capabilities, and evaluates the advantages and drawbacks of each stage with examples such as UEditor, Quill, Slate, and Google Docs.

Collaborative EditingContentEditableRich Text Editor

0 likes · 15 min read

Evolution Stages of Rich Text Editors: From L0 to L2

Sohu Tech Products

Apr 7, 2021 · Frontend Development

Understanding Notion’s Block‑Based Editor Architecture and Operations

The article explains how Notion implements a block‑tree data model and a controlled contenteditable editor using React, detailing the data layer, operation (op) system, rendering components, selection handling, text styling, and copy‑paste mechanisms, all backed by transactional undo/redo logic.

Block ModelContentEditableEditor

0 likes · 27 min read

Understanding Notion’s Block‑Based Editor Architecture and Operations

UC Tech Team

Nov 2, 2018 · Frontend Development

Understanding Native and Modern Rich Text Editors and the Hugo.js Shadow‑Input Solution

The article examines browsers' native contenteditable and execCommand features, compares traditional and modern rich‑text editors, highlights the challenge of uncontrolled input from diverse IMEs, and introduces Hugo.js's three‑layer shadow‑input architecture as a robust solution for international and mobile frontend applications.

ContentEditableHugo.jsRich Text Editor

0 likes · 10 min read

Understanding Native and Modern Rich Text Editors and the Hugo.js Shadow‑Input Solution