Tag: contenteditable

如何解析浏览器兼容性的可编辑DIV文本

我使div可编辑。 当我试图解析div的文本时，我需要做下面的正则表达式。 innerDOM = “I had downloaded all the material from the Intern,You will find dfvdfvdvdfvdfvdvdvdf dfvdfvdvdfvdfvdfvdfvd” innerDOM.replace(//g, “”).replace(//g, “”); 正则表达式在firefox和chrome上运行良好。 但不是在IE中。 我应该做些什么改变？ 请参阅此FIDDLE以便更好地理解……

内容可编辑光标位置

我有一个内容可编辑的div，我希望点击编辑按钮，光标出现在div的开头，在它结束时出现的那一刻。 Dior Charlize-Theron Natalie-Portman Sharon-Stone Edit 因此，当您在分钟点击编辑时，您必须使用箭头键返回到开始编辑Dior（这是唯一真正被编辑的东西）。 但我试图将内容可编辑的代码添加到div只有它不起作用。 这是我的一些jQuery $(“.edit”).click(function(){ $(this).parent().children(“div”).focus(function(){ }); }); $(“.edit”).hover(function(){ $(this).css(“opacity”,”0.5″) }, function(){ $(this).css(“opacity”,”1″) }); $(“.edit”).parent().blur(function(){ var sortableList = $(“.sortable”).html(); $(“#ItemDescription”).val(sortableList); }); function storeUserScribble(id) { var scribble = $(“li div”).text(); localStorage.setItem(‘userScribble’,scribble); } function getUserScribble() { if ( localStorage.getItem(‘userScribble’)) { var scribble = localStorage.getItem(‘userScribble’); } else { } } function clearLocal() { […]

如果它位于元素内，则避免使用createElement函数（contentEditable）

我正在使用此function，以便使用Safari和Chrome在contentEditable div的替换行中用替换New Divs ： $(“#form_description”).live(“keypress”, function(e){ if (e.which == 13) { if (window.getSelection) { var selection = window.getSelection(), range = selection.getRangeAt(0), br = document.createElement(“br”); range.deleteContents(); range.insertNode(br); range.setStartAfter(br); range.setEndAfter(br); range.collapse(false); selection.removeAllRanges(); selection.addRange(range); return false; } } }); 问题是，当我在Something输入内容并按“返回”键时，我不想得到 ，所以我可以继续列入清单… 如果我在LI元素中，我怎么能创建一个不工作的条件？ 编辑我的答案： 好的，我已经设法做到了，但如果您对代码有任何评论，欢迎您： $(“#form_description”).live(“keypress”, function(e){ if (e.which == 13) { node = document.getSelection().anchorNode; nodeName = node.parentNode.nodeName.toLowerCase(); if […]

在IE 10中不适用

我正在尝试创建客户端可编辑表。 这是我的代码。 它适用于Chrome，Firefox但不适用于IE。 IE的脚本还有什么关系吗？ $(document).ready(function() { $(“td”).click(function(){ if($(this).attr(“contentEditable”) == true){ $(this).attr(“contentEditable”,”false”); } else { $(this).attr(“contentEditable”,”true”); } }) }); H1 H2 H3 H4 R1 R1 R1 R1 R2 R2 R2 R2

在制作富文本/所见即所得的编辑器时，可信的div与iframe

我正在尝试权衡使用 与制作我自己的富文本/ wysiwyg编辑器的优缺点。 这样做，为什么我不能只使用一个满足的 ，为什么这么多人喜欢 ？ 背景讨论：根据我的理解，制作一个所见即所得编辑器的一种常用方法是使div或iframe 满足 ，然后对包含div或iframe主体的文档执行execCommand以使其文本变为粗体或其他。 这是HTML： Bold VS： Bold 和JS： $(document.body).on(‘click’, ‘.btn-bold’, function(){ document.execCommand(‘bold’, false, null); }); VS： $(document.body).on(‘click’, ‘.btn-bold’, function(){ window.frames[0].document.body.execCommand(‘bold’, false, null); }); 看起来大多数制作精良的富文本编辑器都使用iframe。 虽然我可以很容易地在Webkit浏览器中使用这个contenteditable / execCommand组合来处理div / iframe，但是我有一个地狱般的时间试图让iframe在Firefox中运行。 我不得不求助于将脚本和样式表加载到iframe和各种废话中来复制我可以通过基于div的版本轻松完成的任务。 所以基于 的方法似乎更可取。 我重新考虑任何有力的理由？

CKEditor，初始化使用insertElement添加的小部件

我创建了一些小部件，他们在初始启动时加载得很好，但我通过以下方式将更多此类小部件添加到编辑器中： ckeditorInstance.insertElement( CKEDITOR.dom.element.createFromHtml(”)); 它插入很好，但是ckeditor无法识别作为窗口小部件插入的元素，因此窗口小部件可编辑字段不会像它们应该那样启用。 有没有办法让ckeditor重新扫描其内容来初始化它尚未初始化的任何新小部件？

HTML修改后无法恢复选择，即使它是相同的HTML

我正在尝试存储一个contentEditable元素的选择，并在以后恢复它。 我想观察paste事件并按原样存储HTML，清除html然后手动插入粘贴的文本，并在所选位置进行一些更改。 看看这个例子： jsfiddle.net/gEhjZ 当您选择文本的一部分时，点击store ，再次删除选择并点击restore ，它按预期工作。 但是当你第一次点击store ，然后通过点击overwrite html替换HTML与完全相同的HTML，然后尝试restore ，没有任何反应。 我认为使用.cloneRange()会有所作为，但事实并非如此。 即使是对象的深层副本（ $.extend(true, {}, oldRange) ）也$.extend(true, {}, oldRange) 。 一旦我覆盖HTML，选择对象sel也会被更改。 对我来说，更改选择上下文将擦除范围是有道理的，但我正在尝试将其恢复为完全相同的HTML。 我知道我可以使用rangy ，但我真的不想为这个小function使用一个巨大的库。 我错过了什么？ 任何帮助将非常感激！ 注意：只有Firefox / Chrome，因此不需要使用crossbrowser-hacks。 更新： @Tim Down的答案在使用div时有效，但我实际上使用的是iframe。 当我做那个例子时，我认为这没有任何区别。 现在当我尝试恢复iframe的主体时，我收到以下错误： TypeError: Value does not implement interface Node. 在以下行中preSelectionRange.selectNodeContents(containerEl); 。 我没有从谷歌搜索获得太多。 我试图包装正文的内容并恢复包装的html，但我得到了同样的错误。 jsfiddle在这种情况下不起作用，因为它使用iframe来显示结果本身，所以我在这里举了一个例子： snipt.org/AJad3 并且没有包装： snipt.org/AJaf0 更新2：我认为我必须使用editable.get(0) 。 但现在iframe选择的start和end是0.参见snipt.org/AJah2

ContentEditable Iframe中的自动链接url

我有一个内容可编辑的iframe我想自动链接它，如： 我的内容可编辑的iframe看起来像 我试过在前面提到的这个问题中使用正则表达式。 我在这个问题中使用的function工作正常，但实际上它将取代所有链接，包括标签中的链接（IMG，现有的A HREF）。 但我不想使用regx如果我使用regx转换发生时，我点击任何提交或保存按钮。 当用户在内容可编辑的iframe中粘贴url时，它应自动将任何链接转换为超链接 我也试过这个小提琴但是:(不能得到这个 HTML 我已经尝试过此资源，但无法找到如何解决内容可编辑的iframe问题。 也许这对于满足可疑的div 在contenteditable jQuery中 自动链接URL ：将文本URL转换为链接作为键入 任何人都可以帮助我内容可编辑的iframe autolinking谢谢。

在javascript中获取插入位置之前的最后一个字符

我即将在我的contenteditable div中实现Facebook，如果我给’$’和一些像’a’的字符，我需要一个自动建议，它应该弹出我的插入位置附近。 我需要知道如何在JavaScript for IE和其他浏览器中找到插入位置之前的最后一个字符。 我可以访问Jquery库。 (function($) { $.fn.getCursorPosition = function() { var input = this.get(0); if (!input) return; // No (input) element found if (‘selectionStart’ in input) { // Standard-compliant browsers return input.selectionStart; } else if (document.selection) { // IE input.focus(); var sel = document.selection.createRange(); var selLen = document.selection.createRange().text.length; sel.moveStart(‘character’, -input.value.length); return sel.text.length – […]

如何在具有contentEditable的元素上启用“draggable”？

我希望使用jQuery UI同时具有可编辑和可拖动的div。 内容可编辑性似乎仅在未启用可拖动时才有效。 我错过了什么吗？ 我正在使用jQuery 1.4.4和jQuery UI 1.8.9 JavaScript的： $(function(){ $(‘#draggable’).draggable(); }); HTML： TEXT