Javascript 在HTML5中创建拖放编辑平台

我正在考虑如何在我的应用程序中实现我想要的这个特性。基本上，我希望我的用户能够创建自定义页面，这些页面将被保存以供以后查看。但是，我想有一个统一的结构和感觉。我也希望它是无痛的，非常简单。我知道我可能会使用TinyMCE之类的东西，但有时格式可能会很麻烦

下面是我想要的一个小草图：

类似于但用于文本内容。理想情况下，一旦用户编辑完页面，我只需将内容保存在XML中，用标记表示每种内容类型，并在呈现后应用相应的样式

这是太复杂了，还是已经有了更简单的东西？如果可能的话，我更喜欢使用HTML5。。。但我愿意接受任何建议，甚至其他选择

谢谢

你看过吗？它与jquery UI结合使用，应该允许您做您想做的事情

---

我在定制的轻量级内容编辑器中使用了它。效果很好。如果我再次访问该项目，或者做类似的事情，我会创建预先配置的可拖动内容部分，以便网络新手可以更多地自定义他们的页面。

在打开一个悬赏后四处看看。也许使用进行降价和使用a是一种方法？然后，您可以使用一些工具将标记转换为xml

我知道它不是拖放式的，但它比M$word好。

似乎是一个管理良好的克隆版，它是一个真正伟大的编辑器的克隆版

这里的解决方案将取消拖放的想法。相反，用户选择任何文本位，然后看到一个弹出的工具栏，允许他们进行所需的任何格式设置。以满足最终用户的需求

最后，您将得到一个格式良好的（X）HTML字符串，该字符串既漂亮又干净。为了进行样式设置，只需插入一个

；（功能（w、d、未进料）{
“严格使用”；
d、 addEventListener（'DOMContentLoaded'，函数（）{
var e=d.querySelector（'.editable'）；//可编辑的div
var o=d.querySelector（'#o'）；//调试输出
var f=d.querySelector（'#f'）；//form
变量编辑器=新的媒体编辑器（e）；
var saveDocument=函数（htmlfragments）{
var article=''+htmlfragments+''；
//发出一个以“article”作为负载的AJAX调用
警报（article.replace（/\s{2，}/g'，）；
};
f、 addEventListener（'submit'，函数（ev）{
ev.preventDefault（）；
保存文档（e.innerHTML）；
});
editor.subscribe（'editableInput'，函数（事件，可编辑）{
o、 textContent=e.innerHTML；
});
o、 textContent=e.innerHTML；
});
})（窗口、文件）
h1{
颜色：灰色；
字体大小：小；
}
文章{
边框：3个点rgba（255,0,0,2）；
背景色：rgba（0,0,0,0333）；
填充：1em；
}
钮扣{
字体大小：较大；
填充：.5em；
边缘：.5em；
}
.可编辑{
大纲：无；
}
输出{
边界：3倍点rgba（0,0255,0.25）；
边缘顶部：1米；
最小高度：5em；
显示：块；
填充：1em；
字体系列：Verdana；
字体大小：10px；
}

编辑我，我是一个标题。
编辑我太，查姆布雷活版戈达尔梅，回声公园慢碳水化合物后讽刺无论农场到表。Sriracha打乱了90年代，奎奴亚藜深v副米加斯·弗里根腌制纹身。时尚斧头麦金小批量，scenester Carles banh mi Shoreditch salvia

保存文档
试试hammerJS，我认为它可以帮助你