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

Question

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

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

我的第一个想法是使用 jQuery UI 的 Resizable 方法。 Here is what I have created so far:

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. 根据some other answer on SO，jQuery 的 resizable() 在 .但是，这会使它无法包含在段落中，对吗？此外 - TinyMCE 似乎能够在不将图像包装在 div 中的情况下完成此操作。

这似乎应该是一个简单的功能来实现 - 有没有更简单的方法来实现它？如果 jQuery 的 resizable 是最好的选择，我怎样才能让它正常工作？

Answer 1

DevExpress ASPxHtmlEditor 为此使用内置浏览器的内容可编辑功能。虽然它在基于 MS 的浏览器中开箱即用，但在其他浏览器中可能无法使用。例如，播放this demo 来测试它的工作原理。

作为通用图像大小调整功能，建议改用其插入/更改图像对话框。例如，播放this demo 以了解更多有关如何使用它的信息。