जावास्क्रिप्ट - contenteditable div में पत्र जो पहले कैरट (कर्सर) है की सीएसएस शैली

Question

मैं सामग्री के साथ contenteditable div मिल गया है प्राप्त करें:

<span style="font-weight: 700">S</span> 
<span style="font-weight: 100">o</span> 
<span style="color: red">m</span> 
<span style="text-decoration: underline">e</span> 
<span style="background-color: green">T</span> 
<span style="text-decoration: line-through">e</span> 
<span style="font-style: italic">x</span> 
<span style="font-family: Arial">t</span> 

और मैं तत्व है जो पहले कैरट (कर्सर) है की शैली प्राप्त करना चाहते हैं । उदाहरण के लिए यदि मुझे Some और Text के बीच परवाह है तो मैं text-decoration: underline प्राप्त करना चाहता हूं। मेरा कोड नीचे है (काम कर रहा है, लेकिन मुझे अंतिम तत्व की शैली मिलती है (font-family: Arial))। जावास्क्रिप्ट या/और JQuery का उपयोग करके, मैं इसे कैसे ठीक कर सकता हूं?
सहायता के लिए धन्यवाद।

$('button').click(function() { 
 
    var style = $('#Box span').last().attr('style'); 
 
    $('#Result').text('Result: ' + style); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="Box" contenteditable="true"> 
 
    <span style="font-weight: 700">S</span><span style="font-weight: 100">o</span><span style="color: red">m</span><span style="text-decoration: underline">e</span><span style="background-color: green">T</span><span style="text-decoration: line-through">e</span><span style="font-style: italic">x</span><span style="font-family: Arial">t</span> 
 
</div> 
 

 
<button>Get result</button> 
 
<p id="Result"></p>

Answer 1

ठीक है। मुझे जवाब मिला। । ("# बॉक्स अवधि: n वें वाले बच्चे (4)")

$('button').click(function() { 
 
    document.execCommand('insertHTML', null, '<span id="test"></span>'); 
 
    $('#Result').text($('#test').parent().attr('style')); 
 
    $('#test').remove(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="Box" contenteditable="true"> 
 
    <span style="font-weight: 700">S</span><span style="font-weight: 100">o</span><span style="color: red">m</span><span style="text-decoration: underline">e</span><span style="background-color: green">T</span><span style="text-decoration: line-through">e</span> 
 
    <span 
 
    style="font-style: italic">x</span><span style="font-family: Arial">t</span> 
 
</div> 
 

 
<button>Get result</button> 
 
<p id="Result"></p>

Answer 2

आप $ की तरह कॉल करनी होगी attr ("शैली");

Answer 3

सबसे पहले, आपको माउस पॉइंटर के नीचे अंतिम तत्व रखने की आवश्यकता है। फिर, जब माउस क्लिक किया जाता है, तो आप इसकी कोई संपत्ति या विशेषता प्राप्त कर सकते हैं।

let element; 
 
$(".container").on("mouseover", "span", function(e) { 
 
    element = $(e.target); 
 
}); 
 
$(".container").on("mousedown", function(e) { 
 
    $("#out").html(element.attr("style")); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <span style="font-weight: 700">S</span> 
 
    <span style="font-weight: 100">o</span> 
 
    <span style="color: red">m</span> 
 
    <span style="text-decoration: underline">e</span> 
 
    <span style="background-color: green">T</span> 
 
    <span style="text-decoration: line-through">e</span> 
 
    <span style="font-style: italic">x</span> 
 
    <span style="font-family: Arial">t</span> 
 
</div> 
 
<div id="out"></div>

मुझे यकीन है कि नहीं हूँ, क्या टुकड़ा वास्तव में आपकी समस्या का समाधान नहीं है, लेकिन मुझे उम्मीद है कि, यह आप आरंभ करने के लिए मदद करता है।
नोट, यदि आप दाएं से बाएं माउस ले जाते हैं, तो जब आप दो <span> एस के बीच क्लिक करते हैं तो सही तत्व की शैली प्रदर्शित की जाएगी। लेकिन यह कुछ पिक्सेल के बारे में सवाल है।

Answer 4

आपकी सामग्री संपादन योग्य div अवधि तत्वों का अनुक्रम है। इसलिए, देखभाल स्थिति को div के अंदर की अवधि के सूचकांक की तरह cosidered किया जा सकता है।

इसलिए, मेरा प्रस्ताव माउसअप पर कैरेट स्थिति प्राप्त करने और इस संपादन को सामग्री संपादन योग्य div की डेटा विशेषता के रूप में सहेजने पर आधारित है।

// 
 
// get the caret pos 
 
// 
 
$('#Box span, #Box').on('mouseup', function(e) { 
 
    var pos = 0; 
 
    if (this.tagName.toLowerCase() == 'div') { 
 
     pos = $('#Box span:last').index(); 
 
    } else { 
 
     e.stopPropagation(); 
 
     pos = $(this).index(); 
 
    } 
 
    $('#Box').data('caretPos', pos); 
 
}); 
 

 
$('button').on('click', function(e) { 
 
    var caretPos = $('#Box').data('caretPos'); 
 
    var style = $('#Box span').eq(caretPos).attr('style'); 
 
    $('#Result').text('Result: ' + style); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div id="Box" contenteditable="true"> 
 
    <span style="font-weight: 700">S</span><span style="font-weight: 100">o</span><span style="color: red">m</span><span style="text-decoration: underline">e</span><span style="background-color: green">T</span><span style="text-decoration: line-through">e</span><span style="font-style: italic">x</span><span style="font-family: Arial">t</span> 
 
</div> 
 

 
<button>Get result</button> 
 
<p id="Result"></p>

Answer 5

कृपया कोड नीचे देखें। यह कर्सर के बगल में तत्व पर घोषित शैली को आउटपुट कर सकता है।

$('button').click(function() { 
 
    var selection = null; 
 
    if (window.getSelection) { 
 
    selection = window.getSelection(); 
 
    } else if (document.selection && document.selection.type != "Control") { 
 
    selection = document.selection; 
 
    } 
 
    
 
    if(selection && selection.anchorNode && selection.anchorNode.parentNode) { 
 
    var style = selection.anchorNode.parentNode.style.cssText; 
 
    $('#Result').text('Result: ' + style); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="Box" contenteditable="true"><span style="font-weight: 700">S</span><span style="font-weight: 100">o</span><span style="color: red">m</span><span style="text-decoration: underline">e</span><span style="background-color: green">T</span><span style="text-decoration: line-through">e</span><span style="font-style: italic">x</span><span style="font-family: Arial">t</span></div> 
 

 
<button>Get result</button> 
 
<p id="Result"></p>