在 HTML5 中创建拖放编辑平台

Posted

技术标签:

【中文标题】在 HTML5 中创建拖放编辑平台【英文标题】:Create Drag and Drop Editing Platform in HTML5 【发布时间】:2012-06-01 03:22:52 【问题描述】:

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

这是我想要的小草图:

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

是不是太复杂了,还是已经存在更简单的东西了?如果可能的话,我更喜欢使用 html5……但我愿意接受任何建议甚至其他替代方案!

谢谢!

【问题讨论】:

【参考方案1】:

你看过cleditor吗?结合 jquery UI draggable 和 droppable 应该可以让你做你想做的事。

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

【讨论】:

【参考方案2】:

打开赏金后环顾四周。也许使用atom text editor 进行降价并使用markdown preview 可能是一种方法?然后你可以使用pandoc之类的工具将markdown转换为xml。

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

【讨论】:

【参考方案3】:

medium-editor 似乎是在Medium 上找到的真正伟大的编辑器的一个管理良好的克隆,其architectural principles are explained in here。

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

最后,您会得到一个格式良好且干净的 (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(/\s2,/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>

【讨论】:

【参考方案4】:

试试hammerJS,我觉得对你有帮助

http://hammerjs.github.io/

【讨论】:

以上是关于在 HTML5 中创建拖放编辑平台的主要内容,如果未能解决你的问题,请参考以下文章

HTML5引擎Construct2技术剖析

无法在 React 上为 HTML5 拖放获取 onDragStart 事件

在窗口之间拖放图像,而不是链接 - HTML5

Avalonia跨平台入门第八篇之控件的拖放

「萌新上手Mac」关于MacBook拖放技巧

H5 拖放