在所见即所得HTML编辑器中调整图像大小

Question

我正在使用DevExpress' HTML编辑器创建一个所见即所得的HTML编辑器。

我想允许最终用户上传图像并在编辑器内使用每个角落的手柄调整图像大小(我基本上想复制TinyMCE的功能)。我还希望图像可插入段落(这样它就可以与文本内联)，并允许它被拖到段落的不同位置。但是，我不能让它工作得那么好。

我的第一个想法是使用jQuery UI的Resizable方法。下面是我到目前为止创建的内容:

JavaScript

$(".child").resizable({
    aspectRatio:true,   
    minWidth:100,                    
    maxWidth:$(".parent").width(),                  
    containment:"parent",
    handles:"ne,nw,se,sw",
    resize: function( event, ui ) {
    var topB = (parseInt($(this).css("top")) > 0)
        ? parseInt($(this).css("top")) : 3;
    var leftB = (parseInt($(this).css("left")) > 0)
        ? parseInt($(this).css("left")) : 3;
    if (parseInt($(this).css("left"))< 3)
    {
        $(this).trigger('mouseup'); 
        $(this).css({"left":leftB+"px","top":topB+"px"});
    }
    if (parseInt($(this).css("top"))< 3)
    {
        $(this).trigger('mouseup'); 
        $(this).css({"left":leftB+"px","top":topB+"px"});}
    }}).draggable({ containment: "parent" });

CSS

.container { margin:40px; }
.parent
{
    background: yellow;
    width: 250px;
    height: 500px;
    position: relative;
    padding:5px;
}
.child
{
    background: red;
    width: 100px;
    height: 80px;
    position:absolute;
}
.child img
{
    width: 100%;
    height: 100%;
}
.ui-resizable-ne,
.ui-resizable-se,
.ui-resizable-nw,
.ui-resizable-sw
{
    background: white;
    border: 1px solid black;
    width: 9px !important;
    height: 9px !important;
}
.ui-resizable-se
{
    background-image: none !important;
    right: -5px !important;
    bottom: -5px !important;
}

HTML

<div class="container">
    <div class="parent">      
        <img class="child" src="https://yeackstorage.blob.core.windows.net/yeackwebsitecontent/Content/Files/1607150ECE1959FE17438494AEADCF39CAECD0.png">
    </div>
</div>

以下是我遇到的问题:

1. 调整大小的方块只有部分可见。
2. 当我把它放在段落中时，它的行为就不正常了。
3. 根据SO的其他一些答案，jQuery的resizable()在封装在。但是，这将使它不能包含在段落中，对吗?此外- TinyMCE似乎能够实现这一点，而无需在div中包装图像。

这似乎应该是一个简单的功能实现-有一个更简单的方法去做吗?如果jQuery的可调整大小是最好的选择，我如何才能使它正确工作?

Answer 1

DevExpress aspxhtmlitor使用内置浏览器的内容编辑功能来实现此目的。虽然它在基于ms的浏览器中是开箱即用的，但在其他浏览器中可能不起作用。例如，播放这个演示来测试它是如何工作的。

作为一个通用的图像大小调整功能，建议使用它的插入/更改图像对话框。例如，播放这个演示以了解如何使用它。