我正在考虑如何在我的应用程序中使用我想要的这个功能。基本上，我希望我的用户能够创建自定义页面，并且这些页面将被保存以供以后查看。但是，我希望有一个统一的结构和感觉。我也希望它是无痛且非常简单的。我知道我可以使用 TinyMCE 之类的东西，但有时格式化会很痛苦。
这是我想要的一个小草图：
类似于http://www.diagram.ly/但用于文本内容。理想情况下，一旦用户完成了页面的编辑，我只需将内容保存在 XML 中，标记代表每种内容类型，并在呈现后相应地应用样式。
是不是太复杂了，还是已经存在更简单的东西了？如果可能的话，我更喜欢使用 HTML5 ......但我愿意接受任何建议甚至其他替代方案！
谢谢！
medium-editor似乎是在Medium上找到的真正伟大的编辑器的管理良好的克隆，其架构原则在此处进行了解释。
这里的解决方案将取消拖放的想法。相反，用户选择任何文本，然后会看到一个工具栏弹出，允许他们进行所需的任何格式设置。可以自定义该工具栏以满足最终用户的需求。
最后，您会得到一个格式良好且干净的 (X)HTML 字符串。为了做你的造型，你可以简单地注入一个<link rel="stylesheet" href="/some/file.css" />.
http://jsfiddle.net/sean9999/ut7mk5x5/6/
;(function(w,d,undeinfed){
"use strict";
d.addEventListener('DOMContentLoaded',function(){
var e = d.querySelector('.editable'); // editable div
var o = d.querySelector('#o'); // debug output
var f = d.querySelector('#f'); // form
var editor = new MediumEditor(e);
var saveDocument = function(htmlfragments){
var article = '<article>' + htmlfragments + '</article>';
// issue an AJAX call with "article" as the payload
alert( article.replace(/\s{2,}/g,'') );
};
f.addEventListener('submit',function(ev){
ev.preventDefault();
saveDocument(e.innerHTML);
});
editor.subscribe('editableInput', function (event, editable) {
o.textContent = e.innerHTML;
});
o.textContent = e.innerHTML;
});
})(window,document);h1 {
color: gray;
font-size: small;
}
article {
border: 3px dotted rgba(255,0,0,.2);
background-color: rgba(0,0,0,.0333);
padding: 1em;
}
button {
font-size: bigger;
padding: .5em;
margin: .5em;
}
.editable {
outline: none;
}
output {
border: 3px dotted rgba(0,0,255,0.25);
margin-top: 1em;
min-height: 5em;
display: block;
padding: 1em;
font-family: Verdana;
font-size: 10px;
}<link href="http://yabwe.github.io/medium-editor/bower_components/medium-editor/dist/css/medium-editor.css" rel="stylesheet"/>
<link href="http://yabwe.github.io/medium-editor/bower_components/medium-editor/dist/css/themes/default.css" rel="stylesheet"/>
<link href="http://cdn.jsdelivr.net/medium-editor/latest/css/medium-editor.min.css" rel="stylesheet"/>
<script src="http://cdn.jsdelivr.net/medium-editor/latest/js/medium-editor.min.js"></script>
<section>
<article>
<div class="editable">
<h2>Edit me, I'm a heading.</h2>
<p>Edit me too, Chambray letterpress Godard meh, Echo Park slow-carb post-ironic whatever farm-to-table. Sriracha disrupt retro 90's, quinoa deep v Vice migas freegan pickled tattooed. Fashion axe meggings small batch, scenester Carles banh mi Shoreditch salvia.</p>
</div>
</article>
</section>
<form name="f" id="f" action="#">
<button type="submit">save the document</button>
</form>
<output for="f" id="o"></output>试试hammerJS，我想它可以帮助你