वेबकिट सामग्री से कैसे बचें संपादन योग्य प्रतिलिपि अवांछित सीएसएस में परिणामस्वरूप?

Question

मेरे पास <div> है जिसमें contentEditable="true" है।

जब मैं संपादन योग्य div के भीतर कॉपी-पेस्ट सामग्री, चिपका हुआ पाठ बहुत अवांछित सीएसएस में लपेटा जाता है।

उदाहरण के लिए, इस: <p>text text</p> हो जाता है:

<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 17px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">text text</p> 

मैं ब्राउज़र (वर्तमान मामले में गूगल क्रोम) समझ में स्मार्ट और सभी होने का प्रयास करता है, लेकिन क्या मैं अंत पूरी तरह से अप्रासंगिक और अवांछित है सीएसएस।

क्या यह उत्पन्न करने के लिए वेबकिट-आधारित ब्राउज़र को बताने का कोई तरीका नहीं है?

Answer 1

मुझे एक ही समस्या थी, साथ ही समस्या यह है कि प्रत्येक ब्राउज़र अलग-अलग HTML बनाता है। इसलिए मैंने Sanitize लाइब्रेरी का एक जावास्क्रिप्ट पोर्ट लिखा: Sanitize.js

Sanitize.js जावास्क्रिप्ट में लिखे गए एक श्वेतसूची-आधारित HTML sanitizer है। स्वीकार्य तत्वों और विशेषताओं की एक सूची को देखते हुए, Sanitize.js एक डोम नोड से सभी अस्वीकार्य HTML को हटा देगा।

उदाहरण पर एक नज़र डालें, जहां मैं paste ईवेंट कैप्चर करता हूं और बाद में HTML को संसाधित करता हूं।