问题标签 [contenteditable]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
3 回答
4148 浏览

javascript - 如何捕捉 contentEditable 粘贴事件?

我有一个很棒的可编辑文本区域,带有wysihat和 contentEditable。我真的需要一种拦截粘贴事件的方法来阻止它们,或者在允许插入之前处理它们的 DOM。人们可以将整个网页粘贴到可编辑区域中,这有点疯狂。

这可能吗?

来吧未来,到我家门口。HTML5 大师,火!

0 投票
1 回答
3081 浏览

javascript - contentEditable div 中的 Span 标签需要按键事件

我的 html 代码中有以下 div:

我使用contentEditablediv 作为制作自动扩展文本框的简单、跨浏览器的方法。我还在对用户输入此 div 的内容进行输入验证。它应该是用逗号分隔的电子邮件地址列表。当用户尝试提交不正确的信息时,我的 Javascript 会将输入分块并以红色突出显示所有不正确的块。

数组 'invalids' 保存所有坏块的索引。到目前为止一切正常。但是一旦用户开始在红色文本中输入,我需要红色消失,但就在那个范围内。例如,如果有两个坏块,每个都以红色突出显示,并且用户开始修复一个,则另一个需要保持红色。

我尝试将事件侦听器附加到跨度:

但该事件永远不会发生,即使用户编辑红色文本也是如此。使用浏览器的开发人员工具,我可以看到事件处理程序就在那里,它只是永远不会被触发。是contentEditablediv 上的属性导致跨度接收事件吗?我也尝试过自己制作跨度contentEditable,但行为仍然相同。

0 投票
1 回答
1959 浏览

html - Firefox 中 contentEditable div 中的 CTRL-A 选择 div 本身

我一直在努力寻找解决这个问题的最佳方法。也许有人会从中获得乐趣。

我有一个 contentEditable="true" 的 div,它几乎适用于所有东西。当用户使用 CTRL-A 选择所有内容然后复制/粘贴时,Firefox 内部是一个例外。选择操作包括 div 本身的标签!据我搜索,这个错误应该是由 Mozilla 修复的,但事实并非如此。div 只是不断地粘贴在自身内部。

一旦用户复制了剪贴板,我就考虑对其进行编辑,但是除非您使用 Flash,否则 Firefox 似乎对此不太友好,这不是很理想。当用户进行粘贴时,我还考虑在另一端捕获有问题的标签,但粘贴事件在任何 javascript 事件处理程序完成后将实际文本放入 div 中。有没有办法在粘贴文本发生之前对其进行编辑?

0 投票
4 回答
2969 浏览

html - 如何在火狐中制作可编辑的跨度

即使通过在 span 标签中设置 contentEditable="true" ,在火狐中这个标签也无法编辑,而在 IE 中没有问题。我能做些什么?

0 投票
1 回答
1986 浏览

jquery - jQuery 可对 contenteditable 项目进行排序

如果我对 contenteditable 项目执行“jquery sortable”,则该项目将永远不可编辑。

我应该提到,在 IE 中一切正常,我在 FF 3.6.8 中遇到了这个问题

0 投票
1 回答
4975 浏览

javascript - 从具有 contentEditable 的元素中删除调整大小手柄和边框

我遇到的问题是 IE 中的 contentEditable 属性。(有些事情永远不会改变)。

问题是我得到了调整大小的句柄,<li>当元素处于焦点时,它们周围的边框很粗。

知道如何删除它们吗?非常欢迎使用 CSS 或 Javascript 技巧!

0 投票
3 回答
169 浏览

javascript - 选择文本时使鼠标单击无响应

我目前正在开发所见即所得的网络编辑器。

我遇到的问题有点复杂。

当我选择一段文本并单击工具上的某些内容时,该命令有效,但文本立即变为未选中状态。

就像我们在任何网页中选择文本时,当我们单击其他内容时,文本变为未选中状态,一切都恢复正常。

有没有办法在已经选择文本时抑制鼠标单击以使文本保持选中状态?

提前致谢。

0 投票
2 回答
2766 浏览

javascript - Javascript 在 ContentEditable div 中设置插入符号

我有一个可内容编辑的 div 标签,以便用户可以输入 div。有一个功能可以在用户按下按钮时将链接添加到 div 中。我希望插入符号位于链接之后,以便用户可以继续输入。链接可以多次插入。

示例代码:

我需要此代码才能工作:IE、Firefox、Opera、Safari 和 Chrome。

任何人都可以提供任何帮助吗?

0 投票
1 回答
1352 浏览

javascript - 如何创建一个 html 输入文本区域,以便我可以为某些单词添加下划线或格式化?

我想要一个输入字段,我可以让javascript为输入字段的不同部分设置某些属性。一个简单的例子来演示我想做的事情:假设我想在输入文本区域中为所有诅咒词加下划线。因此,当插入新字母时,javascript 会检查输入文本区域,并且对于与我识别的诅咒词数组匹配的任何单词,它会在单词下划线。请注意,我不希望用户/客户端能够设置文本的任何属性,我只是希望 javascript 能够以不同的方式格式化某些单词(因此,没有工具栏或类似的东西)。我还希望该框在其他所有方面看起来都与常规文本区域完全一样。

我已经知道一些富文本编辑器(如 juju 编辑器和 lwrte)以及一些语法荧光笔,但我不确定它们是否符合我的要求。

那么,有人知道可以让我这样做的工具吗?

谢谢

0 投票
3 回答
9077 浏览

c# - 如何在 Sharepoint 2010 中扩展 OOTB 内容编辑器 Web 部件?

我需要一个包含标题的纯文本字段、缩略图的图像和 HTML 内容可编辑块的 Web 部件,因此我认为最好的方法是尝试扩展现有的内容编辑器 Web 部件。不幸的是,CEWP 被标记为密封的,所以我不能对它进行子类化。我已经反映并尝试在我自己的自定义 Web 部件中重新创建该功能(有关代码,请参阅问题的结尾),但我的 CEWP 自定义版本的内容并未保留。

有谁知道我该怎么做:

  • 安全地继承 ContentEditableWebPart,或者
  • 在自定义 Web 部件中包含富文本块(包括 RTE 功能区),或
  • 在一个“包装器”Web 部件中托管多个 Web 部件?

提前致谢!

代码如下(阻止它编译的东西是从反射器复制的已被注释掉/更改/删除)