如何在您的 React.Js 项目中集成富文本编辑器 (WYSIWYG)。

在本文中，我们将学习如何使用TinyMCE在您的 react.Js 项目中“集成富文本编辑器” 。

在我们开始之前，让我们先简单概括一下“富文本编辑器”（通常称为（WYSIWYG）所见即所得）的含义，以防您出于好奇而发现这篇文章。

简单来说：富文本编辑器是一个在浏览器中编辑富文本的界面，它还可以包含图片、链接、音频和视频，让你“所见即所得”。这些编辑器旨在减少用户尝试将格式直接表达为有效 HTML 标记的工作量。

如果你正在创建自己的博客网站，这些编辑器（种类繁多）会特别有用😎。
现在我们已经清楚地了解了什么是富文本编辑器，让我们开始吧。

先决条件

• Node.js（和 npm）
• 可以通过以下方式访问 tinymce.min.js：Tinycloud或 TinyMCE 自托管（我们将使用）有关自托管 TinyMCE 的详细信息，请参阅安装 TinyMCE 。
• React基础知识。如果您是初学者，不用担心，您可以做到！

程序 | 流程

1. 如果您的机器上尚未安装 React，请打开命令行或命令提示符并安装Create React App 包。

 $ npm install -g create-react-app

1. 创建一个新的 React 项目，并随意命名。我将其命名为WYSIWYG

 $ create-react-app WYSIWYG

1. 转到新创建的目录。

 $ cd WYSIWYG

1. 安装 TinyMCE-react 包并使用 --save 将其保存到您的package.json。

 $ npm install --save @tinymce/tinymce-react

1. 使用任意编辑器打开项目。我使用VScode

1. 在 Public 文件夹中，让我们打开Index.html文件并将此代码粘贴到头部（有些代码粘贴在底部...您可以选择😎）

<script src="/path/to/tinymce.min.js"></script>

现在我们已经为富文本编辑器设置好了项目，让我们从集成开始，这样我们就可以开心了。

导航到您的“src”目录并：

• 在“src”目录中创建“components”文件夹
• 在“components”文件夹中，创建一个“RichText.js”文件。

• 完成后，将下面的代码粘贴到 RichText.js 文件中

import React from 'react';
import { Editor } from '@tinymce/tinymce-react';

class RichText extends React.Component {
  handleEditorChange = (e) => {
    console.log(
      'Content was updated:',
      e.target.getContent()
    );
  }

  render() {
    return (
      <Editor
        initialValue="<p>Wow ! ... It Works !!!</p>"
        init={{
          height: 500,
          menubar: false,
          plugins: [
            'advlist autolink lists link image',
            'charmap print preview anchor help',
            'searchreplace visualblocks code',
            'insertdatetime media table paste wordcount'
          ],
          toolbar:
            'undo redo | formatselect | bold italic | \
            alignleft aligncenter alignright | \
            bullist numlist outdent indent | help'
        }}
        onChange={this.handleEditorChange}
      />
    );
  }
}

export default RichText;

粘贴上述代码将创建一个包含TinyMCE 编辑器的反应组件。

• 现在让我们导航到我们的 App.js 文件夹并导入 RichText 组件，以便我们可以在浏览器中呈现它。

import React from 'react';
import RichText from './component/RichText'
function App() {
  return (
    <div className="App">
      <RichText />
    </div>
  );
}

export default App;

• 要运行该应用程序，请打开终端并运行此代码（确保您已在终端中签入项目目录。例如 cd pathToProject ）：

  $ npm run start

现在您应该看到应用程序在浏览器中启动并运行（通常是 localhost:3000）

这很容易？不是吗？

但我们还没完！你有没有注意到，当你尝试输入任何内容时，编辑器中会弹出一个警告（警告：此域名未在 Tiny Cloud 注册）？那是因为我们还没有创建API 密钥。

别担心，我们已经完成了简单的部分，现在到了更简单的部分，剩下的就是摆脱那个可怕的警告，但是......我们怎么做呢？嗯......这很容易😎。

让我们遵循以下步骤

• 要获取API 密钥，让我们转到tinycloud页面并创建一个帐户。
• 填写他们会询问的基本信息（无关个人信息）
• 他们会发送一封确认电子邮件，因此我们必须打开邮件并点击提供的链接进行确认（这会重定向到我们进行基本设置的页面）
• 在重定向页面上，我们将添加我们的域名（如果我们有一个，例如...mycooldomain.com），localhost 是默认的，我们不必明确包含它。
• 接下来，我们滚动到页面底部，点击“继续到仪表板”。在这里我们将看到我们的API KEY
• 复制API 密钥并导航到 RichText.js 文件。在组件内部，在 editor 元素中<Editor />添加apiKey选项，并粘贴您的 TinyMCE API 密钥。

<Editor
  apiKey="your-api-key-goes-here"
  init={{ /* your other settings */ }}
/>

保存项目，见证奇迹发生。瞧！错误消失了！

在我的Git 仓库中查看工作代码。欢迎随时 fork 该项目。TinyMCE
可以实现很多功能，想要探索更多功能，请查看TinyMCE 文档。此外，它还可以与其他技术集成，例如Angular、Vue等。TinyMCE
可以定制，包含比我们项目现有功能更多的插件和事件绑定。

专业提示

• 如果您希望在 外面添加一些间距（边距或填充）<Editor />，只需将<div></div>其包裹起来并进行相应的样式设置即可。
• 为了使这个项目更有趣，创建一个 git Repo 并推送您在这篇文章中学到的所有内容。
• 教别人😎
• 别忘了点赞并留下评论（我喜欢反馈）
• 最后但同样重要的一点是，这是我的第一篇博客文章，所以，请毫不犹豫地指出错误以帮助我改进。

感谢所有花时间阅读这篇博客的人，再次强调，如果您愿意，请务必查看我Git 仓库
中的工作代码。 欢迎随时 fork 并 star 该项目。祝您一切顺利。