एचटीएमएल 5

Question

में ड्रैग और ड्रॉप एडिटिंग प्लेटफार्म बनाएं I सोचने की प्रक्रिया में है कि मुझे इस एप्लिकेशन से कैसे संपर्क करना चाहिए जो मैं अपने आवेदन में चाहता हूं। असल में, मैं चाहता हूं कि मेरे उपयोगकर्ता कस्टम पेज बनाने में सक्षम हों, और वे पृष्ठ बाद में सहेजे जाएंगे। लेकिन, मैं एक एकीकृत संरचना और महसूस करना चाहता हूं। मैं यह भी दर्द रहित और बहुत सरल होना चाहता हूं। मुझे पता है कि मैं TinyMCE की तरह कुछ उपयोग कर सकता हूं, लेकिन कभी-कभी प्रारूपण दर्द हो सकता है।

कुछ http://www.diagram.ly/ की तरह लेकिन के लिए पाठ्य सामग्री:

यहाँ मैं क्या पसंद करेंगे की एक छोटी स्केच है। आदर्श रूप में, जब उपयोगकर्ता पृष्ठ को संपादित कर लेता है, तो मैं सामग्री को प्रत्येक सामग्री प्रकार का प्रतिनिधित्व करने वाले टैग के साथ एक्सएमएल में सहेजता हूं और तदनुसार एक बार स्टाइलिंग लागू करता हूं।

क्या यह बहुत जटिल है, या कुछ आसान पहले से मौजूद है? यदि संभव हो तो मैं एचटीएमएल 5 का उपयोग करना पसंद करूंगा ... लेकिन मैं किसी भी सुझाव या अन्य विकल्पों के लिए खुला हूं!

धन्यवाद!

Answer 1

क्या आपने कभी cleditor देखा है? Jquery UI draggable और droppable के संयोजन के साथ आप जो चाहते हैं उसे करने की अनुमति देनी चाहिए।

मैंने इसे एक कस्टम हल्के सामग्री संपादक में उपयोग किया। बहुत अच्छी तरह से काम करता है। यदि मैंने कभी भी उस प्रोजेक्ट पर फिर से जाना है, या ऐसा कुछ करता है तो मैं पूर्व-कॉन्फ़िगर किए गए ड्रैगगेबल सामग्री अनुभाग बनाएगा ताकि वेब नेफॉइट्स अपने पृष्ठों को और भी अनुकूलित कर सकें।

Answer 2

एक उपहार प्राप्त करने के बाद थोड़ा सा देखा। शायद मार्कडाउन बनाने के लिए atom text editor का उपयोग करके और markdown preview का उपयोग करके ऐसा करने का एक तरीका हो सकता है? फिर आप मार्कडाउन को xml में कनवर्ट करने के लिए pandoc जैसे कुछ टूल का उपयोग कर सकते हैं।

मुझे पता है कि यह ड्रैग और ड्रॉप नहीं है, लेकिन यह एम $ शब्द से बेहतर है।

Answer 3

medium-editorMedium पर पाए गए वास्तव में महान संपादक का एक अच्छी तरह से प्रबंधित क्लोन प्रतीत होता है जिसका architectural principles are explained in here है।

यहां समाधान ड्रैग & ड्रॉप विचार से दूर होगा। इसके बजाए, उपयोगकर्ता किसी भी पाठ का चयन करता है और फिर टूलबार पॉप अप देखता है, जिससे उन्हें किसी भी स्वरूपण की आवश्यकता होती है। आपके अंतिम उपयोगकर्ताओं की जरूरतों के अनुरूप toolbar can be customized।

अंत में, आपको एक अच्छी तरह से गठित (एक्स) 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>

Answer 4

hammerJS प्रयास करें, मुझे लगता है कि आप

http://hammerjs.github.io/

मदद कर सकते हैं