图像调整大小 - Jquery UI 在网页上不起作用，但 jsFiddle 有效 - 其他方法？ - 为了内容可编辑？

Question

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

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

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

我也试过用最新的 Jquery:

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

但这没有任何区别。匹配 fiddle 的代码如下（在我的页面上不起作用，没有拖动手柄）。

<!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 中结果相同。

编辑：Per 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>

Answer 1

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

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

PS：确保你有正确的版本 CSS 匹配你的 js 文件 jQuery-ui.

更新为 CDN link

$('#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" />

图像调整大小 - Jquery UI 在网页上不起作用，但 jsFiddle 有效 - 其他方法？ - 为了内容可编辑？

Image Resize - Jquery UI not working on web page, but jsFiddle works - other methods? - for contenteditable?

javascript

jquery

jquery-ui

contenteditable

image-resizing