Question

我有一个页面，允许您修改其中的一些文本，如wysiwyg。

可编辑的div看起来像这样

<div id="area_3" class="dragThis" style="position: absolute; left: 43px; top: 5px; width: 237px; height: 157px; color: rgb(0, 0, 0);" data-color-default="#000" data-font-default="Verdana" data-content-type="text">
  <h1>Business Name</h1>123 Right Here Way
  <br>Tampa, FL 33607
  <br>info@yoursite.com
  <br>(813) 888-8888
</div>

加载div的JS就是这样：

    $('#startDragging div[class="dragThis"]').each(function(i) {
        if($(this).attr('data-content-type') == 'text'){
            $(this).resizable();
        }
        $(this).draggable({ containment: "parent" })
        .bind('dblclick', function() {
            $('#area').val($(this).attr('id'));
            if($(this).attr('data-content-type') == 'text'){
                editIT($(this));
            } else if($(this).attr('data-content-type') == 'image'){
                changeImage($(this));
            } else if($(this).attr('data-content-type') == 'video-image'){
                changeVideoImage($(this));
            }
        }).bind('click', function() {
            var styles = $(this).attr('style').split(';');
            $.each(styles, function(i) {
                var style = this.split(':');
                var style0 = $.trim(style[0]);
                var style1 = $.trim(style[1]);
                if(style0 == 'font-size'){
                    $('#controls #font-size option[value="'+style1+'"]').attr('selected', true);
                } else if(style0 == 'color'){
                    $('#controls #color option[value="'+style1+'"]').attr('selected', true);
                } else if(style0 == 'text-align'){
                    $('#controls #text-align option[value="'+style1+'"]').attr('selected', true);
                }
            });
        });
    });
});
function editIT(what){
    what.html('<textarea id="text_'+what.attr('id')+'" style="width:'+what.css('width')+';height:'+what.css('height')+';">'+what.html()+'</textarea>');
    $('#text_'+what.attr('id')).focus();
    what.unbind('dblclick');
    $('#text_'+what.attr('id')).blur(function() {
        var newText = $(this).val().replace(/\r\n|\r|\n/g,"<br />");
        what.html(newText);
        what.resizable();
        what.bind('dblclick', function() {
            $('#area').val($(this).attr('id'));
            editIT($(this));
        }).bind('click', function() {
            var styles = $(this).attr('style').split(';');
            $.each(styles, function(i) {
                var style = this.split(':');
                var style0 = $.trim(style[0]);
                var style1 = $.trim(style[1]);
                if(style0 == 'font-size'){
                    $('#controls #font-size option[value="'+style1+'"]').attr('selected', true);
                } else if(style0 == 'color'){
                    $('#controls #color option[value="'+style1+'"]').attr('selected', true);
                } else if(style0 == 'text-align'){
                    $('#controls #text-align option[value="'+style1+'"]').attr('selected', true);
                }
            });
        });
    });
}

一切都很好，你可以双击div然后更改为textarea来编辑文本，你可以拖动文字。

但是，您只能在双击它之前调整该框的大小。如果您双击该框并修改文本，那么当您单击时，该区域将不再可调整大小。

任何建议？

Answer 1

为什么不将其他容器放入其中，而不是更改实际可调整大小的html？

你有类似的东西：

<div id="area_3" class="dragThis" style="position: absolute; left: 43px; top: 5px; width: 237px; height: 157px; color: rgb(0, 0, 0);" data-color-default="#000" data-font-default="Verdana" data-content-type="text">
    <div id="edit">
         <h1>Business Name</h1>123 Right Here Way
        <br>Tampa, FL 33607
        <br>info@yoursite.com
        <br>(813) 888-8888</div>
</div>

而不是将$(this)传递给editIt函数，而是传递$(this).find("#edit")。

这里有一个小提琴，展示了它是如何运作的。不再需要重新绑定点击事件，但您需要跟踪您当前是否处于编辑模式。示例：http://jsfiddle.net/WxwLa/

jQuery UI resizable停止工作

1 个答案: