[英]Why justifying with execCommand does not work properly?
Why justifying with execCommand does not work properly? 为什么用execCommand进行对齐无法正常工作? check the below code:
检查以下代码:
$('#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">
After selecting the whole text and Justifying it you will see the underlines only remained on <text>
nodes and <span>
nodes have not text-decoration. 在选择了整个文本并将其对齐后,您将看到下划线仅保留在
<text>
节点上,而<span>
节点没有文本修饰。
Is this a bug? 这是错误吗? Is there a way to correct it?
有没有办法纠正它?
If you will look onto element structure in developer tool you will see execCommand is adding closing </span>
after Hi, am and Ok and wrapping it with a <div>
Like below 如果您在开发人员工具中查看元素结构,您将看到execCommand在Hi,am和Ok之后添加了
</span>
,并用<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>
You can correct it by just changing your first <span>
to <div>
like below 您可以通过将第一个
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.