Flowbite 的 WYSIWYG 文本编辑器是基于 Tip Tap 库的开源项目，采用 MIT 许可协议，允许您轻松编辑包含排版样式、链接、图片、视频等复杂的文本数据。

Flowbite 提供的标记和样式都基于 Tailwind CSS 的工具类，而 WYSIWYG 文本编辑器中的内容样式则基于 Flowbite Typography 插件。

此页面提供的所有示例均支持深色模式、RTL（从右到左）样式、移动设备的响应式布局，您还可以轻松使用 JavaScript 和 Flowbite API 添加自定义功能。

开始

在继续之前，请确保您的项目已安装 Tailwind CSS、Flowbite 和 Tip Tap。

请参阅 Flowbite 的快速入门指南以启用交互元素。

安装 Flowbite Typography 插件，用于格式化 WYSIWYG 编辑器预览中的文本内容：

npm i flowbite-typography

在 tailwind.config.js 文件中引入该插件：

theme: {  
    // ...  
},  
plugins: [  
    require('flowbite-typography'),  
    // ...  
],

将 Flowbite 插件中的 wysiwyg 字段设置为 true，以启用伪样式：

plugins: [  
  require('flowbite/plugin')({  
      wysiwyg: true,  
  }),  
  // ... other plugins  
]

最后，通过 NPM 安装 Tip Tap，或者如果使用 CDN，则跳过此步骤：

npm install @tiptap/core @tiptap/pm @tiptap/starter-kit

现在，您可以通过复制以下 HTML 和 JavaScript 代码来使用示例。

默认文本编辑器

使用此 WYSIWYG 文本编辑器示例，启用基本的排版样式和格式，包括添加列表、链接、图片、视频、代码块、文本对齐、引用块、标题和段落等。

获取源码和示例

文本格式化

使用此 WYSIWYG 文本编辑器示例启用文本格式化功能，如下划线、加粗、斜体、删除线、代码、高亮显示等，还可以选择文本大小、颜色、字体等。

获取源码和示例

文本对齐

启用 WYSIWYG 组件内容的左对齐、居中、右对齐和两端对齐。

获取源码和示例

排版元素

使用此示例创建基于 Tailwind CSS 工具类和 Flowbite API 的排版元素，如无序列表、编号列表、引用块、水平线、段落、标题和代码块等。

获取源码和示例

配置链接

使用此示例为 WYSIWYG 文本编辑器中的内容添加和移除锚点链接。

获取源码和示例

使用图片

使用此示例学习如何在 WYSIWYG 文本编辑器中添加图片，并配置图片 URL、alt 属性（对 SEO 和无障碍访问非常重要）和图片标题。

获取源码和示例

添加视频

使用此示例在 WYSIWYG 文本编辑器中基于 YouTube URL 源嵌入视频，并使用 Flowbite 模态组件 API 设置视频的宽度和高度。

获取源码和示例

编辑表格

使用此示例在 WYSIWYG 文本编辑器中编辑表格数据，添加和移除表格列、行和单元格，并使用其他功能轻松导航表格数据。

获取源码和示例

撤销与重做

使用 WYSIWYG 文本编辑器组件的历史功能集成撤销与重做操作。

获取源码和示例

导出数据

使用 editor.getJSON() 和 editor.getHTML() 函数，将 WYSIWYG 文本编辑器中的文本内容导出为 JSON 或原始 HTML 格式，以便持久化到数据库或 API 结构中。

获取源码和示例

Javascript 行为

了解如何通过 JavaScript 编程地使用 WYSIWYG 编辑器，通过创建对象实例、设置选项、方法、事件监听器等，集成到您的代码库中。

在通过 NPM 或 CDN 安装 Tip Tap 后，您可以创建一个新的 Editor 对象：

import { Editor } from '@tiptap/core';  
import StarterKit from '@tiptap/starter-kit';  
  
new Editor({  
  element: document.getElementById('wysiwyg'),  
  extensions: [StarterKit],  
  content: '<p>Welcome to Flowbite!</p>',  
})

确保您还创建了一个带有合适 ID 的空 div 元素：

<div id="wysiwyg"></div>

此代码将自动设置 WYSIWYG 组件中所需的标记。请注意，Tip Tap 库是无头的，因此需要自行为元素设置样式，但您可以从 Flowbite 页面复制示例。

内容样式

我们还建议从 Flowbite Typography 包中添加自定义排版类，以确保文本编辑器中的内容正确显示样式：

new Editor({  
  element: document.getElementById('wysiwyg'),  
  extensions: [StarterKit],  
  content: '<p>Welcome to Flowbite!</p>',  
  editorProps: {  
        attributes: {  
            class: 'format lg:format-lg dark:format-invert focus:outline-none format-blue max-w-none',  
        },  
    }  
})

扩展

Tip Tap 是一个模块化的库，这意味着如果你想在 WYSIWYG 组件中引入图片、视频、链接等元素，你需要专门从库中导入这些资源，并在初始化 Editor 对象时将其设置为扩展。

以下是添加链接扩展的示例：

import { Editor } from '@tiptap/core';  
import StarterKit from '@tiptap/starter-kit';  
import Link from '@tiptap/extension-link';  
  
const editor = new Editor({  
    element: document.querySelector('#wysiwyg-links-example'),  
    extensions: [  
        StarterKit,  
        Link.configure({  
            openOnClick: false,  
            autolink: true,  
            defaultProtocol: 'https',  
        })  
    ],  
    content: '<p>Flowbite 是一个 <strong>基于实用优先的 Tailwind CSS 框架的开源 UI 组件库</strong>，支持深色模式、Figma 设计系统等。</p><p>它包含网站常用的所有组件，如按钮、下拉菜单、导航栏、模态框、日期选择器、高级图表等。</p><p>了解更多组件信息，请访问 <a href="https://flowbite.com/docs/getting-started/introduction/">Flowbite 文档</a>。</p>',  
    editorProps: {  
        attributes: {  
            class: 'format lg:format-lg dark:format-invert focus:outline-none format-blue max-w-none',  
        },  
    }  
});

方法

你可以轻松调用 Editor 对象中的方法来设置文本样式、链接、图片等。以下是一个基于按钮点击事件的示例，它会提示输入链接的 URL 并将其添加到当前选中的文本：

// 为按钮设置自定义事件监听器  
document.getElementById('toggleLinkButton').addEventListener('click', () => {  
    const url = window.prompt('输入图片链接：', 'https://flowbite.com');  
    editor.chain().focus().toggleLink({ href: url }).run();  
});

以下是另一个示例，展示如何通过按钮点击移除链接：

// 基于按钮点击移除链接  
document.getElementById('removeLinkButton').addEventListener('click', () => {  
    editor.chain().focus().unsetLink().run()  
});

本页面中的示例具有功能性元素，您可以查看 JavaScript 标签中的源代码。

许可协议

本页面的资源，包括 Flowbite 示例和 Tip Tap，均依据 MIT 许可协议授权使用。

鸣谢

这些示例的实现得益于以下开源资源：

Flowbite 库
Tailwind CSS WYSIWYG — Flowbite
Tip Tap 库
Tailwind CSS
Flowbite SVG 图标

前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

使用 Tailwind CSS 和 Flowbite 构建的开源 WYSIWYG 富文本编辑器组件

开始