标签: contenteditable

我有一个具有contenteditable集合的div,我正在使用jquery捕获按键,以便在按下回车键时调用preventDefault().类似于 在光标处插入文本的这个问题,我想直接插入html,为简洁起见,我们会说它是一个br标签.使用上面问题的答案实际上在IE中工作,因为它使用range.pasteHTML方法,但在其他浏览器中,br标记将显示为纯文本而不是html.我怎么能修改插入HTML而不是文本的答案？

我有一个<div contenteditable=true>由WYSIWYG定义的一些元素.例如<p>,<h1>等等.我想直接关注其中一个元素.

比如说<p id="p_test">.但似乎focus()功能不适用于<div>元素,<p>元素......

在我的案例中是否有另一种方法来定义焦点？

我以前一直试图问这个,没有任何运气解释/证明一个错误发生的工作示例.所以这是另一个尝试:

我试图在一个可信的DIV上复制一个占位符效应.核心概念很简单:

<div contenteditable><em>Edit me</em></div>

<script>
$('div').focus(function() {
    $(this).empty();
});
</script>

这可能有些工作,但如果占位符包含HTML,或者正在进行其他处理,则可删除可编辑DIV的文本插入符,并且用户必须重新单击可编辑的DIV才能开始键入(即使它是仍然是焦点):

示例:http://jsfiddle.net/hHLXr/6/

我不能在处理程序中使用焦点触发器,因为它将创建一个事件循环.所以我需要一种方法来重新设置可编辑DIV中的插入符光标,或者以其他方式重新聚焦.

你知道怎么<div>用JavaScript编辑吗？我正在寻找跨浏览器的解决方案.

类似于富文本区域的东西,但使用可编辑的区域<iframe>.我需要类似的东西<div>.
我不想使用替换文本框.

我有contentEditable元素(可以是p,div,...),我想在其中得到插入符号(光标).我通常可以用这段代码实现它:

var position = window.getSelection().getRangeAt(0).startOffset;

这个工作正常,而元素只包含文本.但是当元素包含一些HTML格式时,返回的位置相对于包含的HTML元素中的插入位置.

我们假设contentEditable元素的内容是这样的:

AB<b>CD</b>EF

如果插入符号在内部<b></b>,让我们说在C和D之间,上面代码的返回位置是1而不是3(从contentEditable元素的内容开始算起)

任何人都可以提出解决方案吗？

我contenteditable在SAFARI/CHROME上有换行问题.当我在contentEditable上按"return" <div>,而不是创建一个<br>(像Firefox),他们创建一个新的<div>:

<div>Something</div>
<div>Something</div>

看起来像(在contentEditable DIV上):

Something
Something

但是在清理(删除<div>)之后,我得到了这个:

SomethingSomething

在Firefox中,contenteditable是:

Something
<br>
Something

卫生处理后看起来一样:

Something
Something

是否有任何解决方案可以跨浏览器"规范化"这个？

我已经在Make a <br>而不是<div> </ div>上找到了这个代码,只需在一个contenteditable上按Enter键

$(function(){

  $("#editable")

  // make sure br is always the lastChild of contenteditable
  .live("keyup mouseup", function(){
    if (!this.lastChild || this.lastChild.nodeName.toLowerCase() != "br") {
      this.appendChild(document.createChild("br"));
     }
  })

  // use br instead of div div
  .live("keypress", function(e){
    if (e.which == 13) {
      if (window.getSelection) {
        var …

对于我在我工作的公司开发的应用程序,我们需要一个支持在基于JS的Web应用程序中插入表情符号的输入.我们目前正在使用带有表情符号短代码(即':-)')的输入,并希望切换到插入实际的图形图像.

我们最初的计划是使用contenteditable <div>.我们正在使用监听器来执行粘贴事件以及不同的键/鼠标交互,以确保没有不需要的标记进入contenteditable(我们从其容器标签中删除文本并仅留下我们自己插入的图像标签).

但是,现在的问题是如果你输入足够的内容(即它的高度增加),div会调整大小.我们不希望这种情况发生,文本只是被隐藏(即普通overflow: hidden)也是不可接受的.所以:

有没有办法让contenteditable div表现得像单行输入？

我最喜欢,如果有一个相对简单的属性/ css属性,我错过了将做我想要的,但如果有必要CSS + JS建议也将不胜感激.

我有一个令人满意的div,我需要在插入位置插入文本,

这可以在IE中轻松完成 document.selection.createRange().text = "banana"

有没有类似的方法在Firefox/Chrome中实现这一点？

(我知道这里存在一个解决方案,但它不能在contenteditable div中使用,看起来很笨拙)

谢谢!

除了新的Google Docs之外,我见过的所有其他WYSIWYG基于网络的富文本编辑器(ckeditor,tinymce,旧的Google Docs)都基于contenteditable或designMode.我个人讨厌使用这些编辑器.在整个体验变成沮丧的练习之前,它不需要太多的格式化或复制/粘贴.返回突然开始获得双倍间距,通过从其他HTML源粘贴引入无意的格式,撤消的/重做完全被破坏,格式变得难以控制等等.

我相信这是Google Docs推出自己更受限制的非HTML格式化引擎的原因之一.是否有任何类似的开源库？提前致谢.

我试图使用ngModel双向绑定div的contenteditable输入内容,如下所示:

<div id="replyiput" class="btn-input"  [(ngModel)]="replyContent"  contenteditable="true" data-text="type..." style="outline: none;"    ></div> 

但它无法正常工作并发生错误:

EXCEPTION: No value accessor for '' in [ddd in PostContent@64:141]
app.bundle.js:33898 ORIGINAL EXCEPTION: No value accessor for ''