Question

我正在使用DevExpress的HTML编辑器创建一个WYSIWYG 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>

以下是我遇到的问题：

调整大小的方块只是部分可见。
当我把它放在段落中时，它表现不佳。
根据some other answer on SO，jQuery的resizable（）在包装中时效果最佳。但是，这会使它无法包含在段落中，对吗？此外 - TinyMCE似乎能够在不将图像包装在div中的情况下实现此目的。

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

Answer 1

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

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

在WYSIWYG HTML编辑器中调整图像大小

的JavaScript

CSS

HTML

1 个答案: