富文本编辑器：如何选择

Photo by 哈维尔·克萨达 on 不飞溅

React 富文本编辑器允许您轻松地编辑 Web 应用程序的内容。但是，在某些情况下您需要重新发明它。

例如，启动速度很慢，并且在移动设备上看起来不太好。那么如何重新发明富 React 的文本编辑器来解决这些问题呢？在这篇文章中，您将找到所有详细信息。

#什么是 React-Rich 文本编辑器？

React 富文本编辑器是一种工具，可为您的 JavaScript Web 应用程序提供丰富的编辑功能。您可以使用它来创建博客帖子或论坛帖子。它允许您使用一组丰富的工具轻松编辑内容。

您可以更改文本的格式和对齐方式。

此外，您可以插入图像、视频和链接。但是，您不必编写任何 HTML 或 CSS 代码。但是，您可以直观地完成所有操作。

#为什么要考虑重新发明 React 富文本编辑器？

#我需要超快的富文本编辑器吗？

您不想等待文本编辑器启动。它会影响用户体验。如果你有一个可以在几毫秒内初始化的超快的富 React 文本编辑器，那将会很有帮助。它将使您的网络应用程序用户能够快速使用该工具。

因此，他们可以立即编辑内容。例如，Froala 是一个超快的编辑器。它可以在不到 40 毫秒的时间内完成初始化。也就是说，比眨眼的速度快了六倍。因此，您的 Web 应用程序用户会喜欢使用它。

#我需要支持移动设备的文本编辑器吗？

移动支持是另一个关键因素。人们不再只在 PC 和笔记本电脑上编辑内容。他们还使用智能手机和平板电脑。这就是为什么你需要一个提供移动支持的 React 文本编辑器。它将使用户能够在旅途中编辑内容。

Froala 提供完整的移动支持。它的格式控制在所有设备上看起来都是一样的，包括台式机、笔记本电脑和智能手机。此外，它还允许您在移动设备上调整图像和视频的大小。它是第一个支持这些功能的 React 文本编辑器。

#我需要支持 RTL 的 React 文本编辑器吗？

有些语言，如阿拉伯语或希伯来语，是从右向左阅读的。它们与以相反方向阅读的英语完全不同。

例如，如果您的 React 应用程序支持其中一种语言，您需要获得一个提供 RTL 功能的编辑器。它将使用户能够从右到左键入。

Froala 支持 RTL 功能。每当您选择阿拉伯语时，工具栏都会自动移动和调整；因此，您可以自然地从右到左键入。

当打字方向设置为 RTL 时，Froala 看起来像这样：

#我需要扩展富文本编辑器的功能吗？

有时您需要向编辑器添加高级功能。例如，您的网络应用程序用户需要插入数学和化学方程式。

但是，您的富文本编辑器不提供任何类似的功能。您不想从头开始开发该功能。这将花费你大量的时间和金钱。

你需要一个支持高效插件的富 React 文本编辑器。它将允许您快速集成高级功能。例如，Froala 支持 30 个开箱即用的插件，如 Mathtype、Embedly、Special Characters 等。您可以利用它们轻松扩展其功能。

#如何将 Froala 集成到 React 应用程序中？

的过程 在 React Web 应用程序中实现 Froala 很简单。您需要按照以下步骤操作：

1. 首先，您需要导入 Froala 的 CSS 文件。此外，您必须导入编辑器组件。

   从“反应”导入反应；
   从 'react-dom' 导入 ReactDOM； // 需要编辑器 CSS 文件。
   导入'froala-editor/css/froala_style.min.css'；
   导入'froala-editor/css/froala_editor.pkgd.min.css'； 从“react-froala-wysiwyg”导入 FroalaEditorComponent；

2. 您可以使用此行渲染 Froala 编辑器组件：

 ReactDOM.render(<FroalaEditorComponent tag='textarea'/> , document.getElementById('editor'));

3. 现在，您可以转到您的 HTML 文件。您可以通过将 ID 传递给 HTML 元素来将编辑器添加到 UI。

 <div  id="editor">  
 </div>

这就是您将 Froala 集成到您的 React Web 应用程序中的方式。如您所见，该过程很简单。它只涉及编写几行代码。没有麻烦。

但是，请确保您有正确的 Webpack 设置来加载 CSS 文件。如果您使用的是 Webpack 4，则设置将如下所示：

 var webpack = 要求（“webpack”）； 模块.exports = {  
 模块： {  
 规则：[  
 {  
 测试：/\.jsx$/，  
 利用： {  
 加载器：'babel-loader'，  
 选项： {  
 缓存目录：真，  
 预设：['react','es2015','stage-2']  
 }  
 }  
 }, {  
 测试：/\.css$/，  
 利用： [  
 '样式加载器'，  
 'css 加载器'  
 ]  
 },  
 {  
 测试：/\.woff(\?v=\d+\.\d+\.\d+)?$/,  
 使用：“url-loader?limit=10000&mimetype=application/font-woff”  
 }, {  
 测试：/\.woff2(\?v=\d+\.\d+\.\d+)?$/,  
 使用：“url-loader?limit=10000&mimetype=application/font-woff”  
 }, {  
 测试：/\.ttf(\?v=\d+\.\d+\.\d+)?$/,  
 使用：“url-loader?limit=10000&mimetype=application/octet-stream”  
 }, {  
 测试：/\.eot(\?v=\d+\.\d+\.\d+)?$/,  
 使用：“文件加载器”  
 }, {  
 测试：/\.svg(\?v=\d+\.\d+\.\d+)?$/,  
 使用：“url-loader?limit=10000&mimetype=image/svg+xml”  
 }  
 ]  
 },  
 解决： {  
 模块：['node_modules']  
 }  
 };

＃源代码：

你可以得到源代码 就在这儿 .

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/7638/32060108