Tagged articles

11 articles

Page 1 of 1

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.

Data Structurecontenteditablerich-text-editor

0 likes · 29 min read

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

Sohu Tech Products

Apr 2, 2025 · Frontend Development

Turn Any Webpage Into a Live CSS Editor with This Simple Trick

This guide shows how to transform a standard HTML page into an interactive CSS editor by embedding a style element inside the body, adding the contenteditable attribute, and running a live server, enabling instant visual feedback for any CSS changes.

CSSHTMLWeb Development

0 likes · 4 min read

Turn Any Webpage Into a Live CSS Editor with This Simple Trick

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.

MentionsReactTypeScript

0 likes · 12 min read

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

Alipay Experience Technology

May 9, 2023 · Frontend Development

From Terminal to Block Suites: Evolution of Web Editors and Their Core Technologies

This article traces the history of editor technology from early terminal editors to modern web‑based and block‑style editors, examines key architectural components such as contentEditable, model‑view‑controller design, collaborative algorithms, and highlights future directions like multimodal GPT interaction.

CRDTCollaborationOT

0 likes · 24 min read

From Terminal to Block Suites: Evolution of Web Editors and Their Core Technologies

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.

JavaScriptReactSlate.js

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.

HTMLRich TextSelection

0 likes · 15 min read

Frontend Rich Text Basics and Implementation

ELab Team

Jul 22, 2022 · Frontend Development

How to Build a Cross‑Platform Rich Text Editor with Quill and Custom Blots

This article explains the fundamentals of rich‑text editors, compares textarea and contenteditable approaches, introduces Quill’s delta format and parchment model, and provides step‑by‑step guidance for creating custom blots, handling media uploads, and processing paste events for seamless cross‑platform rendering.

DeltaQuillcontenteditable

0 likes · 15 min read

How to Build a Cross‑Platform Rich Text Editor with Quill and Custom Blots

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 editingcontenteditableoperational transformation

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 ModelNotionReact

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.

Hugo.jscontenteditablerich-text-editor

0 likes · 10 min read

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

ITPUB

Apr 8, 2016 · Frontend Development

Turn Your Browser into a Live HTML Editor with a Simple Data URI Trick

This article explains how entering a specially crafted data:text/html URI in the browser address bar creates a temporary, editable HTML page, and shows multiple community extensions that add syntax highlighting, theming, and custom behaviors using Ace editor and other tricks.

Ace editorBrowsercontenteditable

0 likes · 6 min read

Turn Your Browser into a Live HTML Editor with a Simple Data URI Trick