एचटीएमएल 5 सामग्री सूची के बाद संपादन योग्य पैराग्राफ

Question

मैं Google क्रोम का उपयोग करता हूं।

मुझे एक बहुत छोटा HTML संपादक होना चाहिए और मुझे Simple Edit मिला। मेरी जरूरतों के लिए, बहुत छोटा संपादक। हालांकि ... यह और कई अन्य संपादकों जो सामग्री संपादन योग्य का उपयोग कर रहे हैं, उनमें एक आम समस्या है।

समस्या

एक सूची बनाने के बाद (पिछले सूची आइटम पर दोबारा दर्ज हिट), यह एक नई div पैदा करता है। मेरे लिए एक नया पैराग्राफ टैग बनाना होगा।

लिंक

• संपादक यहाँ का प्रयास करें: छोटे स्रोत कोड कोhttp://files.inlovewithcss.com/simple-edit/
• देखो:https://github.com/mlabod/simple-edit/blob/master/editor.jquery.js

प्रश्न

divs को रोकने का सही तरीका क्या है, और इसके बजाय सूची के बाद अनुच्छेद टैग जोड़ें?

Answer 1

ब्रायन एलो द्वारा पोस्ट किए गए उत्तर में यह ध्यान नहीं दिया गया कि आपको div के अंत में कर्सर लगाने की आवश्यकता है। अन्यथा प्रत्येक प्रतिस्थापन कार्रवाई पर उपयोगकर्ता को CTRL-End हिट करना होगा।

यह समाधान मेरा प्रस्ताव है, भी http://jsfiddle.net/82dS6/ पर कार्रवाई में देखा जा रहा है:

function setEndOfContenteditable(contentEditableElement){ 
    // Taken from http://stackoverflow.com/a/3866442/1601088 
    var range,selection; 
    if(document.createRange){//Firefox, Chrome, Opera, Safari, IE 9+ 
     range = document.createRange(); 
     range.selectNodeContents(contentEditableElement); 
     range.collapse(false); 
     selection = window.getSelection(); 
     selection.removeAllRanges(); 
     selection.addRange(range); 
    } 
    else if(document.selection){//IE 8 and lower 
     range = document.body.createTextRange(); 
     range.moveToElementText(contentEditableElement); 
     range.collapse(false); 
     range.select(); 
    } 
} 

function replaceDivWithP(el){ 

    $(el).find('div').each(function(){ 
     $(this).replaceWith($('<p>' + $(this).html() + '</p>')); 
    }); 
} 

$(function(){ 
    $(".text").simpleEdit(); 
}); 

$('.textarea').bind('keyup', function(){ 
    replaceDivWithP(this); 
    setEndOfContenteditable(this); 
}); 


​ 

Answer 2

एक त्वरित समाधान बस पीएस के साथ किसी भी डीआईवी को प्रतिस्थापित करना है। इसे अपनी सामग्री संपादन योग्य डीआईवी के अंदर रखें।

onkeyup="this.innerHTML=this.innerHTML.replace('div','p')" 

उम्मीद है कि यह मदद करता है। सौभाग्य।

Answer 3

के बजाय प्रसंस्करण ऑन-द-मक्खी हर keyup घटना के साथ, आप विचार कर सकते हैं पोस्ट-प्रोसेसिंग:

$('.textarea').bind('blur', function(){ 
    $('.textarea div').contents().unwrap().wrap('<p/>'); 
}); 

फिडल: http://jsfiddle.net/thNUS/4/

Answer 4

सबसे अच्छा मैं ऊपर आ सकता है के साथ formatblock which has compatibility issues का इस्तेमाल किया गया

। मूल रूप से तुम इतने तरह एक और लिंक जोड़ सकते हैं:

textcontainer.prepend("<button class='paragraph'>p</button>"); 

...

$(".paragraph").live("click", function(){ 
    document.execCommand('formatblock', false, "p"); 
}); 

यह अपने उपयोगकर्ताओं को एक पैरा टैग सम्मिलित करने का विकल्प देता है। उस टैग से बाहर निकलना थोड़ा मुश्किल है, इसलिए इसमें कुछ प्रयोज्य मुद्दे भी हैं।आपके द्वारा दी गई डेमो पर इसके साथ खेल सकते हैं:

डेमो: http://jsbin.com/ovexiz/1
स्रोत: http://jsbin.com/ovexiz/1/edit

* ध्यान दें कि पैराग्राफ हरे रंग का पाठ के साथ स्टाइल रहे हैं।

Answer 5

पिछला जवाब keyup या blur आधारित समाधान का प्रस्ताव दिया गया।

http://jsfiddle.net/9ZAL7/:

function replaceDivWithP(el){ 

    $(el).find('div').each(function(){ 
     $(this).replaceWith($('<p>' + $(this).html() + '</p>')); 
    }); 
} 

$(function(){ 
    $(".text").simpleEdit(); 
}); 

$('button.list').bind('click', function(){ 
    replaceDivWithP($('.textarea')); 
}); 
​