CKEditor尊重块元素
CKEditor to respect block elements
我试图让 CKEditor 尊重像 div 这样的块元素，但我无法让它工作。
这是我使用的示例代码
<div class="row" >
<div class="col-md-12">
<h1><img alt="" src="http://placehold.it/252x337" style="margin-left: 10px; margin-right: 10px; float: left; width: 252px; height: 337px;" />What is it?</h1>
<p><span style="color: rgb(0, 0, 0); font-family: Arial, Helvetica, sans; font-size: 11px; line-height: 14px; text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempor elit venenatis tristique mollis. Ut quis ipsum lectus. Curabitur vestibulum, ipsum ac molestie posuere, dolor est faucibus risus, id volutpat nisi magna vel velit. Pellentesque vel interdum mi. In justo erat, hendrerit a ultricies nec, pharetra vitae nisl. Fusce vel purus risus. Etiam porttitor varius turpis, sed vehicula arcu aliquam eu. Morbi vehicula euismod nibh, ut semper nulla sollicitudin a. Morbi vitae tellus auctor, sollicitudin arcu sed, porta urna. Maecenas eu scelerisque orci. Proin vitae lobortis nisi, at suscipit mauris. Nam eu ultrices velit, nec mattis velit. Ut feugiat lorem lectus, nec feugiat justo ultricies non.</span></p>
</div>
</div>
<!-- /row -->
<div class="row" >
<div class="col-md-12">
<h1>Lorem</h1>
<p><img alt="" src="http://placehold.it/168x113" style="margin: 0px 10px; float: right; width: 168px; height: 113px;" /><span style="color: rgb(0, 0, 0); font-family: Arial, Helvetica, sans; font-size: 11px; line-height: 14px; text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempor elit venenatis tristique mollis. Ut quis ipsum lectus. Curabitur vestibulum, ipsum ac molestie posuere, dolor est faucibus risus, id volutpat nisi magna vel velit. Pellentesque vel interdum mi. In justo erat, hendrerit a ultricies nec, pharetra vitae nisl. Fusce vel purus risus. Etiam porttitor varius turpis, sed vehicula arcu aliquam eu. Morbi vehicula euismod nibh, ut semper nulla sollicitudin a. Morbi vitae tellus auctor, sollicitudin arcu sed, porta urna. Maecenas eu scelerisque orci. Proin vitae lobortis nisi, at suscipit mauris. Nam eu ultrices velit, nec mattis velit. Ut feugiat lorem lectus, nec feugiat justo ultricies non.</span></p>
</div>
</div>
这是结果
这是我期望的样子
我也尝试将 div 的宽度设置为 100%，但没有成功。
据我所知，块元素尽可能多地使用 space 。但它似乎在 CKEditor 中不起作用。
那么有没有可能实现我想要做的事情呢？
您的代码运行正常：http://jsfiddle.net/b08yhh56/。第一张图片是浮动的，这使它脱离了正常的文档流，其他一切都围绕着它流动。这与 CKEditor 无关。
要获得您正在寻找的结果，请将 clear:left 添加到后续的 div http://jsfiddle.net/b08yhh56/1/
我试图让 CKEditor 尊重像 div 这样的块元素，但我无法让它工作。
这是我使用的示例代码
<div class="row" >
<div class="col-md-12">
<h1><img alt="" src="http://placehold.it/252x337" style="margin-left: 10px; margin-right: 10px; float: left; width: 252px; height: 337px;" />What is it?</h1>
<p><span style="color: rgb(0, 0, 0); font-family: Arial, Helvetica, sans; font-size: 11px; line-height: 14px; text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempor elit venenatis tristique mollis. Ut quis ipsum lectus. Curabitur vestibulum, ipsum ac molestie posuere, dolor est faucibus risus, id volutpat nisi magna vel velit. Pellentesque vel interdum mi. In justo erat, hendrerit a ultricies nec, pharetra vitae nisl. Fusce vel purus risus. Etiam porttitor varius turpis, sed vehicula arcu aliquam eu. Morbi vehicula euismod nibh, ut semper nulla sollicitudin a. Morbi vitae tellus auctor, sollicitudin arcu sed, porta urna. Maecenas eu scelerisque orci. Proin vitae lobortis nisi, at suscipit mauris. Nam eu ultrices velit, nec mattis velit. Ut feugiat lorem lectus, nec feugiat justo ultricies non.</span></p>
</div>
</div>
<!-- /row -->
<div class="row" >
<div class="col-md-12">
<h1>Lorem</h1>
<p><img alt="" src="http://placehold.it/168x113" style="margin: 0px 10px; float: right; width: 168px; height: 113px;" /><span style="color: rgb(0, 0, 0); font-family: Arial, Helvetica, sans; font-size: 11px; line-height: 14px; text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempor elit venenatis tristique mollis. Ut quis ipsum lectus. Curabitur vestibulum, ipsum ac molestie posuere, dolor est faucibus risus, id volutpat nisi magna vel velit. Pellentesque vel interdum mi. In justo erat, hendrerit a ultricies nec, pharetra vitae nisl. Fusce vel purus risus. Etiam porttitor varius turpis, sed vehicula arcu aliquam eu. Morbi vehicula euismod nibh, ut semper nulla sollicitudin a. Morbi vitae tellus auctor, sollicitudin arcu sed, porta urna. Maecenas eu scelerisque orci. Proin vitae lobortis nisi, at suscipit mauris. Nam eu ultrices velit, nec mattis velit. Ut feugiat lorem lectus, nec feugiat justo ultricies non.</span></p>
</div>
</div>
这是结果
这是我期望的样子
我也尝试将 div 的宽度设置为 100%，但没有成功。 据我所知，块元素尽可能多地使用 space 。但它似乎在 CKEditor 中不起作用。 那么有没有可能实现我想要做的事情呢？
您的代码运行正常：http://jsfiddle.net/b08yhh56/。第一张图片是浮动的，这使它脱离了正常的文档流，其他一切都围绕着它流动。这与 CKEditor 无关。
要获得您正在寻找的结果，请将 clear:left 添加到后续的 div http://jsfiddle.net/b08yhh56/1/