javascript - contentEditable 在出现新行时插入 br

标签 javascript html contenteditable

A contentEditable具有自动换行功能,当您达到可编辑区域的宽度时创建一个新行。这很好,但之后我正在解析它的内容,我需要它添加一个 <br>当它这样做时。我已经尝试了我能想到的一切,但我无法实现。收到任何帮助。

最佳答案

这是不可能的,换行点是“浏览器自行决定”,因此容易受到字体大小差异、未安装字体、字体渲染引擎、抗锯齿设置等的影响。换行点是,可以这么说,从浏览器的 Angular 来看,“不是你的问题”,因此它不会泄露这些信息。

理论上 您可以在动态调整大小和类似样式的 div 中逐字重建 JS 中的内容,并监视高度何时发生变化 - 这就是换行符出现的地方。不过,为了获得不可靠的结果,这将是一大堆糟糕的代码。

我忍不住觉得你在要求一个 XY-solution在这里 - 如果您需要在给定点换行,让最终用户在他想要的时候给他们。只需将 overflow:auto;white-space:nowrap 添加到可编辑元素即可强制他们这样做。 Example here .

关于javascript - contentEditable 在出现新行时插入 br,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20926285/

相关文章:

html - 在 HTML 代码中插入空行是一个好习惯吗?

javascript - TinyMCE Body.contentEditable=false 在 Firefox 中不起作用

javascript - 如何制作可编辑的 bootstrap html 表单

javascript - 使用 Jquery 更改日期格式

html - 使用 CSS 创建 block 悬停效果的最佳实践

jquery - 单击另一个元素时不要失去焦点

AngularJS:限制自定义 contenteditable 指令中的用户输入

javascript - 菜单悬停子菜单 - 更长的时间

javascript - 循环中 document.getElementById 的结果保持不变

javascript - 添加事件监听器 Javascript 的问题