让您的内容生成更加简单高效！

📚目录

1. 引言
2. 插件介绍
3. 使用TinyMCE和下载插件
4. 启动TinyMCE编辑器
5. 生成AI产品描述
6. 生成AI博文文章
7. 创建AI博文图片
8. 插件代码简介
9. 插件功能
10. 插件应用案例
11. 结论
12. 参考资源

引言

在本视频中，我将带您了解我为TinyMCE文本编辑器开发的三个新的生成型AI插件。也许你观看了我的频道，会记得我曾为CK编辑器创建过类似的插件。首先，我们要做的是前往tiny.cloud/geten Tiny网站，下载tiny MCE STK插件。这将在您的系统上下载一个本地的zip文件，您只需解压缩它，将会创建一个名为tiny MCE的文件夹。然后，在该文件夹中，我们将创建一个非常简单的HTML文档。下面是一个示例，显示了加载tiny MCE编辑器所需的起始HTML。接着，我们给它一个标题，引用了一个脚本，该脚本将是tiny mc.min.js，即编辑器的Javascript文件。然后，我们告诉它，我们将创建一个名为"my text area"的选择器。而在HTML的body部分的文本区域中，我们将放置一个简单的"hello world"。当您创建好这个HTML文件并在浏览器中加载它后，您将看到tiny MCE编辑器在您的浏览器中加载，并且带有"hello world"文本示例。对于我的示例，我实际上已经对此HTML文件进行了自定义，使其仅包含我开发和创建的三个插件。我将前往Tiny MCE编辑器页面展示给您看，如您所见，工具栏上有三个图标。第一个图标将用于生成AI产品描述，第二个图标将用于生成AI博文文章，第三个图标将用于为我们的博客内容创建AI图片。所有这些API都与Open AI API集成在一起，因此我们将使用GPT API来生成产品描述和博文内容，然后我们将使用DALL·E V3 API来生成博客内容的图片。

🔍插件介绍

这篇文章将介绍我为TinyMCE文本编辑器开发的三个新的生成型AI插件。这些插件可帮助您轻松地生成产品描述、博文文章和博文图片。这些插件与Open AI的API集成，使得生成内容变得简单高效。通过使用这些插件，您可以快速生成高质量的文本内容，无需自己编写和思考。

📥使用TinyMCE和下载插件

首先，您需要前往Tiny Cloud网站，下载并安装TinyMCE STK插件。下载后将其解压缩，您将会得到一个包含TinyMCE文件夹的本地文件。然后，按照提供的HTML模板加载TinyMCE编辑器，以便在浏览器中使用。

🚀启动TinyMCE编辑器

加载TinyMCE编辑器后，您将在工具栏看到三个新增的图标。这些图标分别用于生成AI产品描述、AI博文文章和AI博文图片。通过点击这些图标，我们可以快速生成所需的内容。

🤖生成AI产品描述

让我们以一个虚构的电商公司为例，假设我们要为新产品创建一个产品描述，该产品是一款名为"奥迪朗德户外躺椅"的产品。点击"生成AI产品描述"图标后，我们需要输入一些关键词来帮助AI决定如何撰写产品描述。在这个例子中，我已经创建了一些样本关键词，例如"瀑布前设计"、"曲面座椅"、"UV耐热聚乙烯构造"等等。在输入关键词后，点击"生成"按钮，很快我们就会得到一个来自Chat GPT的详细产品描述。生成的描述文本会自动插入到文本编辑器中。

由Chat GPT生成的产品描述如下：

引入Riverview红色奥迪朗德户外躺椅，这是您户外乐园的完美选择。它采用惊艳的瀑布前设计和曲面座椅，既舒适又时尚。采用高密度聚乙烯材质制成，该躺椅经得起任何气候的考验。它具有耐紫外线的特性，即使在阳光明媚的条件下，也能保持鲜艳的红色。这款躺椅具有耐用性和海上级别的品质，非常适合在沿海地区使用。需要组装，但是按照简单的说明书，您可以很快将椅子组装好。选择Riverview红色奥迪朗德躺椅，为您的户外空间增添一丝优雅与放松，立即下单，开始享受无尽的舒适与时尚之旅。

通过这个例子，我们可以看到，只需几秒钟就能生成一份完整的新产品描述，而无需花费时间和精力来从零开始撰写。

Pros:

• 快速生成高质量的产品描述
• 无需思考和编写内容
• 可定制关键词，以便生成符合需求的描述

Cons:

• 生成的描述可能需要进一步优化和编辑

📝生成AI博文文章

接下来，让我们尝试使用"生成AI博文文章"插件。这个插件可以帮助我们快速撰写详细的博文文章。我们需要输入一个关于博文的主题，例如"我们的新奥迪朗德红色躺椅"。点击"生成"按钮后，插件将迅速生成一篇包含标题、段落和样式的HTML格式的文章。如果不满意生成的文章，我们可以选择"重新生成"，直到满意为止。最后，点击"插入"按钮即可将文章插入到文本编辑器中。

生成的HTML格式的文章示例：

<h1>我们的新奥迪朗德红色躺椅</h1>
<p>引言：我们很高兴向您介绍我们最新的产品——新奥迪朗德红色躺椅。这款躺椅兼具时尚和舒适，适用于室内和室外使用。</p>
<p>正文：本躺椅采用精美的曲线设计，配有柔软舒适的座椅。无论您是在阳台上放松，还是在花园中享受美好时光，这款躺椅都能给您带来极致的舒适体验。</p>
<p>此外，新奥迪朗德红色躺椅采用高品质材料制成，坚固耐用。UV耐热聚乙烯材料确保它不会因长时间暴露在阳光下而失去颜色，即使在最炎热的夏天也能保持艳丽的红色。</p>
<p>无论您是在沿海地区还是在山区，新奥迪朗德红色躺椅都是您的理想选择。它具有防水防污功能，非常容易清洁和维护。只需用清水擦拭，即可使其焕然一新。</p>
<p>不仅如此，新奥迪朗德红色躺椅还具有符合人体工学的设计，使您在长时间坐卧时仍能享受舒适的支撑和良好的身体姿势。</p>
<p>总结：我们衷心为您推荐新奥迪朗德红色躺椅，它是一款与众不同的躺椅，为您的生活带来便利和舒适。无论是在室内还是室外，无论您是在工作还是休闲，在新奥迪朗德红色躺椅上都能找到心灵的宁静与舒适。</p>

通过这个插件，我们可以快速生成格式化的博文文章，节省了大量的时间和精力。

Pros:

• 快速生成格式化的博文文章
• 可以重复生成直到满意为止
• 可以自定义博文主题

Cons:

• 生成的文章可能需要进一步编辑和修改
• 需要根据需求调整生成的内容

🖼️创建AI博文图片

现在，让我们使用"创建AI博文图片"插件为博文文章创建一张图片。将光标放在博文文章正文之前，点击工具栏上的图片图标。插件将要求我们提供一个详细的提示，用于生成图片。同时，我们还需要指定图片的宽度。例如，我们可以输入"俯瞰湖泊的近景红色奥迪朗德椅，湖面上有美丽的蓝天和白云，周围是翠绿的草地"作为提示，并指定图片宽度。点击"生成并插入"按钮后，几秒钟后，我们将获得一张高质量的图片，图片上是一张放在翠绿草地上、俯瞰湖泊的红色奥迪朗德椅。这样一张图片将让我们的博文更具吸引力。

通过这个插件，我们可以轻松地为博文文章生成精美的图片，为内容增添视觉效果。

Pros:

• 快速生成博文图片，无需专业设计技能
• 可以根据需求自定义图片提示
• 生成的图片具有高质量和视觉吸引力

Cons:

• 生成的图片可能需要进一步调整和编辑
• 图片样式和效果有限

🧩插件代码简介

下面简要介绍一下这三个插件的代码结构和功能。

• 插件基本结构：为了能够在TinyMCE编辑器中成功启动插件，每个插件都需要在插件文件夹中创建一个文件夹，并在其中创建一个插件的JavaScript文件。插件文件夹的路径是TinyMCE根目录下的plugins文件夹。例如，为生成AI产品描述的插件，我创建了一个名为"GPT"的文件夹，并在其中创建了一个名为"plugin.min.js"的文件。请注意，这个文件实际上没有进行JavaScript代码的缩小，但您可以选择进行缩小以减小文件体积。为了成功启动插件，首先需要定义插件本身，并为其添加一个图标。

• 插件功能：每个插件包含一个功能菜单，通过单击该菜单图标，可以打开一个对话框，提供生成内容所需的输入和选项。示例代码显示了如何处理对话框中的元素和按钮。我们将输入的值传递给与API交互的函数，并更新对话框中的内容。在最后的函数中，我们定义了与Open AI API的通信方式，并将API密钥插入代码中。根据插件的不同功能，我们可以使用不同的API调用，以生成所需的内容。

• 插件应用案例：这三个插件为产品目录管理人员、市场营销人员和商家在电商平台上的商品添加内容时提供了便利。通过使用这些插件，他们无需手动编写产品描述、博文文章和博文图片，从而节省了时间和精力。

通过上述代码和功能，这些插件为商家在电商平台上管理产品数据和内容提供了高效简便的方法。

结论

这篇文章介绍了三个为TinyMCE文本编辑器开发的生成型AI插件。这些插件可以大大简化产品描述、博文文章和博文图片的生成过程，为商家和营销人员提供了高效的工具。通过与Open AI API的集成，这些插件能够快速生成高质量的内容，节省了用户的时间和精力。

如果您觉得本文有用，请点击"喜欢"并订阅我的频道，我将继续分享类似的内容。感谢您的阅读，祝您有一个美好的一天！

参考资源

1. TinyMCE官方网站: tiny.cloud
2. Open AI官方网站: openai.com
3. SVGRepo: svgrepo.com