Building a High‑Performance Custom Knowledge Base with TinyMCE

Background

The customer service knowledge base centralizes information for support agents. The previous third‑party solution could no longer meet the growing volume of knowledge and the need for efficient cross‑system collaboration, prompting the development of a custom knowledge base.

Rich‑Text Editor Selection

After evaluating several editors, Quill was rejected because it lacks native table support, and wangEditor was excluded due to conflicting title and list features. Lexical was considered but its documentation and community activity were insufficient. CKEditor and TinyMCE were compared, and TinyMCE was chosen because the legacy system already uses it, ensuring smoother migration and slightly richer functionality.

System Overview

Knowledge Creation Flow

Each knowledge document is composed of structured paragraphs, each with a unique identifier and tag support, enabling precise retrieval and classification.

Knowledge Acquisition

Documents are stored as HTML strings; the minimal renderable unit is a paragraph. Structured paragraphs allow fine‑grained parsing and later search.

Application Scenarios

Knowledge Search – leverages Elasticsearch to locate relevant documents, highlights matched keywords, and scrolls to the exact paragraph.

Intelligent Q&A – uses a large‑model RAG pipeline trained on the knowledge base data to provide accurate answers.

Network Search – falls back to an external search agent when RAG cannot produce results, with risk‑control and intent filtering.

Problems and Solutions

Image Migration

Old knowledge links used the previous domain, requiring authentication to render. A listener intercepts paste actions, replaces old image URLs with new CDN URLs obtained via an API, and updates the editor view.

/**
 * Replace image URLs in the editor content
 * @param content
 * @param editor Editor instance
 * @returns Updated content
 */
export const replaceImgUrlOfEditor = async (content, editor) => {
  const oldImgUrls = extractImgSrc(content);
  const newImageUrls = await service.getNewImageUrl(oldImgUrls);
  const newContent = replaceImgSrc(content, newImageUrls.imgUrls);
  editor.updateView(newContent);
};

Lazy Loading of Large Image Sets

To avoid UI freeze when loading many images, only images within the viewport are loaded initially. Remaining images receive a loading="lazy" attribute and load when scrolled into view, eliminating re‑flow and repaint overhead.

Template Thumbnails

When creating or selecting a template, a screenshot of the template is captured, uploaded to a CDN, and displayed as a scaled thumbnail, allowing users to preview content without opening the template.

Global Find/Replace

Each paragraph runs its own editor instance, limiting native find/replace to the focused editor. By extending the plugin’s API (find, replace, next, prev, done) and adding a scheduler that coordinates across editors, a global find/replace dialog was built using react‑rnd for draggable UI.

RAG‑Based Intelligent Q&A

The system first retrieves relevant knowledge, orders, and then feeds it into a large language model to generate answers. If retrieval fails, a network search agent is invoked after risk‑control and intent filtering.

Summary

Based on TinyMCE, the custom knowledge base adds features such as table editing, lazy image loading, template thumbnail generation, and a global find/replace mechanism. Over 1,000 legacy documents have been migrated successfully, and the platform now offers stable performance and an improved user experience.