我有一个div,它有contenteditable="true"并且包含一些html。此html可能包含图片。由于contenteditable="true"用户可以通过将图像拖动到新位置来移动它们。但是我需要在每次移动图像时通知我的代码,以一种我同时获得正在移动的图像元素和放置图像的目标节点的方式。我该怎么做?我当前的解决方案向我的div元素添加了一个Drop监听器,它是contenteditable,然后每次用户移动图像时我都会收到一个drop事件,但我无法获得包含用户移动的图像的dom节点.另外:拖动图像,似乎是复制DOM节点,而不是移动它。这是真的?(在Firefox中测试)。
我正在使用一个contenteditablediv,它可以选择在文本流中包含内联html元素,例如标签。在某些时候我需要获取插入符号的位置,但我发现如果插入符号位于html子元素之后,则示例代码返回的位置不正确。我需要一个跨浏览器的解决方案,它允许我存储插入符号的位置,以便即使在文本流中存在html元素的情况下也可以在一瞬间恢复它。例子:functiongetCaretPosition(editableDiv){varcaretPos=0,containerEl=null,sel,range;if(window.getSelection){sel=window.getSelection
这是演示:http://www.kevinroth.com/rte/demo.htm当我使用firebugs检查源代码时,我看到它只是iFrame,但是iFrame怎么会有文本区域行为?关于如何实现这个的任何想法?感谢 最佳答案 因为我现在正在为我的工作做这件事,所以我做了少量的研究。据我所知,有两种方法可以实现这一点:文档.设计模式在JavaScript中使用document.designMode将整个HTML文档设置为可编辑。由于整个HTML文档是可编辑的,因此可能需要一个iframe来封装编辑,以便用户无法编辑您不想编辑的页面
我知道如何设置标记为hrefcontenteditable中的属性像这样:execCommand("CreateLink",false,"#jumpmark");这将导致selection但是我不知道如何设置anchorname而不是href.这是我想要的结果:selection谁能帮帮我?旁注:我使用jQuery和Rangy作为库,但是我更喜欢直接与execCommand一起工作的解决方案。更新:这是一个jsfiddle:http://jsfiddle.net/fjYHr/选择一些文本并单击按钮。我想要的只是通过单击按钮插入一个带有名称属性集而不是href的链接。
好像都可以编辑文档,那有什么区别呢? 最佳答案 在这种情况下,它们是等价的。contentEditable使其应用的元素和所有后代节点都可编辑。designMode使整个文档可编辑。WHATWG博客上提供了关于这两个属性的历史摘要—TheRoadtoHTML5:contentEditable.如果您有兴趣,值得一读。 关于javascript-document.body.contentEditable='true'之间的区别;和document.designMode='on';,我们在S
我有一个带有一些文本的p标签,我试图让它成为contenteditable但仅限于双击。我怎样才能防止浏览器在我点击它时将光标放在p上并且只在我双击时才这样做?查询:p.dblclick(function(e){p.css("cursor","text");}).focusout(function(){p.css("cursor","default");}).click(function(e){console.log('focusp');e.stopPropagation();$("body").focus();//notstoppingChromefromplacingcursor}
我有这个contentedittabledivminubyviubyvt这是代码输出的图像描述所以我想获取div的插入符号位置,并假设光标位于最后一个字符之后。这是我获取插入符位置的代码functiongetCaretPosition(editableDiv){varcaretPos=0,sel,range;if(window.getSelection){sel=window.getSelection();if(sel.rangeCount){range=sel.getRangeAt(0);if(range.commonAncestorContainer.parentNode==edi
我正在开发一个contenteditablediv来制作一个简单的RichText编辑器。我的要求之一是能够在按钮事件的光标位置插入htmlblock。通过使用range、selection、range.insertNode(nodeHTML)或range,我能够使该部分正常工作.pasteHTML(nodeHTML)基于浏览器。但我无法得到两件东西,理想情况下我希望拥有能够使用浏览器的撤消撤消插入的节点。不知何故,浏览器会忽略上述操作。将光标移动到插入节点的末尾。这样用户就可以开始写了我知道我可以使用许多可用编辑器中的一些东西,它们做得很好,但如果我得到它,我就不必这样做了。欢迎任何
考虑以下内容可编辑的div。boldtextboldtext如果我将光标放在两个div之间并开始键入文本,则文本会变成粗体,而不是在两个div之间插入一个新的文本节点。如果您回到家并尝试在第一个div前面键入内容,也会发生同样的情况。它成为第一个div的一部分。如果我检查从选择返回的范围的startContainer,我会得到其中一个div的内容,而不是我期望的空文本节点。$('#EDITABLE').focus();varselection=window.getSelection();varrange=document.createRange();vardiv=$('#div2').
我想创建一个小的WYSIWYGHTML文本编辑器,带有一个内容可编辑的div。为此,我使用window.getSelection()检索所选文本,当我单击按钮(粗体按钮)时,我执行一个函数以在所选文本周围添加粗体标记。但我对添加粗体标记的javascript代码(没有JQuery)一无所知。这里是我的代码:functionadd_tags(tags){container_contenteditable=document.getElementById("container_contenteditable");//Retrievetheselectedtext:sel=window.get