使用jQuery添加、调整大小、定位和更改div内文本的颜色

Question

我期望你能够创建一个非常简单的方式，使用户能够在

内编写、调整大小、定位或更改文本颜色。我略懂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完成。但我认为文本

的旋转很复杂。如何实现这个旋转？

在这里，我不是在要求代码，而是想要看到一个能够帮助我理解工作原理并学习jQuery的工作演示。请任何人都可以给出这项工作的示例，或者建议任何免费的jQuery插件或基础代码。

- user5742826

---

https://jqueryui.com/resizable/ - prasanth

感谢Prasad的快速回复。我已经知道这个函数了。但在我的情况下，resize()是不够的。 - user5742826

我认为你需要一个类似于 XL 表格的输入框。 - prasanth

将 -- contenteditable="true" -- 属性应用于父 DIV，大多数现代浏览器都配备了内置的编辑器工具... - Hudson

我认为这是一个裁剪工具，对于图像很有用，但是如何裁剪文本呢？ - Sunil Kumar

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

- mymotherland

---

请查看我的更新的问题。请浏览 http://mailchimp.com/ 。 - user5742826

Answer 2

你需要的是与其他功能配合使用的http://jqueryrotate.com/。

这个例子需要改进，但你有以下功能：

1. 旋转
2. 关闭
3. 编辑
4. 拖动
5. 调整大小（文本框）

关于这个例子的注意事项：

- 旋转 是通过jqueryrotate.com库完成的。在这个例子中，我使用0,0位置来计算角度，但应该改进为根据文本区域的角度来提供更好的用户体验。

- 调整大小和编辑 功能由可编辑的文本区域支持，它会很好地完成工作，因为当调整大小时，它会自动调整其父包装器的大小，这里不需要额外的代码。

- 拖动 由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>

- Jordi Flores

---

谢谢您提供这段代码。但是，文本调整大小不起作用。另外，您能否在jsfiddle中展示一个带有图像和可编辑文本的演示？ - user5742826

图片？您请求了一个文本工具。我会尝试制作调整文本大小的功能。 - Jordi Flores

在这个 jsfiddle 上，我制作了一个可调整大小和可编辑的文本。https://jsfiddle.net/w5zfntz1/ - Jordi Flores

Answer 3

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

希望这能帮到你！

- sharath.bhanapur