设置大小内容基于文本里面的可编辑div [英] set size content editable div based on the text inside this
本文介绍了设置大小内容基于文本里面的可编辑div的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我需要设置内容的可编辑div的大小与其中的文本相同
I need to set the size of content editable div same as the text inside it
。请看这个js fiddle https://jsfiddle.net/felixtm/jaboLc3u/7/
.Please see this js fiddle https://jsfiddle.net/felixtm/jaboLc3u/7/
$(".new-div").css("width",'auto');
} ,
stop: function() {
$(".new-div").css("width",'auto');
}
});
$(document).on("click",".closeButton",function(){
$(this).closest('div').remove();
});
$(".new-div").on("click", function(){
var uscontent= $(".new-div").text();
if(uscontent.trim()==="message"){
$(".new-div").text('');
} });
$("#font-size").on("change",function(){
var v=$(this).val();
$('.new-div').css('font-size', v + 'px');
});
$('.resizeButton').draggable({
containment: '#bord',
drag: function() {
$('.new-div').height($('.resizeButton').position().top + 17);
$('.new-div').width($('.resizeButton').position().left + 17);
$('.new-div').width($('.resizeButton').position().left + 17);
$('.new-div').css({ 'font-size': ($('.new-div').height() / 2.3)});
}
})
.new-div {
z-index: 1; position: absolute; width: auto; word-break: break-all; text-align: center; left: 0px; right: 0px; top: 15px; border:2px solid black;}
.parent-div {
max-width: 236px; width: 236px; position: relative; overflow: hidden; }
.closeButton
{
display:block;
position:absolute;
top:-10px;
left:-10px;
width:27px;
height:27px;
background:url('http://cdn-sg1.pgimgs.com/images/pg/close-button.png') no-repeat center center;
}
.resizeButton
{
display:block;
position:absolute;
bottom:-10px;
right:-10px;
width:27px;
height:27px;
background:url('http://img.freepik.com/free-icon/resize-button_318-99883.jpg') no-repeat center center;
background-size: contain;
cursor: resize;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-12">
Font-size:<input type="range" min="12" max="120" id="font-size" />
</div>
<br>
<div class="col-sm-12">
<div class="parent-div">
<div class="new-div" contenteditable="true">
message
<a class="closeButton"><label hidden>.</label></a>
<a class="resizeButton"><label hidden>x</label></a>
</div>
<div class="bord" style="z-index: -1;">
<img src="https://s-media-cache-ak0.pinimg.com/236x/8b/8a/00/8b8a007ae01adf400e12b26f3b93fb3a.jpg">
</div>
</div>
</div>
这里首先加载内容的可编辑的div和文本的大小是正确的。但是当我尝试调整div的大小时，文本和div的边框之间有一个空隙。
Here first loading the size of content editable div and text inside is correct . But when i try to resize the div then there is a gap coming between the text and border of the div .
http://www.awesomescreenshot.com/image/1753533/329cefb018f213ecd9243f4cab9ab68a
有些时间这个问题也来了 http://www.awesomescreenshot.com/image/1753603/d27436262d454bee88bf53ebfab2049a
Some time this problem is also coming http://www.awesomescreenshot.com/image/1753603/d27436262d454bee88bf53ebfab2049a
我尝试了 display：inline-block; ，但它不工作。
I tried display:inline-block; but it is not working .
如何解决这个问题？
推荐答案
这将解决你的字体大小问题，这是
This will solve your font-size problem, this is trickier than it seems.
此图书馆的知名度： http ：//thdoan.github.io/scalem/
$( '.new-div').draggable({
containment: "#bord",
create: function() {
$(".new-div").css("width",'auto');
} ,
drag: function() {
$(".new-div").css("width",'auto');
} ,
start: function() {
$(".new-div").css("width",'auto');
} ,
stop: function() {
$(".new-div").css("width",'auto');
}
});
$(document).on("click",".closeButton",function(){
$(this).closest('div').remove();
});
$("#font-size").on("change",function(){
var v=$(this).val();
$('.new-div span').css('font-size', v + 'px');
});
$('.resizeButton').draggable({
containment: '#bord',
drag: function() {
$('.new-div').height($('.resizeButton').position().top + 17);
$('.new-div').width($('.resizeButton').position().left + 17);
$('.new-div').width($('.resizeButton').position().left + 17);
$('.new-div span').scalem();
//$('.new-div').css({ 'font-size': ($('.new-div').height() / 2.3)});
}
});
.new-div {
z-index: 1; position: absolute; width: auto; word-break: break-all; text-align: center; left: 30%;top: 15px; border:2px solid black;}
.parent-div {
max-width: 236px; width: 236px; position: relative; overflow: hidden; }
.closeButton
{
display:block;
position:absolute;
top:-10px;
left:-10px;
width:27px;
height:27px;
background:url('http://cdn-sg1.pgimgs.com/images/pg/close-button.png') no-repeat center center;
}
.resizeButton
{
display:block;
position:absolute;
bottom:-10px;
right:-10px;
width:27px;
height:27px;
background:url('http://img.freepik.com/free-icon/resize-button_318-99883.jpg') no-repeat center center;
background-size: contain;
cursor: resize;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<script src="http://thdoan.github.io/scalem/javascripts/jquery.scalem.js"></script>
<div class="col-sm-12">
<div class="parent-div">
<div class="new-div" contenteditable="true" >
<span data-scale-ratio="1" data-scale-reference=".new-div">
message
</span>
<a class="closeButton"></a>
<a class="resizeButton"></a>
</div>
<div class="bord" style="z-index: -1;">
<img src="https://s-media-cache-ak0.pinimg.com/236x/8b/8a/00/8b8a007ae01adf400e12b26f3b93fb3a.jpg">
</div>
</div>
</div>
这篇关于设置大小内容基于文本里面的可编辑div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
