Почему оправдание с помощью execCommand не работает должным образом?

Question

Почему оправдание с помощью execCommand не работает должным образом? проверить код ниже:

$('#JustifyLeft').click(function(){ 
 
    document.execCommand("JustifyLeft", false, ""); 
 
});

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

 
<p>Select whole text and click the button</p> 
 
<div class="editable" contenteditable="TRUE" style="font-size: 27px; text-align: center;"> 
 
    
 
<span style="font-weight: bold; font-style: italic; text-decoration: underline;">Hi<span style="font-size: 35px;">I</span>am<span style="font-size: 18px;">Blah Blah</span>Ok</span> 
 
</div> 
 

 
<input type="button" id="JustifyLeft" value="Align Left">

После выбора всего текста и оправдывая его, вы увидите подчеркивание только осталась на <text> узлов и узлах <span> не текст-украшения.

Это ошибка? Есть ли способ исправить это?

Answer 1

Если вы будете смотреть на структуру элемента в средстве разработки, вы увидите ExecCommand добавляет закрытия </span> после Привет, я и Ok и окружив его с <div> Как ниже

<div style="text-align: left;"> 
    <span style="font-style: italic; font-weight: bold; text-decoration: underline;">Hi</span> 
    <span style="font-style: italic; font-weight: bold; font-size: 35px;">I</span> 
    <span style="font-style: italic; font-weight: bold; text-decoration: underline;">am</span> 
    <span style="font-style: italic; font-weight: bold; font-size: 18px;">Blah Blah</span> 
    <span style="font-style: italic; font-weight: bold; text-decoration: underline;">Ok</span> 
    </div> 

Вы можете исправить это путем простого изменения вашего первого <span> до <div>, как показано ниже

<div style="font-weight: bold; font-style: italic; text-decoration: underline;">Hi 
<span style="font-size: 35px;">I</span>am 
<span style="font-size: 18px;">Blah Blah</span>Ok 
</div>