Добавить, изменить размер, положение, изменить цвет текста внутри div с помощью jquery

Я с нетерпением жду создания очень простого способа, который позволяет пользователям писать, изменять размер, положение или изменять цвет текста внутри <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">. Мне нужно, чтобы пользователь мог вводить текст очень легко, и он может стилизовать его, как пожелает. См. изображение:

введите описание изображения здесь

Это изображение я capure from mailchimp. В mailchimp при создании дизайна шаблона он предоставит то же самое, что я хотел. Здесь пользователь может добавлять текст, он может вращать текст, менять семейство шрифтов, цвет и т.д.

На самом деле цвет и семейные вещи шрифта, я знаю, как это сделать с jquery. Но поворот текстового div сложный, я думаю. Как это сделать ротация?

Здесь я не прошу код, но я хочу увидеть рабочую демонстрацию, которая поможет мне понять работу и изучить jQuery. Пожалуйста, любой может дать образец для этой работы или предложить бесплатный плагин jQuery или базовый код.

ОТВЕТЫ

Ответ 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;
}

Ответ 2

вам нужно http://jqueryrotate.com/ в сочетании с другими функциями.

Этот пример должен быть улучшен, но у вас есть эта функциональность:

  • Rotate
  • Закрыть
  • Edit
  • Dragg
  • Изменить размер (textarea)

Некоторые заметки в этом примере.

- Повернуть выполняется библиотекой jqueryrotate.com. в этом примере я использую 0,0 позицию для вычисления угла, но должен быть улучшен, чтобы поднять угол к текстовой области, чтобы улучшить работу пользователя.

- Функции изменения размера и редактирования поддерживаются редактируемым textarea, что будет довольно хорошо выполнять задание, так как при изменении размера оно автоматически изменяет размер своей родительской оболочки, здесь нет необходимости в дополнительном коде.

- Перетаскивание поддерживается jquery.ui(возможно, будет полезно отключить перетаскивание при выполнении вращения, в этом случае просто нужно добавить флаг).

//initial rotation, just for test
//$(".wrapper").rotate(-45);


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

Ответ 3

Чтобы повернуть div, вы можете сделать это несколькими способами. В идеале это должно быть реализовано подобно тому, которое объясняется в приведенной ниже ссылке, которая будет поддерживаться во всех браузерах. Как повернуть div с помощью jQuery

Надеюсь, это поможет!!!