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做到这一点。但是我认为文本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/ 与其他功能相结合。

这个例子应该改进，但你有这个功能：

<强>旋转
关闭

修改

的 Dragg

调整大小（textarea）

关于此示例的一些注释。

- 旋转由jqueryrotate.com库完成。在这个例子中，我使用0,0位置来计算角度，但是应该进行改进以使角度朝着textarea获得更好的用户体验。

- 调整大小＆amp; textarea editable支持编辑函数，这将完成相同的工作，因为调整大小时，它会自动调整其父包装器的大小，此处不需要额外的代码。
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，您可以多种方式进行。理想情况下，它应该像下面链接中解释的那样实现，它将在所有浏览器中支持。 How to rotate a div using jQuery

希望这有帮助!!!

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

3 个答案: