Javascript 使用jquery在div中添加、调整大小、位置和颜色更改文本

我期待着创建一种非常简单的方法，允许用户在

中写入、调整大小、定位或更改文本的颜色。我对jQuery有点了解

我的HTML

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

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

测试

这里的

.canvas

是一个

，有时它包含一个图像或另一种背景色。我已经编写了代码来更改该

的颜色和背景图像。 我需要的是，用户可以非常轻松地输入文本，并且可以根据自己的意愿设置样式。请查看图像：

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

实际上，颜色和字体家族的事情，我知道如何用jquery来实现。但是文本div的旋转是复杂的。如何进行旋转

这里我不是要代码，但我想看一个工作演示，帮助我理解工作和学习jQuery。请任何人都可以给这项工作的样本，或建议任何免费jQuery插件或基本代码

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

HTML

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

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

CSS:

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

.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;
}

---

要旋转div，可以用多种方法。理想情况下，它应该像下面链接中解释的那样实现，该链接将支持所有浏览器。

希望这有帮助

您需要的是与其他功能结合使用

本示例应该改进，但您有以下功能：

旋转

关闭

编辑

Dragg

调整大小（文本区域）

一些关于这个例子的注释

-旋转由jqueryrotate.com库完成。在本例中，我使用0,0位置来计算角度，但应该改进为朝向文本区域的角度，以获得更好的用户体验

-调整大小和编辑功能由textarea editable支持，这将很好地完成这项工作，因为在调整大小时，它会自动调整其父包装的大小，无需在此处添加额外代码

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

//初始旋转，仅用于测试
//$（“.wrapper”）。旋转（-45）；
//让我们添加可拖动的功能
$（函数（）{
$（“.wrapper”）.draggable（）；
} );
//关闭按钮动作
document.getElementById（'close'）。onclick=function（）{
this.parentNode.parentNode.parentNode.removeChild（this.parentNode.parentNode）；
返回false；
};
//旋转按钮动作
var rotate=$（“#rotate”）
var=false；
rotate.mousedown（函数（）{
拖动=真
})
$（文档）.mouseup（函数（）{
拖动=错误
})
$（文档）.mousemove（函数（e）{
如果（拖动）{
var mouse_x=e.pageX/2；
var mouse_y=e.pageY/2；
var radians=Math.atan2（鼠标x-10，鼠标y-10）；
变量度=（弧度*（180/数学π）*-1）+90；
$（“.wrapper”）。旋转（度）；
}
})

.wrapper{
显示：内联块；
位置：相对位置；
边框：虚线1px#ccc；
}
#接近{
浮动：左；
显示：内联块；
填充物：2px 5px；
背景：#ccc；
}
#轮换{
位置：绝对位置；
显示：内联块；
背景图片：url(https://www.iconexperience.com/_img/o_collection_png/green_dark_grey/512x512/plain/rotate_right.png);
背景重复：无重复；
背景尺寸：包含；
宽度：20px；
高度：20px；
底部：-10px；
右：-10px；
}
文本区{
利润率：15px；
}

x
这是我将旋转的文本区域

感谢prasad的快速回复。我已经意识到这个功能。但是在我的例子中，resize（）是不够的。我想你需要一个像XL的工作表输入框no。请看这个。这里是图像，但我需要文本而不是图像将--contenteditable=“true”--属性应用于父DIV，大多数现代浏览器都带有内置的编辑器工具…请查看我更新的问题。请通过。谢谢你的密码。但是文本大小调整不起作用。您还可以用JSFIDLE显示一个工作演示，带有E图像和可编辑文本。图像吗？您请求了一个文本工具。我将尝试在这个JSFIDLE上设置文本大小调整功能。我已经设置了一个可调整大小和可编辑的文本。