संतुष्ट पर विशिष्ट परिवर्तनों को सुनें?

Question

चेतावनी: मौजूदा सवालों के साथ नकल नहीं

के माध्यम से पढ़ने मैं जानता हूँ कि मैं एक घटना एक contenteditable तत्व पर परिवर्तन पर सुनने हो सकता है।

मुझे क्या चाहिए में परिवर्तन करने में सक्षम होना है।

उदाहरण के लिए

: "। यह एक वाक्य है"

• डाला स्थिति एक्स पर
• <strong>

साथ

X से Y तक स्वरूपित वाई करने के लिए स्थिति एक्स से हटा दिया है कि संभव है? (अन्य की तुलना में एक अंतर करके मेरा मतलब है)

---

इस का कारण यह उदाहरण Markdown के लिए HTML से भिन्न भाषा के एक WYSIWYG संपादक का है।

तो मैं मार्कडाउन स्रोत में परिवर्तन लागू करना चाहता हूं (HTML से मार्कडाउन में जाने के बजाय)।

Answer 1

आप (, पुराने ब्राउज़र में वापस डी OM Mutation events गिरने हालांकि आईई < = 8 न समर्थन करता है) MutationObserver के साथ कुछ करने के लिए सक्षम हो सकता है, लेकिन मुझे लगता है कि यह अभी भी कड़ी मेहनत प्राप्त करने के लिए आप क्या चाहते हो जाएगा।

यहाँ एक सरल उदाहरण है MutationObservers का उपयोग कर:

http://jsfiddle.net/timdown/4n2Gz/

Answer 2

आप इस

var strong=document.createElement("strong"); 
var range=window.getSelection().toString().getRangeAt(0); 
range.surroundContents(strong); 

लिए देख रहे हैं इस तीसरे भाग

तुम बस क्या आप वास्तविक उपयोगकर्ता सहभागिता का उपयोग कर चारों ओर करना चाहते हैं की जरूरत है के लिए किया गया था।

यह गतिशील

var range=document.createRange(); 
range.setStart(parentNode[textNode],index to start[X]) 
range.setEnd(parentNode[textNode],index to end[Y]) 
range.surroundContents(strong); 

करते हैं आप चाहते हैं 2 भाग के लिए

range.deleteContents() 

1 हिस्सा

वर textnode = // तत्व आप के नोड सरल यात्रा का उपयोग करके किया जा सकता है

textnode.splitText(offset) 

के साथ काम कर रहे हैं

ऑफसेट स्थिति के बारे में जो पाठ नोड बंटवारे जगह लेता है [यहाँ == X] दो बच्चे नोड्स माता पिता संपादन योग्य तत्व का सृजन किया गया है

अब सरल insertBefore() माता-पिता पर संपादन योग्य तत्व नोड का उपयोग करें।

आपको यह उपयोगी

Answer 3

क्षमा मिलेगा उम्मीद है, लेकिन वहाँ पता लगाने के लिए क्या मूल सामग्री और एक संशोधित जब परिवर्तन होते हैं जो diff कर के बिना परिवर्तन कर रहे हैं कोई रास्ता नहीं है।

Answer 4

जो एपीआई आप खोज रहे हैं वह मौजूद नहीं है, क्योंकि डोम नोड्स अपने पिछले राज्यों को स्टोर नहीं करते हैं।

डेटा/ईवेंट जो आप वापस प्राप्त करना चाहते हैं, वे किसी भी ब्राउज़र में मूल कार्यान्वयन नहीं हैं, और मैं डेटाटाइप के बारे में सोचने के लिए संघर्ष करता हूं जो उन सभी मामलों को सामान्य रूप से संभालने में सक्षम होगा। इस तरह शायद कुछ:

function getChanges() { 

    /* do stuff here to analyse changes */ 

    var change = { 
     changeType : 'contentAdded', 
     changeStart : 50, /* beginning character */ 
     changeContent : 'This is a sentence' 
    } 

    return change; 
} 

के बाद से आप कस्टम घटनाओं/डेटा प्राप्त करने की कोशिश कर रहे हैं, तो आप शायद एक कस्टम मॉड्यूल या सूक्ष्म पुस्तकालय की जरूरत करने जा रहे हैं। किसी भी तरह से को में कुछ देखने के लिए, आपको के बारे में पता होना चाहिए, जो बदल गया है, जो कि अब यह क्या कर रहा है इसकी तुलना करके किया जा सकता है।