Add, resize , position ,color change text inside a div using jquery

Question

I'm looking forward to creating a very simple way that allows users to write, resize, position or change the color of a text inside a <div>. I know jQuery little bit.

My HTML

<div class="canvas">
    <div id ="u-test-id" class="u-test-class"  contenteditable="true">
        Testing
    </div>
</div>

Here .canvas is a <div>, sometimes it contains an image or another background color. I already write the code to change the color and background image of that <div class="canvas">. What I need is that the user can enter the text very easily and he can style it as he wishes. Please see the image:

This image i capure from mailchimp. In mailchimp when we creating an template design , it will provide the same thing i wanted . Here user can add text , he can rotate text , change font family, color etc .

Actually the color and font family things , i know how to do this with jquery .But the rotation of the text div is complicated i think. How to do this rotation ?

Here I am not asking for code, but I want to see a working demo that helps me to understand the working and learn jQuery. Please anyone can give the sample for this work, or suggest any free jQuery plugin or the basic code.

Answer 1

I found this from jsfiddle. Lets take this scratch and start extending your functionality

HTML

<div class='resizable draggable'>
    <h1>Resize Me</h1>
    <div class="ui-resizable-handle ui-resizable-nw"></div>
    <div class="ui-resizable-handle ui-resizable-ne"></div>
    <div class="ui-resizable-handle ui-resizable-sw"></div>
    <div class="ui-resizable-handle ui-resizable-se"></div>
    <div class="ui-resizable-handle ui-resizable-n"></div>
    <div class="ui-resizable-handle ui-resizable-s"></div>
    <div class="ui-resizable-handle ui-resizable-e"></div>
    <div class="ui-resizable-handle ui-resizable-w"></div>
</div>

Javascript:

 $('.resizable').resizable({
        handles: {
            'nw': '.ui-resizable-nw',
            'ne': '.ui-resizable-ne',
            'sw': '.ui-resizable-sw',
            'se': '.ui-resizable-se',
            'n': '.ui-resizable-n',
            'e': '.ui-resizable-e',
            's': '.ui-resizable-s',
            'w': '.ui-resizable-w'
        }
    });
    $( '.draggable' ).draggable().on('click', function(){
        if ( $(this).is('.ui-draggable-dragging') ) {
            return;
        } else {
            $(this).draggable( 'option', 'disabled', true );
            $(this).prop('contenteditable','true');
            $(this).css('cursor', 'text');
        }
    })
    .on('blur', function(){
        $(this).draggable( 'option', 'disabled', false);
        $(this).prop('contenteditable','false');
        $(this).css('cursor', 'move');
    });

CSS:

.draggable {
    cursor: move;
}
.resizable {
    border: 1px dashed #000000;
    position: relative;
    min-height: 50px;
}
.ui-resizable-handle {
    width: 10px;
    height: 10px;
    background-color: #ffffff;
    border: 1px solid #000000;
    position: absolute;
}
.ui-resizable-nw {
    left: -5px;
    top: -5px;
    cursor: nw-resize;
}
.ui-resizable-ne {
    top: -5px;
    right: -5px;
    cursor: ne-resize;
}
.ui-resizable-sw {
    bottom: -5px;
    left: -5px;
    cursor: sw-resize;
}
.ui-resizable-se {
    bottom: -5px;
    right:-5px;
    cursor: se-resize;
}
.ui-resizable-n {
    top: -5px;
    left:50%;
    cursor: n-resize;
}
.ui-resizable-s {
    bottom: -5px;
    left: 50%;
    cursor: s-resize;
}
.ui-resizable-w {
    left:-5px;
    top:calc(50% - 5px);
    cursor: w-resize;
}
.ui-resizable-e {
    right:-5px;
    top:calc(50% - 5px);
    cursor: e-resize;
}

Answer 2

what you need is http://jqueryrotate.com/ in conjuction with other functions.

This example should be improved, but you have this functionalities:

1. Rotate
2. Close
3. Edit
4. Dragg
5. Resize (textarea)

Some notes about this example.

-Rotate is done by the jqueryrotate.com library. in this example I'm using taking 0,0 position to calculate angle, but should be improved to take angle towards the textarea to a better user experience.

-Resize & edit functions are supported by textarea editable, that will do quite well the job, as when resizing, it automatically resizes its parent wrapper, no need for extra code here.

-Drag is supported by jquery.ui , (perhaps it will be usefull to disable drag when doing rotation, in that case just need to add a flag) .

//initial rotation, just for test
//$(".wrapper").rotate(-45);


//let's add draggable functionality
$( function() {
    $( ".wrapper" ).draggable();
  } );

 //close button action
 document.getElementById('close').onclick = function() {
        this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
        return false;
};

//rotate button action
var rotate = $('#rotate')
var dragging = false;
rotate.mousedown(function() {
    dragging = true
})
$(document).mouseup(function() {
    dragging = false
})
$(document).mousemove(function(e) {
    if (dragging) {

        var mouse_x = e.pageX / 2;
        var mouse_y = e.pageY / 2;
        var radians = Math.atan2(mouse_x - 10, mouse_y - 10);
        var degree = (radians * (180 / Math.PI) * -1) + 90;
      
        $(".wrapper").rotate(degree);
      }
  })

.wrapper {
  display: inline-block;
  position:relative;
  border: dotted 1px #ccc;
}
#close {
    float:left;
    display:inline-block;
    padding:2px 5px;
    background:#ccc;
}
#rotate {
  position: absolute;
  display: inline-block;
  background-image:url(https://www.iconexperience.com/_img/o_collection_png/green_dark_grey/512x512/plain/rotate_right.png);
  background-repeat: no-repeat; 
  background-size: contain;
  width: 20px;
  height: 20px;
  bottom: -10px;
  right: -10px;

}
textarea {
  margin:15px;
}

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

<script
  src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
  integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
  crossorigin="anonymous"></script>

<script src="http://cdn.sobekrepository.org/includes/jquery-rotate/2.2/jquery-rotate.min.js"></script>


<div class="wrapper">
  <span id="close">x</span>
  <span id="rotate"></span>
<textarea contenteditable="true" id="editable">this is a textarea that i will rotate</textarea>
  
</div>

Answer 3

To rotate div, you can do it in mulitple ways. Ideally it should be implemented like the one which is explained in the below link which will support in all the browsers. How to rotate a div using jQuery

Hope this helps!!!