Подтвердить что ты не робот

Создайте платформу редактирования перетаскивания в HTML5

Я в процессе размышления, как мне подойти к этой функции, которую я хочу в своем приложении. В принципе, я хочу, чтобы мои пользователи могли создавать пользовательские страницы, и эти страницы будут сохранены, чтобы их можно было увидеть позже. Но я хочу иметь единую структуру и чувствовать. Я также хочу, чтобы это было безболезненно и очень просто. Я знаю, что могу использовать что-то вроде TinyMCE, но иногда форматирование может быть болью.

Вот небольшой эскиз того, что мне хотелось бы:

Sketch

Что-то вроде http://www.diagram.ly/, но для текстового содержимого. В идеале, после того, как пользователь выполнит редактирование страницы, я просто сохранил бы содержимое в XML, с тегами, представляющими каждый тип контента, и соответствующим образом применял бы стиль при визуализации.

Это слишком сложно, или что-то гораздо более простое уже существует? Я бы предпочел использовать HTML5, если это возможно... но я открыт для любых предложений или даже других альтернатив!

Спасибо!

4b9b3361

ОТВЕТЫ

Ответ 1

Вы когда-нибудь смотрели cleditor? Это в сочетании с пользовательским интерфейсом jquery draggable и droppable должен позволить вам делать то, что вы хотите.

Я использовал его в пользовательском облегченном редакторе содержимого. Работает очень хорошо. Если я когда-либо пересматриваю этот проект или делаю что-то подобное, я бы создал предварительно сконфигурированные перетаскиваемые разделы контента, чтобы веб-неофиты могли еще больше настроить свои страницы.

Ответ 2

Посмотрел немного после открытия щедрости. Возможно, с помощью текстового редактора atom, чтобы сделать уценку и используя предварительный просмотр по умолчанию, может быть способ сделать это? Затем вы можете использовать какой-то инструмент, например pandoc, чтобы преобразовать уценку в xml.

Я знаю, что это не перетаскивание, но это лучше, чем слово M $.

Ответ 3

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>