使用jQuery在div中添加，调整大小，位置，颜色更改文本

Question

我期待创建一种非常简单的方法，允许用户在<div>内书写，调整大小，定位或更改文本的颜色。 我有点了解jQuery。

我的HTML

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

在这里.canvas是一个<div> ，有时它包含图像或其他背景色。 我已经写了代码来更改<div class="canvas">的颜色和背景图像。 我需要的是用户可以非常轻松地输入文本，并且可以根据需要设置其样式 。 请看图片 ：

我从mailchimp获得这张图片。 在mailchimp中，当我们创建模板设计时，它将提供我想要的东西。 用户可以在此处添加文本，旋转文本，更改字体系列，颜色等。

实际上是颜色和字体系列的东西，我知道如何使用jquery来实现。但是我认为text div的旋转很复杂。 该如何旋转 ？

在这里，我不是要代码，而是想看到一个工作示例，该示例可以帮助我理解工作原理并学习jQuery。 请任何人都可以为此工作提供示例，或建议任何免费的jQuery插件或基本代码。

Answer 1

我是从jsfiddle找到的。 让我们从头开始，开始扩展您的功能

的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

您需要的是http://jqueryrotate.com/以及其他功能。

该示例应该进行改进，但是您具有以下功能：

1. 旋转
2. 关
3. 编辑
4. 德拉格
5. 调整大小（文本区域）

有关此示例的一些说明 。

- 旋转由jqueryrotate.com库完成。 在此示例中，我使用了0,0位置来计算角度，但应该进行改进以使它与文本区域成角度，以提供更好的用户体验。

- 可调大小的textarea支持调整大小和编辑功能，这将做得很好，因为调整大小时，它会自动调整其父包装的大小，而无需在此处添加额外的代码。

-jquery.ui支持拖动 （也许在旋转时禁用拖动会很有用，在这种情况下，只需添加一个标志即可）。

 //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

要旋转div，可以多种方式进行。 理想情况下，它的实现方式应类似于以下链接中说明的那样，它将在所有浏览器中都支持。 如何使用jQuery旋转div

希望这可以帮助！！！