如何创建HTML5拖放编辑器？

Question

觉得这是一个奇怪的问题，但仍然，

我想创建工作室，人们可以使用不同类型的内容创建卡片，如文本，图像，视频，音频，链接等，并保存它们，这样我就可以通过其他设计渲染它们图。

我打算用ReactJS Framework构建它。我是ReactJS的新蜜蜂，刚刚通过TODO tutorials。并完成了一些工作，以了解Drag and Drop的{​​{1}}功能。

但我仍然对如何和哪里开始编码我的要求感到困惑。应用程序的结构应该是什么。每个组件应具有的所有属性，完全被阻止。

我在这里并没有要求为我的应用程序提供结构，我正在寻找一些资源/文档来解释如何为这些需求构建应用程序。

beefree.io之类的东西就是我想要建立的东西。

许多人感谢您的所有反馈。

Answer 1

我非常推荐TinyMCE编辑器：https://www.tinymce.com/download/。这个编辑器有很多功能。我还可以推荐http://hammerjs.github.io/，https://github.com/yabwe/medium-editor和http://premiumsoftware.net/cleditor/。

如果您想创建独立的HTML5编辑器，您应该研究推荐编辑器的GitHub源，并主要学习jQuery和AngularJS。

说明如何从基础HTML5编辑器创建：

• http://www.simonewebdesign.it/how-to-make-browser-editor-with-html5-contenteditable/
• http://blog.teamtreehouse.com/building-an-html5-text-editor-with-the-filesystem-apis
• http://buildwithreact.com/

Answer 2

我建议您试用Unroll.io的react-email-editor：https://github.com/unroll-io/react-email-editor

它具有许多您正在寻找的功能，并且非常易于在您的网络应用中使用。还有很好的文档。

此React组件专注于电子邮件，但如果您打算将其用于HTML网页而非电子邮件，则可以轻松创建类似的React组件，并根据Unroll.io将displayMode更改为web文档。

我已经看到它在EmailMonster email editor的制作中使用。