在HTML5中创建拖放编辑平台

Question

我正在考虑如何在应用程序中处理我想要的这个功能.基本上,我希望我的用户能够创建自定义页面,这些页面将保存以供日后查看.但是,我希望有一个统一的结构和感觉.我也希望它无痛而且非常简单.我知道我可以使用像TinyMCE这样的东西,但有时候格式化会很痛苦.

这是我想要的小草图:

像http://www.diagram.ly/之类的东西,但是用于文本内容.理想情况下,一旦用户完成页面编辑,我只需将内容保存为XML,标签代表每种内容类型,并在呈现后相应地应用样式.

这太复杂了,还是已经存在的更简单的东西？我希望尽可能使用HTML5 ......但我愿意接受任何建议甚至其他选择!

谢谢!

Answer 1

你有没有看过小学生？与jquery UI draggable和droppable结合使用可以让你做你想做的事.

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

Answer 2

打开赏金之后看了一下.也许使用原子文本编辑器进行降价并使用降价预览可能是一种方法吗？然后你可以使用像pandoc这样的工具将markdown转换为xml.

我知道这不是拖放,但它比M $字更好.

Answer 3

中型编辑器似乎是一个管理良好的克隆版,它在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>