使用 ToolJet📋 构建 HTML 到 Markdown 转换器

在本教程中，我们将逐步讲解如何使用 ToolJet 构建 HTML 到 Markdown 的转换器。该应用程序允许用户输入 HTML 代码并获取相应的 Markdown 输出，只需点击按钮即可复制。使用 ToolJet 直观的预置组件，我们将在短短 5 分钟内设计出一个优雅的用户界面。HTML 到 Markdown 的转换将由Turndown JavaScript 库管理，而 Markdown 预览将使用react-markdown库渲染。

ToolJet 的“运行 JavaScript 查询和文本”组件可用于将 HTML 转换为 Markdown 并预览内容，无需使用外部库。但是，在本教程中，我们将演示如何在 ToolJet 中使用第三方库。

以下是完整应用程序的预览：

先决条件：

ToolJet ( https://github.com/ToolJet/ToolJet )：一款开源、低代码的商业应用程序构建器。您可以注册一个免费的 ToolJet 云帐户，或使用 Docker在本地机器上运行 ToolJet 。

JavaScript 基础知识：本教程需要对 JavaScript 有基本的了解，因为我们将使用 JavaScript 和 React 库来处理将 HTML 转换为 Markdown 并预览 Markdown 内容的逻辑。

首先，创建一个名为HTML To Markdown Converter 的新应用程序。

步骤 1：创建 UI

标题

• 在画布顶部添加一个 Container组件headerContainer并将其重命名为。
• 在 Container 中添加一个 Icon 和一个 Text 组件，并分别重命名为logo和headerText。
• 将文本设置为“HTML 到 Markdown 转换器”，并在图标组件中为应用程序选择合适的图标。

输入部分

• 在左侧添加另一个 Container 组件并将其重命名为inputContainer。
• 在容器内，添加一个标签为“输入 HTML 代码：”的文本组件。将其重命名为enterHTMLLabel。
• 在标签下方，添加一个用于 HTML 输入的 Textarea 组件并将其重命名为htmlInput。

输出部分

• 在输入部分旁边添加一个容器并将其重命名为outputContainer。
• 在输入部分下方添加一个标签为“Markdown Preview:”markdownLabel的文本组件。将其重命名为。
• 添加自定义组件以显示 Markdown 输出并将其重命名为markdownOutput。

按钮

• 在 Textarea 组件下方添加一个标签为“Convert”的按钮组件。将按钮重命名为convertButton。
• 在转换按钮旁边添加另一个标有“复制 Markdown”copyButton的按钮组件，并将其重命名为。

应用程序的 UI 已经完成。现在该关注功能了。

步骤 2：添加查询和事件

导入调低库

• 创建一个名为“运行 JavaScript 代码查询”importTurndownLibrary以导入 Turndown 库。
• 在查询中使用以下代码来导入库：

// Function to add script dynamically
function addScript(src) {
    return new Promise((resolve, reject) => {
        const scriptTag = document.createElement('script');
        scriptTag.setAttribute('src', src);
        scriptTag.addEventListener('load', resolve);
        scriptTag.addEventListener('error', reject);
        document.body.appendChild(scriptTag);
    });
}

try {
    // Importing turndown
    await addScript('https://cdnjs.cloudflare.com/ajax/libs/turndown/7.0.0/turndown.js');

    // Showing a success alert
    await actions.showAlert("success", 'Turndown JS is imported');
    turndownService.turndown(components.textarea1.value);
} catch (error) {
    console.error(error);
}

• 启用“在应用程序加载时运行此查询？”切换以在每次应用程序加载时自动运行此查询。

将 HTML 转换为 Markdown

• 创建另一个名为 的运行 JavaScript 代码查询convertToMarkdown。
• 在查询中使用以下代码将htmlInput组件中输入的文本转换为 markdown：

const turndownService = new TurndownService();
const markdown = turndownService.turndown(components.htmlInput.value);

return markdown;

按钮操作

• 对于转换按钮，创建一个新的单击 事件，将操作设置为运行查询，然后选择convertToMarkdown作为查询。

• 对于复制 Markdown按钮，创建一个新的单击事件，将操作设置为复制到剪贴板并{{queries.convertToMarkdown.data}}设置为文本。

现在，大部分关键功能已配置完毕。下一步，我们将使用自定义组件导入 React 库来预览 Markdown 内容。

步骤3：创建Markdown预览

添加自定义组件

• 在自定义组件中，添加查询将返回的数据convertToMarkdown：

{{
   { preview: queries.convertToMarkdown.data}
}}

• 使用以下代码呈现 Markdown 预览：

import React from 'https://cdn.skypack.dev/react';
import ReactDOM from 'https://cdn.skypack.dev/react-dom';
import { Container } from 'https://cdn.skypack.dev/@material-ui/core';
import Markdown from 'https://esm.sh/react-markdown@9';

const MyCustomComponent = ({ data }) => (
    <Container>
        <Markdown>{data.preview}</Markdown>
    </Container>
);

const ConnectedComponent = Tooljet.connectComponent(MyCustomComponent);
ReactDOM.render(<ConnectedComponent />, document.body);

这样，HTML 到 Markdown 的转换器就准备好了。是时候看看它的实际效果了！

步骤4：预览和测试

• 通过输入各种 HTML 片段并检查 Markdown 输出来测试应用程序。
• 确保复制 Markdown按钮正常工作。

结论

我们仅用几分钟就成功使用 ToolJet 构建了一个 HTML 到 Markdown 的转换器！此应用程序旨在简化您的内容格式化流程，您可以根据具体需求轻松扩展其功能。探索 ToolJet 的功能，创建类似的项目并增强您的工作流程。

您可以查看ToolJet 文档以进一步学习，或者加入 ToolJet Slack 社区以解决疑问和疑问。