个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
30
4
我正在努力使用标记为 contentEditable 的 div 来实现我想要的行为。我希望允许用户在 div 内移动 img 并使其保持内联，但不允许他们调整大小或以其他方式修改该 img。否则他们应该能够修改 div 中的文本。
默认的浏览器行为如下所示，img 可以通过拖动 handle 进行移动和调整大小:
<html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
</head>
<body>
<div id="edit" contenteditable="true">
Here is some text, and also an <img src="http://img841.imageshack.us/img841/1747/imagead.png" /> image
</div>
</body>
</html>
我一直在尝试使用各种客户端脚本来尝试实现所需的功能，但我尝试的每种组合似乎都会遇到困难。我可以实现的是最终锁定:
<script type="text/javascript">
$(document).ready(function() {
$('img', '#edit').each(function (i, item) {
item.contentEditable = false;
$(item).bind('mousedown', function (e) {
e.preventDefault();
});
if ($.browser.msie) {
item.oncontrolselect = function () { return false; }
}
});
});
</script>
但是，尽管这可以防止任何元素重复(我在 Firefox 中遇到的问题)和使用拖动 handle 调整大小(在 IE 中)，但根本无法移动 img。
更新:谢谢你们，到目前为止我得到的最接近的是:
<script type="text/javascript">
$(document).ready(function() {
$('img', '#edit').each(function (i, item) {
attachEvents(item);
});
if ($.browser.mozilla) {
document.execCommand("enableObjectResizing", false, false);
}
});
function attachEvents(item) {
if ($.browser.msie) {
item.attachEvent('onresizestart', function (e) {
e.returnValue = false;
}, false);
item.attachEvent('ondragend', function (e) {
// cannot get IE to rebind moved item (toElement or similar is not available until IE9 when using addEventListener)
attachEvents(e.srcElement);
}, false);
}
if ($.browser.opera) {
// doesn't seem to work at all in Opera 11
}
}
</script>
但剩下的两个问题是 Opera 完全缺乏支持(这是我可以忍受的)以及如何在 IE 中重新绑定(bind)事件 ondragend 的问题。
还有其他人可以帮忙吗？
最佳答案
您可以使用 JQuery ui 实现可拖动效果关于你的img。
关于javascript - 只允许在 contentEditable <div> 内移动 <img>，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4795132/
30
4
0
我希望能够将包裹在跨度中的图像插入到可编辑的 div 中。我可以做到这一点没问题，但是当我开始打字时，在图像之后，它会将我的文本插入到图像跨度中。如何在刚刚插入的跨度之后定位光标？ Here是我的 f
我正在尝试将一些 MathJax 代码插入到 contentEditable div 中，如下所示: 和 JS $(document).ready(funct
我对父级 contenteditable="true"中的嵌套 contenteditable="false"元素有非常不同的行为: I'm supposed to be edit
问题: 我在 Chrome 和 Opera 中观察到一个不受欢迎的行为，当一个连接两个 p通过删除它们之间的分隔来标记。 Chrome 和 Opera 删除 contenteditable=false
我在渲染我的组件时收到以下警告: Warning: A component is contentEditable and contains children managed by React. It
我们已经使用单列网格实现了 React-Vitualized，其中的行为键盘事件 (onKeyUp/onKeyDown/onKeyPress) 启用。我们正在使用 Arrow-Key-Stepper
我有一个 contenteditable div，它包含几个 dontEdit 类的 span。有没有一种方法可以使 span 不可编辑，而 div 的其余部分保持可编辑。 editable
我正在尝试绑定(bind)一个 vue.js 事件以通过 contenteditable=true 检测元素上的更改。 这触发了我的vue.js vue中的trigger方法，但是我好像抓不到模型值
请参阅以下示例: Codepen example Some more text here not editable Hi this is my content $(document).on(
奇怪的是，这只在 Firefox 和 Opera 中被破坏(IE、Chrome 和 Safari 可以正常工作)。 有什么快速修复的建议吗？ http://ajax.googleapis.co
无论如何我可以使用这样的东西: console.log(e)}>Testing 内部react-contenteditable处理 Testing 的点击关键字？ 当我使用 html 属性时，它只需
我的插入符不在跨度之间，下面的例子 REPLY||stick together||CONFIRM||stick together||Name||stick together||Office 我所有的跨
我在使用 contenteditable 元素时遇到了不希望的行为。在 contenteditable=true 的父元素中嵌套 contenteditable=false 的 block 元素时，我
我有一个 div，它通过使用 contenteditable 用作“输入”，并且在启用时效果很好。但是在一种情况下，我需要通过设置 contenteditable='false' 来禁用“输入”，这会
目标:将 keydown 事件处理程序附加到作为 contenteditable div 子元素的 contenteditable span。 问题:如果您输入跨度，则会触发父事件而不是子事件。我想要
我有以下 HTML 旨在确保内部 span 不可编辑。这适用于其他浏览器，但不适用于 IE8。 Luke, I am your father. I'm your son?! Ewww!
我的网页中有一个 contenteditable div，但现在我需要的是，当超过 div 的最大高度时，将自动创建相同的新 div。 div 看起来也和之前的一样。不仅一个 div 会出现，它会是
关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。 想改善这个问题吗？更新问题，使其成为 on-topic对于堆栈溢出。 8年前关闭。 Improve thi
从我读到的内容来看，浏览器在处理 contenteditable 元素方面存在相当多的差异。 (即 link )。当“contenteditable=true”元素包含“contenteditable
当我清除一个contenteditable div的内容时，光标立即丢失，我无法通过点击将其恢复。所以如果我清除一次就无法添加任何内容。 在这里检查一下: asdasd x 删除第一行的“
我是一名优秀的程序员,十分优秀！