javascript - 使用 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 做到这一点。但我认为文本 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;
}