为css中的内容可编辑div设置样式关闭和调整大小按钮，并通过jQuery添加rsize功能 [英] Styling close and resize button for content editable div in css and adding rsize functionality by jQuery

问题描述

目前我写了一些代码，使用jQuery的内容可编辑div的拖动选项。

  $（'.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（）{
 $ -div）。css（width，'auto'）; 
} 
}）; 
 $（document）.on（click，。closeButton，function（）{
 $（this）.closest（'div'）。remove（）; 
} ; 
  

请参阅jsfiddle

在图片中，用户可以通过使用放置在右下角的按钮缩放div来增加div的宽度，从而调整字体大小。

这里我有两个要求：

1. 将图片的关闭和调整大小按钮设为图片
。

2. 使用新的调整大小按钮为该div添加调整大小功能。

谢谢。

解决方案

如果我是对的，

  $（'.new-div'）。draggable（{containment：#bord ，create：function（）{$（。new-div）。css（width，'auto'）;}，drag：function（）{$（。new-div）。css ，'auto'）;}，start：function（）{$（。new-div）。 }，stop：function（）{$（。new-div）。css（width，'auto'）; }}）; $（document）.on（click，。closeButton，function（）{$（this）.closest（'div'）。 $（。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 $''）;}）; $（'。resizeButton'）。draggable（{containment：'＃bord'，drag：function（）{$（'。new-div'）。 resizeButton'）。position（）。left + 17）; $（'。new-div'）。 ）.width（$（'。resizeButton'）。position（）。left + 17）; $（'。new-div'）。css（{'font-size'： .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;位置：相对; overflow：hidden; } .closeButton {display：block;位置：绝对; 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;位置：绝对; bottom：-10px; right：-10px; width：27px; height：27px; background：url（'http://img.freepik.com/free-icon/resize-button_318-99883.jpg'）无重复中心; background-size：包含; 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 =rangemin =12max =120id =font-size/> < / div> < br> < div class =col-sm-12> < div class =parent-div> < div class =new-divcontenteditable =true> message< a class =closeButton>< label hidden>。< / label>< / a> < a class =resizeButton>< label hidden> x< / label>< / a> < / div> < div class =bordstyle =z-index：-1;> < img src =https://s-media-cache-ak0.pinimg.com/236x/8b/8a/00/8b8a007ae01adf400e12b26f3b93fb3a.jpg> < / div> < / div> < / div> < / div> < / div>  

Currently I write some code for making close & dragging option for a content editable div using jQuery.

$( '.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();
});

Please see this jsfiddle https://jsfiddle.net/felixtm/dwk6fs5w/ . This is working .

But when I write the code for remove text on the div by click function then that close button disappear. Please help to solve this. I have some more questions:

How can I set width of that div according to the txt in that div .

Please see this js fiidle https://jsfiddle.net/felixtm/dwk6fs5w/5/

Then I write the code for resize the content in that div using jQuery. This code also working. but what I need is I need to make the font resize button near to the div as below picture. Please see the below picture.

In the picture user can resize the font size by increasing the div width by scaling the div using that button placed on bottom right corner. Please help to achieve this.

So here I have two requirements:

1. Styling the close and resize button as er the picture
2. Add resize functionality for that div using the new resize button.

Thank you.

解决方案

If I'm right, you need something like this?

$( '.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();
                                 });
                                 
         $(".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>

这篇关于为css中的内容可编辑div设置样式关闭和调整大小按钮，并通过jQuery添加rsize功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！