问题标签 [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 投票
7 回答
10520 浏览

javascript - 如果我对 contenteditable 项目执行“jquery sortable”,那么我将无法再将鼠标聚焦在 contenteditable 文本内的任何位置

奇怪的是,这仅在 Firefox 和 Opera 中被破坏(IE、Chrome 和 Safari 可以正常工作)。

有什么快速修复的建议吗?

p>

0 投票
3 回答
6183 浏览

javascript - 在 contentEditable 元素上拖放

互联网上有许多所见即所得的编辑器,但我还没有找到一个实现某种形式的拖放实现的编辑器。

创建自己的编辑器很容易,但我希望用户能够从可编辑区域外拖动元素(即标记),并让他们将其放置在可编辑区域内他们选择的位置。

在可编辑元素的特定位置注入 html 很容易,但是当用户在可编辑区域中的某个元素上拖动 DIV 时,如何确定插入符号的位置。为了更好地说明我要解释的内容,请参见以下场景。

可编辑区域(处于编辑模式的 IFRAME 或 contentEditable 属性设置为 true 的 DIV)已包含以下文本:

“亲爱的,请注意……”

用户现在将表示元素列表中某个标记的元素拖到可编辑区域上,将光标移动到文本上,直到插入符号出现在文本中的逗号 (,) 之前,如上所示。当用户在该位置释放鼠标按钮时,将注入 HTML,这可能会导致如下所示:

“亲爱的 {UserFirstName},请注意……”。

我不知道是否有人做过类似的事情,或者至少知道如何使用 JavaScript 来做这件事。

任何帮助将不胜感激。

0 投票
2 回答
4555 浏览

javascript - 替代 execCommand('underline');

好的,有些人会知道我的意思并编辑我的问题,但他们做错了。

更好的解释:

你有一个 contenteditablediv的 text This is a Test String.。如果你现在使用execCommand('underline')Test String得到的,This is a <u>Test String</u> 如果你现在使用execCommand('strikethrough')is a Test得到的This <s>is a <u>Test</u></s><u>String</u>,这是正确的。

所以,在 HTML5<u><s>已经过时了。首先execCommand,您可以使用surroundContents()with a <span style="text-decoration:underline;">。如果您现在surroundContets()第二次使用 ,execCommand您将收到BAD_BOUNDARYPOINTS_ERR.

我想要的东西是一个函数,它execCommand在这种情况下工作,但我可以用女巫 HTML-Tag 定义的函数将包裹字符串......(如果有任何重叠,它应该是智能的......)

0 投票
6 回答
16754 浏览

javascript - ContentEditable DIV - 禁用拖放

是否可以在 contentEditable 属性设置为 true 的元素上禁用拖放功能。

我有以下 HTML 页面。

我面临的主要问题是可以将图像拖放到 DIV 中并被复制(连同标题和点击处理程序)

0 投票
2 回答
17673 浏览

javascript - 做一个
代替
通过在 contenteditable 上按 Enter

我在我的键盘事件处理程序中编写了一些代码来插入一个<br>以响应按下 Enter 键:

这仅在光标位于两个字母之间时才有效,如果它在最后我需要两个<br>-Elements。我可以检测到我是否在线路的末尾吗?或者 Enter 问题的其他一些工作想法?

我还尝试捕获正常的键事件(不按下 ctrl 键)并使用 JS 创建一个键盘事件,其中 Enter 键与 ctrl 一起按下。但这不起作用……</p>

它只需要在 Webkit/Safari 中工作......</p>

0 投票
3 回答
11391 浏览

javascript - webkit stylewithcss contenteditable 不起作用?

我正在尝试使用 contenteditable 和 styleWithCss。

它似乎在 webkit 中不起作用。

每当我使用执行命令时,它都会生成一个<b>而不是我预期的跨度。

这是一个演示:http: //jsbin.com/izomo/2/edit

选择部分文本,单击粗体按钮,然后查看 html 输出。

这是一个错误还是我做错了什么。

非常感谢你。

0 投票
2 回答
754 浏览

javascript - 将表单元素功能添加到 contenteditable div

我使用 MooTools Javascript 库。这个库在这里提供了几个非常有用的功能:http: //mootools.net/docs/more/Element/Element.Forms

问题是此功能仅适用于文本区域等“表单”元素。

现在我正在制作一个在线编辑器,对于它自己的编辑器,我使用 div 元素和内容可编辑功能。

当我想在 mootools(更多)库中使用 getCaretPosition 之类的函数时,会调用此行:

但比我得到这个错误:

似乎只有表单元素具有此选择对象(在此文档上:S?)。

有没有办法将表单功能添加到 div (或所有)元素?

0 投票
4 回答
9083 浏览

javascript - 如何在 IE 的 contentEditable div 中获取选定的文本节点?

我正在尝试在 div 标签上创建一个带有 HTML5 contenteditable 的简单文本编辑器。如您所知,所选文本在 IE 中的处理方式完全不同。

我正在寻找一种方法来获取选定的文本节点(而不是文本本身),就像我可以在其他浏览器上使用“anchorNode”和“focusNode”一样。我在 IE 上发现的唯一替代方法是“parentElement()”函数,它只能选择 contenteditable div 本身。

有任何想法吗?

0 投票
1 回答
4568 浏览

html - 如何将 contentEditable 变成结构化的标记编辑器?

有 LyX 和这样的编辑器试图确保您编写具有独特结构的文本。我希望 html5 contentEditable 字段具有相同的行为,除非我不知道如何。

我的要求:

  • 不创建 DIV -标签。
  • 文本容器外不允许出现文本。(段落、标题、前置块和内联元素)

我还需要弄清楚如何遍历内容并以这种受限形式将其推送到服务器。

(我也会喜欢关于我可以为 contenteditable 字段做的事情的好文档)

0 投票
1 回答
2275 浏览

css - IE8中带有'text-align:right'的contenteditable div不显示插入符号

我正在表格单元格中创建一个 contentEditable div 来捕获用户输入。问题是,当我将文本向右对齐时,IE8 不显示文本输入插入符号。我尝试过的所有其他浏览器都可以使用。如果我不使用“text-align:right”,它会起作用。如果插入符号位于 div 最右侧以外的任何位置,它也可以工作。这是一些示例代码:

我究竟做错了什么?如果没有,我该如何解决这个问题?