Rich Text Editor

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

Nov 12, 2024 · Frontend Development

Comprehensive Evaluation of Popular Rich Text Editors

This article provides a detailed comparison of major rich‑text editors—including TinyMCE, CKEditor, Tiptap, Quill, wangEditor, Jodit, Editor.js, Slate, medium‑editor, Squire, UEditor, and Summernote—covering their features, advantages, disadvantages, and suitability for various development scenarios.

CKEditorRich Text Editoreditor comparison

0 likes · 14 min read

Comprehensive Evaluation of Popular Rich Text Editors

Rare Earth Juejin Tech Community

Aug 3, 2023 · Frontend Development

Building a Canvas‑Based Rich Text Editor Similar to Word

This tutorial walks through creating a lightweight, canvas‑driven rich‑text editor that mimics Word’s layout and editing features, covering data structures, page rendering, text measurement, line calculation, cursor handling, keyboard input, deletion, line breaks, and selection using plain JavaScript and HTML5 canvas.

HTML5JavaScriptRich Text Editor

0 likes · 28 min read

Building a Canvas‑Based Rich Text Editor Similar to Word

Rare Earth Juejin Tech Community

Nov 24, 2022 · Frontend Development

Building a Markdown Rich Text Editor with ProseMirror and Remirror in React

This tutorial walks through creating a lightweight rich‑text editor using ProseMirror's core modules, enhancing it with plugins like history and input rules, and then simplifying development with the Remirror React library to support Markdown formatting and custom extensions.

MarkdownProseMirrorReact

0 likes · 12 min read

Building a Markdown Rich Text Editor with ProseMirror and Remirror in React

Rare Earth Juejin Tech Community

Nov 11, 2022 · Mobile Development

Implementing Text and Image Mixed Editing in a Flutter Rich Text Editor

This article explains how to extend a Flutter rich‑text editor to support mixed text‑image layout by using WidgetSpan, InlineSpan trees, and the image_picker plugin, providing detailed code examples and a deep dive into the rendering pipeline.

FlutterImageInlineSpan

0 likes · 10 min read

Implementing Text and Image Mixed Editing in a Flutter Rich Text Editor

Rare Earth Juejin Tech Community

Oct 17, 2022 · Mobile Development

Building a Custom Rich Text Editor in Flutter: Analysis, JSON Configuration, and Core Modules

This article analyzes the essential features of rich‑text editors, compares popular solutions, explains the choice of the Quill protocol, and provides a step‑by‑step guide with Flutter code to define JSON configurations, parse colors, create data models, and render rich text in a custom Flutter widget.

DartFlutterJSON

0 likes · 13 min read

Building a Custom Rich Text Editor in Flutter: Analysis, JSON Configuration, and Core Modules

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

Xianyu Technology

Jun 8, 2022 · Mobile Development

Design and Implementation of a High‑Performance Flutter Rich Text Editor (Mural)

The article details how the Xianyu team built a feature‑complete, extensible, high‑performance Flutter rich‑text editor called Mural by defining a Slate‑inspired protocol layer, mapping it to a custom widget/render object tree, handling cursor and WidgetSpan selection, using diff‑based updates, and providing a plug‑in architecture for extensions.

CursorFlutterMural

0 likes · 10 min read

Design and Implementation of a High‑Performance Flutter Rich Text Editor (Mural)

Xianyu Technology

May 18, 2022 · Mobile Development

Design and Architecture of a High‑Performance Extensible Rich Text Editor for Flutter

To enable Xianyu sellers to create rich product descriptions, the team built a high‑performance, extensible Flutter rich‑text editor using Slate’s protocol, layering protocol, capability extensions, rendering, and business extensions to support custom emojis, themes, ordered paragraphs, and native‑level interactions.

FlutterProtocolRich Text Editor

0 likes · 8 min read

Design and Architecture of a High‑Performance Extensible Rich Text Editor for Flutter

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

vivo Internet Technology

Jun 30, 2021 · Frontend Development

Rich Text Editor Evolution and Extension Guide: From Selection to Customization

The guide traces the evolution of rich‑text editors from basic execCommand tools to modern, self‑rendered engines, explains how to select the appropriate editor stage for business needs, and details extension techniques—including toolbar, menu, internal module, plugin development—and theme customization options.

CKEditorProseMirrorQuill

0 likes · 21 min read

Rich Text Editor Evolution and Extension Guide: From Selection to Customization

Laravel Tech Community

Nov 7, 2020 · Frontend Development

CKEditor 5 v23.1.0 Stable Release: Raw HTML Embedding, Table Paste Enhancements, and Other Improvements

CKEditor 5 version 23.1.0 introduces raw HTML embedding with rendering support, an enhanced reconversion API, the ability to paste table content into other tables, numerous bug fixes, new documentation, React integration, and security recommendations such as using a sanitizer and CSP.

CKEditorHTML EmbeddingRelease Notes

0 likes · 2 min read

CKEditor 5 v23.1.0 Stable Release: Raw HTML Embedding, Table Paste Enhancements, and Other Improvements

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

Python Programming Learning Circle

Aug 9, 2018 · Backend Development

Quickly Integrate Baidu UEditor into Laravel 5 with Cloud Storage Support

This guide shows how to install and configure Baidu's UEditor rich‑text editor in a Laravel 5 project, covering Composer installation, service provider registration, configuration for local or Qiniu cloud storage, and Blade view integration for seamless content editing.

IntegrationLaravelPHP

0 likes · 7 min read

Quickly Integrate Baidu UEditor into Laravel 5 with Cloud Storage Support

Qunar Tech Salon

Dec 6, 2017 · Frontend Development

Using Draft.js for Custom Rich Text Editing in React

This article explains how Draft.js, a React‑based rich‑text editor framework, can be applied to build a customizable editor with support for structured content, immutable state management, custom block rendering, data conversion, and hook handling, providing code examples throughout.

Draft.jsJavaScriptReact

0 likes · 9 min read

Using Draft.js for Custom Rich Text Editing in React