图像调整大小 - Jquery UI 不能在网页上工作，但 jsFiddle 可以工作 - 其他方法？ - 为满足可编辑？

编程问答 2022-05-28

问题描述

在 contenteditable 中使用图像。希望能够在右下角有一个带有一个拖动手柄的图像，以允许用户动态调整大小。我在许多这些 html 编辑器中都看到了这一点，所以必须有一些标准的方法可以工作......请指出正确的方向（Jquery 首选，但可以是其他的）。

我发现了什么： 成功使用 Jquery UI 的人的旧帖子。我在这个 jsfiddle 上尝试了同样的方法并在小提琴中取得了相同的结果 - 它有效并且有一个底部右侧拖动手柄！我注意到它使用了相当旧版本的 Jquery 和 Jquery UI。我怀疑在最新版本的 Jquery 中使用它可能会出现问题，因为在小提琴上选择较新版本会使 Jquery UI 选择消失？

我在我的网页上尝试了完全相同的代码，使用 Jquery 1.91、Jquery UI 1.92，与小提琴匹配，但在我的网页上不起作用。它缺少右下角的拉片来调整大小。有什么不同？

我也尝试使用最新的 Jquery：

<script
  src="https://code.jquery.com/jquery-3.5.1.js"
  integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
  crossorigin="anonymous">
</script>

但这没有任何区别。与小提琴匹配的代码如下（不适用于我的页面，没有拖动手柄）。

<!DOCTYPE html>
<html>
<head>
    <script
      src="https://code.jquery.com/jquery-1.9.1.js"
      integrity="sha256-e9gNBsAcA0DBuRWbm0oZfbiCyhjLrI6bmqAl5o+ZjUA="
      crossorigin="anonymous">
    </script>
    <script
      src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"
      integrity="sha256-PsB+5ZEsBlDx9Fi/GXc1bZmC7wEQzZK4bM/VwNm1L6c="
      crossorigin="anonymous">
    </script>  
     <script>
        $('#image').resizable();
    </script>
</head>
<body>
  <img id="image" style="border: 5px solid black;" src="http://www.google.com.br/images/srpr/logo3w.png" />
</body>
</html>

在 Chrome、Firefox、Edge、IE 中的结果相同。

编辑：根据 Tushar 的包含 CSS 的解决方案，我已经尝试过了，但它仍然没有产生拉片...见下文：

<html>
<head>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.min.css" rel="stylesheet"/>
    <script src="https://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
</head>
<body>
    <img id="image" style="border: 5px solid black;" src="http://www.google.com.br/images/srpr/logo3w.png" />    
</body>
</html>

糟糕！忘记添加脚本了，之后就可以正常工作了：

<script>$('#image').resizable();</script>

解决方法

您缺少 jquery-ui CSS，尝试添加它会起作用。

http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css

PS：确保您的 CSS 版本与 jQuery-ui 的 js 文件匹配。

  • 更新了 CDN 链接

$('#image').resizable();
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.min.css" rel="stylesheet"/>

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

<img id="image" style="border: 5px solid black;" src="http://www.google.com.br/images/srpr/logo3w.png" />

contenteditableimage-resizingjavascriptjqueryjquery-ui