Tag: contenteditable

将光标处的内容插入到内容可编辑的div中

我有一个可以理解的div,我需要在插入位置插入文本, 这可以很容易地在IE中通过document.selection.createRange().text = "banana" 有没有类似的方式在Firefox / Chrome中实现? (我知道这里存在一个解决scheme,但是不能用在contenteditable div中,而且看起来很笨拙) 谢谢!

当contenteditable被改变时触发一个事件

当div值被改变时,我怎样才能触发一个事件? <div class="changeable" contenteditable="true"> Click this div to edit it <div> 所以,当它的内容改变时,我想创build一个提醒和/或做其他事情: $('.changeable').text().change(function() { alert('Handler for .change() called.'); });

可满足的单线input

对于我们在我工作的公司开发的应用程序,我们需要一个支持在基于JS的Web应用程序中插入表情符号的input。 我们目前正在使用表情符号(即:-))的input,并希望切换到插入实际的graphics图像。 我们原来的计划是使用contenteditable <div> 。 我们使用监听器进行粘贴事件以及不同的键/鼠标交互,以确保没有不必要的标记进入contenteditable(我们从文档的容器标签中去除文本,只留下我们自己插入的图像标签)。 不过,现在的问题是,如果你input足够的内容(即高度增加),div就会resize。 我们不希望发生这种情况,也不能让文本被隐藏(即简单的overflow: hidden )。 所以: 有没有办法让contenteditable div行为像一个单行input? 我最好喜欢,如果有一个相对简单的属性/ CSS属性,我已经错过了将做我想做的,但如果有必要的CSS + JS的build议也将不胜感激。

把重点放在div contenteditable元素上

我有一个<div contenteditable=true> ,我通过所见即所得的方式定义了一些元素。 例如<p> , <h1>等。我想直接把重点放在这个元素之一上。 例如在<p id="p_test"> 。 但似乎focus()函数不能用于<div>元素, <p>元素… 有没有另一种方法来定义我的情况下的重点?

AngularJS和contentEditable两种方式绑定不能按预期工作

为什么在下面的例子中,初始渲染值是{{ person.name }}而不是David ? 你将如何解决这个问题? 现场示例 HTML: <body ng-controller="MyCtrl"> <div contenteditable="true" ng-model="person.name">{{ person.name }}</div> <pre ng-bind="person.name"></pre> </body> JS: app.controller('MyCtrl', function($scope) { $scope.person = {name: 'David'}; }); app.directive('contenteditable', function() { return { require: 'ngModel', link: function(scope, element, attrs, ctrl) { // view -> model element.bind('blur', function() { scope.$apply(function() { ctrl.$setViewValue(element.html()); }); }); // model -> view […]

从contentEditable div中提取文本

我有一个div设置为contentEditable和“ white-space:pre ”样式,所以它保持像linebreaks的东西。 在Safari,FF和IE中,div看起来很像,工作原理也一样。 一切都很好。 我想要做的是从这个div中提取文本,但以这种方式不会丢失格式 – 特别是换行符。 我们正在使用jQuery,其text()函数基本上是一个预定义的DFS,并将DOM分支中的所有内容粘合到一起。 这会丢失格式。 我看了一下html()函数,但是似乎所有三个浏览器在我的contentEditable div中都会在幕后生成实际的HTML。 假设我把这个input到我的div中: 1 2 3 这是结果: Safari 4: 1 <div>2</div> <div>3</div> Firefox 3.6: 1 <br _moz_dirty=""> 2 <br _moz_dirty=""> 3 <br _moz_dirty=""> <br _moz_dirty="" type="_moz"> IE 8: <P>1</P><P>2</P><P>3</P> 啊。 这里没什么很一致的。 令人惊讶的是,MSIE看起来是最健康的! (大写P标签和所有) 该div将dynamic设置样式(字体,颜色,大小和alignment),这是使用CSS完成的,所以我不确定我是否可以使用pre标记(在我使用Google发现的某些页面上提到过)。 有谁知道任何JavaScript代码和/或jQuery插件或从contentEditable div中提取文本的方式,以保留换行符? 如果我不需要,我宁愿不重新创build一个parsing轮。 更新:我从jQuery 1.4.2中删除了getText函数,并修改了它的空白大部分完好无损(我只chnaged一行,我添加一个换行符); function extractTextWithWhitespace( elems ) { var […]

任何所见即所得的富文本编辑器不使用HTML(contenteditable或designMode),一个la(新的)Google文档?

除了新的Google文档,我所见过的所有其他所见即所得的基于Web的富文本编辑器(ckeditor,tinymce,旧的Google Docs)都基于contenteditable或designMode。 我个人讨厌使用这些编辑器。 在整个体验变成挫折之前,并不需要太多格式化或复制/粘贴。 返回突然间开始获得双间隔,意想不到的格式化通过从其他HTML源粘贴引入,撤消/重做被完全破坏,格式化变得极其难以控制,等等。 我相信这是Google Docs推出更受限制的非HTML格式引擎的原因之一。 那里有没有提供类似的开源库? 提前致谢。

处理contentEditable DIV上的换行符

SAFARI / CHROME上的可用换行符有问题。 当我在contentEditable <div>上按下“return”,而不是像Firefox那样创build一个<br> ,他们创build一个新的<div> : <div>Something</div> <div>Something</div> 看起来像(在contentEditable DIV上): Something Something 但是在消毒(去除<div> )后,我得到这个: SomethingSomething 在Firefox中,可以contenteditable是: Something <br> Something 那消毒后看起来是一样的: Something Something 有什么解决scheme可以跨浏览器“规范化”吗? 我发现这个代码是通过在contenteditable上按下Enter来创build一个<br>而不是<div> </ div> $(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 […]

如何使HTML <div>元素可编辑跨浏览器?

你知道如何使用JavaScript编辑<div>吗? 我正在寻找跨浏览器的解决scheme。 类似于富文本区域,但使用可编辑的<iframe> 。 我需要一个类似的<div> 。 我不想使用replace文本框。

contenteditable中的占位符 – 焦点事件问题

我一直在试图问这个,没有任何解释/certificate错误发生的工作示例的运气。 所以这里是另一个尝试: 我试图在contenteditable DIV上复制一个占位符效果。 核心概念很简单: <div contenteditable><em>Edit me</em></div> <script> $('div').focus(function() { $(this).empty(); }); </script> 这可能有些工作,但是如果占位符包含HTML,或者如果有其他处理正在进行,可编辑的DIV的文本插入符将被删除,并且用户必须重新点击可编辑的DIV才能开始input(即使它是仍然重点): 例如: http : //jsfiddle.net/hHLXr/6/ 我不能在处理程序中使用焦点触发器,因为它会创build一个事件循环。 所以我需要一种方法在可编辑的DIV中重新设置插入光标,或者以其他方式重新对焦。