富文本编辑器：如何选择
富文本编辑器：如何选择
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 很简单。您需要按照以下步骤操作：
-
首先，您需要导入 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 版权协议，转载请附上原文出处链接和本声明
