构建所见即所得页面编辑器，就用GrapesJS

点击下面的任意元素，原地重新输入，然后更改外观。这里没有预览——画布就是页面，样式面板编辑的是你正在阅读的相同元素。

原版编辑器：画布、块、图层树、样式管理器和设备切换器，没有添加任何内容。

所见即所得（WYSIWYG）代表“所见即所得”（What You See Is What You Get）。所见即所得编辑器允许用户使用内容的可视化表示，而不必直接编辑原始HTML和CSS。他们工作时看到的页面就是他们将发布的页面。

用户可以在构建页面时看到它。

富文本编辑器是段落的合适工具。它负责文本格式化、标题和列表管理，并管理内联内容。页面构建器则更上一层：涵盖部分、栏、组件、图片、按钮、样式和响应式，这些内容围绕该文本构成页面。

GrapesJS 结合了可视化页面编辑和可扩展组件架构——而且它仍然包含一个富文本编辑器，因为原地编辑段落是所见即所得的一半。如果你的产品已经使用 CKEditor、TinyMCE、Froala 或 Quill，你可以保留它们：每个版本的集成都在 GJS.Market 上。

视觉编辑体验的构建模块，都是GrapesJS的核心，而不是你自己组装的东西。

同一个视觉编辑引擎隐藏在截然不同的产品之下。这些是它最常呈现的形态。

视觉编辑通常是由一个团队提出请求，另一个团队负责制作。这些人是对话双方的成员。

编辑器开箱即用，已经知道文本、图片、按钮和部分。让它感觉原生的是它如何教它应用已有的对象。

1. 01
2. ↓02
3. ↓03
4. ↓用与你应用的对象、内容和工作流程相匹配的组件扩展编辑器。

第三级的示例是你为自己产品构建的组件，而不是可下载的插件。GrapesJS 给你组件 API;组件知道什么由你决定。

在可视化编辑器中预览和调整视口大小的布局，而不是在手机上发布和检查。

设备是可配置的：上述三个是默认的，你可以定义设计系统实际使用的断点。从该断点开始，设置在更窄的设备上的样式。

GrapesJS 提供了可视化编辑层。它周围的所有内容——用户、权限、数据、存储和发布——都保留在你已经运行的应用中。

如果问题具体是如何在现有产品中安装编辑器，那该攻略有独立页面。 可嵌入页面构建器

围绕现有的应用架构构建编辑器，而不是把内容迁移到另一个托管平台上。

const editor = grapesjs.init({
  container: '#editor',

  // Each page is a row in your database, behind your own auth.
  storageManager: {
    type: 'remote',
    autosave: true,
    options: {
      remote: {
        urlStore: `/api/pages/${pageId}`,
        urlLoad: `/api/pages/${pageId}`,
        fetchOptions: { credentials: 'include' },
      },
    },
  },
});

// Publishing stays on your side — your domains, your CDN, your workflow.
async function publish() {
  await fetch(`/api/pages/${pageId}/publish`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ html: editor.getHtml(), css: editor.getCss() }),
  });
}

GJS.Market 卖插件;它不托管你的编辑器，不存储你的页面，也不运行你的数据库。存储管理器指向你给它的端点，背后是你自己的认证。

视觉编辑器看起来像是一个功能，实际上是十几个子系统，每个子系统都必须工作，才能感觉完成。

所见即所得编辑器的组成

• 画布
• 选择
• 内联编辑
• 拖拽
• 组成部分
• 方块
• 造型
• 响应式控制
• 资产
• 撤销与重做
• 存储
• 出口
• 出版
• 维护

这是范围的比较，而非进度——编辑制作所需时间取决于你的团队以及你实际需要多少。打造你的产品，而不是从零开始找另一个编辑。

一张空白画布是最难交给非技术用户的东西。起始布局给他们一个可以修改的东西，而不是创造的东西。

这些是建造者用户要求的布局，而不是产品列表。GJS.Market上预设的起始点是预设。

以下内容都是GJS.Market上的真实商品列表，包含其真实名称和价格。每个组别还关联其类别，因此这里总有更多内容。

富文本编辑

在原来的地方编辑文本就是所见即所得的一半。把内置编辑器换成你产品已经用的那个。

浏览此类别

在线RTE

TinyMCE 8 Inline Text Editor

为已经标准化的团队带来了TinyMCE 6的实际操作。

¥496.80景观

RTE工具栏

Grapesjs RTE Extensions

它扩展了默认工具栏，加入了原版工具栏省略的格式操作。

免费景观

视觉样式

给样式面板更好的控制：颜色选择器、真实字体和精准间距。

浏览此类别

颜色

Grapesjs Style Gpickr

样式管理器内配备合适的色彩选择器，包括渐变。

免费景观

排版

Custom Fonts

它会在排版控制中添加你自己的字体族。

免费景观

间距

GrapesJS LayoutEnhancer: Precision Spacing Tool

通过拖动画布，可以调节边距和填充。

¥352.80景观

方块

现成的视觉构建模块，让画布在第一天就派上用场。

浏览此类别

方块

Plugin Basic Blocks

起始模块集：列、文本、图片、视频、地图。

免费景观

方块

Plugin Blocky for Tailwind CSS

为必须输出Tailwind的队伍预设的路段。

¥424.80景观

组成部分

专门的可编辑组件，包括在多个页面中重复使用的元素。

浏览此类别

可重复使用

Symbols

定义一个元素一次并重复使用，这样一次编辑就能更新每个实例。

免费景观

资产

附加媒体功能——上传、托管和编辑内图片编辑。

浏览此类别

资产

Grapesjs Cloudinary

将资产管理人员推荐给Cloudinary进行上传和转换。

免费景观

图像编辑

TOAST UI Image Editor

在不离开编辑器的情况下裁剪、旋转和过滤图片。

免费景观

模板

预设起始点，让用户永远不会面对空白画布。

浏览此类别

预设

Webpage Preset

一个现成的网页配置，用于启动项目。

免费景观

模板

Templates Manager

允许用户保存并重新打开自己的模板。

¥280.80景观

存储

一个放置编辑器生成的项目数据的地方。

浏览此类别

存储

Grapesjs Firebase Storage

当你不想搭建端点时，它会将项目持久化到 Firebase。

免费景观

页面

多页项目，适用于一个画布不是整个网站时。

浏览此类别

页面

Pages Manager

在编辑器中添加多页项目和页面列表。

¥180.00景观

人工智能

编辑器内的AI辅助生成。

浏览此类别

人工智能

Grapesjs GPT Plugin

根据提示生成所选组件的内容。

免费景观

四个起始组合，每个针对不同类型的产品。每个插件都是真实的列表，并标注其实时价格。

价格直接来自目录，且可能发生变化;产品页面具有权威性。

核心是一个 npm 包和一个容器元素。之后的一切都决定了用户应该看到多少编辑器内容。

import grapesjs from 'grapesjs';
import 'grapesjs/dist/css/grapes.min.css';

// The visual canvas. Everything the user sees here is the page itself,
// not a preview of it.
const editor = grapesjs.init({
  container: '#editor',

  // The panels that make the editing visual rather than textual.
  styleManager: { appendTo: '#styles' },
  deviceManager: {
    devices: [
      { id: 'desktop', name: 'Desktop', width: '' },
      { id: 'tablet', name: 'Tablet', width: '768px' },
      { id: 'mobile', name: 'Mobile', width: '375px' },
    ],
  },
});

// "What you see is what you get" starts with editing text where it
// already sits. GrapesJS ships an inline rich-text editor, and you can
// replace it with whichever one your product already uses.
editor.setCustomRte({
  enable(el, rte) {
    el.contentEditable = true;
    return rte;
  },
  disable(el) {
    el.contentEditable = false;
  },
});

// A component decides what the user is allowed to change visually.
editor.DomComponents.addType('quote', {
  model: {
    defaults: {
      // Editable in place, but the frame around it stays yours.
      editable: true,
      droppable: false,
      traits: ['author', 'source'],
    },
  },
});

1. 添加产品所需的组件
2. →自定义样式和编辑器界面
3. →根据你自己的API配置存储
4. →将出版与你的管道连接起来
5. →用插件扩展，这样可以节省时间

这就是整个表面：初始化、扩展、存储、发布。文档对每个管理器都有深入的介绍。

核心内容与框架无关;本页介绍如何在特定框架内安装。

从开源的视觉编辑基础开始，并围绕你的产品需求进行扩展。

相邻页面，针对本书仅涉及的问题。

从GrapesJS开始，定制编辑体验，添加你的产品所需的插件。