使用jquery在div中添加，调整大小，位置，颜色更改文本 [英] Add, resize , position ,color change text inside a div using jquery

问题描述

我期待着创建一个非常简单的方法，允许用户在< div> 中书写，调整大小，定位或更改文本的颜色。

 <$> c $ c>< div class =canvas> 
< div id =u-test-idclass =u-test-classcontenteditable =true> 
测试
< / div> 
< / div> 
  

这里 .canvas 是一个< div> ，有时它包含图像或其他背景颜色。我已经写了代码来改变< div class =canvas> 的颜色和背景图片。
我需要的是用户可以非常容易地输入文本，并且他可以根据自己的喜好样式。请参阅图片：

< img src =https://i.stack.imgur.com/ekz7x.pngalt =输入图片说明>

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

实际上是颜色和字体家庭的东西，我知道如何用jquery。但旋转的文本div是复杂的，我想。 旋转？

这里我不是要求输入代码，演示，帮助我了解工作和学习jQuery。请任何人可以给这个工作的样品，或建议任何免费的jQuery插件或基本代码。

解决方案

我从 jsfiddle 。让我们开始扩展您的功能。

HTML

< < div class ='resizable draggable'>
< h1>调整我的大小< / 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' b $ b'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 {
 $（this）.draggable（'option'，'disabled'，false）; 
 $（this）.prop（'contenteditable'，'false'）; 
 $ ）.css（'cursor'，'move'）; 
}）; 
  

CSS：

  .draggable {
 cursor：move; 
} 
 .resizable {
 border：1px dotted＃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; 
} 
  

I'm looking forward to creating a very simple way that allows users to write, resize, position or change the color of a text inside a <div>. I know jQuery little bit.

My HTML

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

Here .canvas is a <div>, sometimes it contains an image or another background color. I already write the code to change the color and background image of that <div class="canvas">. What I need is that the user can enter the text very easily and he can style it as he wishes. Please see the image:

This image i capure from mailchimp. In mailchimp when we creating an template design , it will provide the same thing i wanted . Here user can add text , he can rotate text , change font family, color etc .

Actually the color and font family things , i know how to do this with jquery .But the rotation of the text div is complicated i think. How to do this rotation ?

Here I am not asking for code, but I want to see a working demo that helps me to understand the working and learn jQuery. Please anyone can give the sample for this work, or suggest any free jQuery plugin or the basic code.

解决方案

I found this from jsfiddle. Lets take this scratch and start extending your functionality

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

这篇关于使用jquery在div中添加，调整大小，位置，颜色更改文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！