代码之家 › 专栏 › 技术社区 › Drew

动态替换内容可编辑文本

contenteditable javascript

0

Drew · 技术社区 · 15 年前

我想添加一些HTML作为用户键入内容可编辑。例如,

$('body')
  .delegate('div[contenteditable=true]', 'blur keyup paste',
    function(){
      var html = this.innerHTML;
      html.replace( "a", "b" );
      this.innerHTML = html;
    });

嗯,首先,这似乎不能取代任何东西。第二,我遇到了一个奇怪的问题,我不能再在ContentEditableDiv中键入内容。我检查了在Div上激发的事件,没有发生“模糊”事件。我似乎突出显示了该DIV,但我必须再次单击该DIV才能键入任何内容。我这里缺什么?

3 回复 | 直到 13 年前

1

0

PleaseStand 15 年前

如果要允许用户选择内容并将其设置为粗体/斜体(或在用户的插入点标记所在的位置插入HTML块),则需要使用 document.execCommand . Mozilla网站 documentation on this .

2

1

Tim Down 15 年前

第一部分,问题是 replace() javascript中的string方法返回一个新字符串,不影响原始字符串。你需要的是:

html = html.replace("a", "b");

对于第二个问题,问题可能在于 innerHTML 元素的属性破坏并重新创建元素中的整个DOM树,并且由于所选内容或插入符号包含在该不再存在的DOM树中,因此浏览器必须执行一些恢复操作。我猜你测试的浏览器只是清除了选择。

3

0

Freebin 13 年前

与类似问题作斗争:我需要在ContentEditable中突出显示一些特殊字符。例如,突出显示红色背景。所以我在做类似的事情

elem.innerHTML = elem.innerHTML.replace('&nbsp;', '<span class="highlight">&nbsp;</span>');

当然,浏览器将重新创建elem(重新绘制),elem将失去焦点和插入符号位置。如果您要在firefox中的keyup/input事件上打印elem.innerhtml,您会看到它将特殊的<br>粘贴为标记。我尝试使用相同的技术:我使用Range Object在插入符号位置粘贴标记,然后替换 (此时我松开焦点),然后让标记选择并删除。

参见范围API文档 https://developer.mozilla.org/en-US/docs/Web/API/range