Tạo Nền tảng Chỉnh sửa Kéo và Thả trong HTML5

Question

Tôi đang trong quá trình suy nghĩ cách tôi nên tiếp cận tính năng này mà tôi muốn trong ứng dụng của mình. Về cơ bản, tôi muốn người dùng của mình có thể tạo các trang tùy chỉnh và các trang đó sẽ được lưu để xem sau. Nhưng, tôi muốn có một cấu trúc và cảm nhận thống nhất. Tôi cũng muốn nó không đau và rất đơn giản. Tôi biết tôi có thể sử dụng một cái gì đó như TinyMCE, nhưng đôi khi định dạng có thể là một nỗi đau.

Đây là một phác thảo nhỏ của những gì tôi muốn:

Something như http://www.diagram.ly/ nhưng đối với nội dung văn bản. Lý tưởng nhất, khi người dùng chỉnh sửa xong trang, tôi chỉ đơn giản là lưu nội dung trong XML, với các thẻ đại diện cho từng loại nội dung và áp dụng kiểu dáng cho phù hợp khi được hiển thị.

Điều đó quá phức tạp, hoặc một cái gì đó đơn giản hơn nhiều đã tồn tại chưa? Tôi muốn sử dụng HTML5 nếu có thể ... nhưng tôi mở cho bất kỳ đề xuất hoặc thậm chí lựa chọn thay thế khác!

Cảm ơn!

Answer 1

Bạn đã bao giờ xem cleditor chưa? Điều đó kết hợp với giao diện người dùng jquery draggable và droppable sẽ cho phép bạn thực hiện những gì bạn muốn.

Tôi đã sử dụng nó trong trình chỉnh sửa nội dung nhẹ tùy chỉnh. Hoạt động rất tốt. Nếu tôi bao giờ xem lại dự án đó, hoặc làm một cái gì đó tương tự, tôi sẽ tạo ra các phần nội dung có thể kéo được cấu hình sẵn để các trang web có thể tùy chỉnh các trang của họ nhiều hơn.

Answer 2

Nhìn xung quanh một chút sau khi mở tiền thưởng. Có lẽ sử dụng atom text editor để đánh dấu và sử dụng markdown preview có thể là một cách để làm điều đó? Sau đó, bạn có thể sử dụng một số công cụ như pandoc để chuyển đổi markdown thành xml.

Tôi biết nó không phải là kéo và thả, nhưng nó tốt hơn từ M $.

Answer 3

medium-editor dường như là bản sao được quản lý tốt của trình chỉnh sửa thực sự tuyệt vời được tìm thấy trên Medium có architectural principles are explained in here.

Giải pháp ở đây sẽ làm giảm ý tưởng thả &. Thay vào đó, người dùng chọn bất kỳ văn bản nào và sau đó nhìn thấy một thanh công cụ bật lên, cho phép họ thực hiện bất kỳ định dạng nào mà họ cần. Điều đó toolbar can be customized để phù hợp với nhu cầu của người dùng cuối của bạn.

Cuối cùng, bạn nhận được một chuỗi HTML (X) được hình thành tốt đẹp và sạch sẽ. Để tạo kiểu tóc, bạn có thể chỉ cần tiêm <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>

Answer 4

Hãy thử hammerJS, tôi nghĩ rằng nó có thể giúp bạn

http://hammerjs.github.io/