BestHub
Sign in
Tagged articles
24 articles
Page 1 of 1
Bilibili Tech
Bilibili Tech
Mar 12, 2026 · Frontend Development

Turning Canvas Snapshots into Real Video Cards with ProseMirror

This article recounts Bilibili’s evolution from using Canvas‑based screenshot tricks to render video cards in the Quill editor to adopting ProseMirror with Tiptap, detailing the technical debt, the new schema and NodeView architecture, performance optimizations, batch link validation, and strategies for backward compatibility and real‑time interactive components.

ProseMirrorfrontendperformance
0 likes · 17 min read
Turning Canvas Snapshots into Real Video Cards with ProseMirror
DeWu Technology
DeWu Technology
Aug 18, 2025 · Frontend Development

Building a High‑Performance Custom Knowledge Base with TinyMCE

This article details the design and implementation of a self‑built customer service knowledge base, covering background needs, the selection of TinyMCE as the rich‑text editor, system architecture, solutions for image migration, lazy loading, template thumbnails, global find/replace, and RAG‑based intelligent Q&A.

Image Lazy LoadingKnowledge BaseTinyMCE
0 likes · 12 min read
Building a High‑Performance Custom Knowledge Base with TinyMCE
Rare Earth Juejin Tech Community
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.

Data Structurecontenteditablerich-text-editor
0 likes · 29 min read
Design and Implementation Considerations for Building a Rich Text Editor from Scratch
Rare Earth Juejin Tech Community
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.

CKEditorTinyMCEeditor comparison
0 likes · 14 min read
Comprehensive Evaluation of Popular Rich Text Editors
Rare Earth Juejin Tech Community
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.

CanvasHTML5frontend
0 likes · 28 min read
Building a Canvas‑Based Rich Text Editor Similar to Word
Bilibili Tech
Bilibili Tech
Oct 18, 2022 · Frontend Development

Building a Slate.js Rich Text Editor: Toolbar, Lists, and Image Upload

This tutorial walks through the practical steps of extending a Slate.js rich‑text editor with toolbar actions, multi‑level list handling, and a robust image‑upload solution, providing code snippets, implementation details, and design considerations for each feature.

JavaScriptListsReact
0 likes · 12 min read
Building a Slate.js Rich Text Editor: Toolbar, Lists, and Image Upload
Bilibili Tech
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
ELab Team
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
Xianyu Technology
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
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.

FlutterSlatearchitecture
0 likes · 8 min read
Design and Architecture of a High‑Performance Extensible Rich Text Editor for Flutter
21CTO
21CTO
Nov 25, 2021 · Frontend Development

How Meituan’s Page‑Peach Platform Boosts Front‑End Efficiency with Cross‑Platform Rich Text Management

This article details Meituan’s Page‑Peach platform, a cross‑platform rich‑text management solution that empowers product and operations teams to create and publish simple, frequently changing pages without developer bottlenecks, while providing developers with fast code editing, preview, and deployment capabilities, ultimately reducing cost and improving efficiency.

MeituanOpen APIcross-platform
0 likes · 22 min read
How Meituan’s Page‑Peach Platform Boosts Front‑End Efficiency with Cross‑Platform Rich Text Management
Meituan Technology Team
Meituan Technology Team
Nov 25, 2021 · Frontend Development

Cross-Platform Rich Text Management Platform Page-Peggy: Design, Implementation, and Impact

Page‑Peggy, Meituan Medicine Technology’s cross‑platform rich‑text management platform, lets product and operation teams instantly create and publish FAQ‑style pages through a visual editor while offering developers a WebIDE for custom code, template markets, SDK integration and Open API, resulting in over 5,000 pages, 82 million views and adoption across dozens of departments.

OpenAPIWebIDEfrontend development
0 likes · 19 min read
Cross-Platform Rich Text Management Platform Page-Peggy: Design, Implementation, and Impact
TikTok Frontend Technology Team
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
vivo Internet Technology
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
Aotu Lab
Aotu Lab
Nov 20, 2020 · Frontend Development

Is Vue 3 Ref‑Sugar a Dead End? Exploring Vue Proposals, Rich Text Editors & Frontend Tools

This article examines the controversial Vue 3 Ref‑sugar proposal, traces the evolution of rich‑text editors, outlines frontend exception‑monitoring architectures, reviews a TypeScript‑based JavaScript interpreter, and shares practical experiences with Vue 3 mini‑program development, offering a comprehensive technical perspective for modern frontend engineers.

Exception MonitoringJavaScript InterpreterRef-sugar
0 likes · 7 min read
Is Vue 3 Ref‑Sugar a Dead End? Exploring Vue Proposals, Rich Text Editors & Frontend Tools
Laravel Tech Community
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
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
Qunar Tech Salon
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