问题标签 [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.
javascript - 如果我对 contenteditable 项目执行“jquery sortable”,那么我将无法再将鼠标聚焦在 contenteditable 文本内的任何位置
奇怪的是,这仅在 Firefox 和 Opera 中被破坏(IE、Chrome 和 Safari 可以正常工作)。
有什么快速修复的建议吗?
p>javascript - 在 contentEditable 元素上拖放
互联网上有许多所见即所得的编辑器,但我还没有找到一个实现某种形式的拖放实现的编辑器。
创建自己的编辑器很容易,但我希望用户能够从可编辑区域外拖动元素(即标记),并让他们将其放置在可编辑区域内他们选择的位置。
在可编辑元素的特定位置注入 html 很容易,但是当用户在可编辑区域中的某个元素上拖动 DIV 时,如何确定插入符号的位置。为了更好地说明我要解释的内容,请参见以下场景。
可编辑区域(处于编辑模式的 IFRAME 或 contentEditable 属性设置为 true 的 DIV)已包含以下文本:
“亲爱的,请注意……”
用户现在将表示元素列表中某个标记的元素拖到可编辑区域上,将光标移动到文本上,直到插入符号出现在文本中的逗号 (,) 之前,如上所示。当用户在该位置释放鼠标按钮时,将注入 HTML,这可能会导致如下所示:
“亲爱的 {UserFirstName},请注意……”。
我不知道是否有人做过类似的事情,或者至少知道如何使用 JavaScript 来做这件事。
任何帮助将不胜感激。
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 定义的函数将包裹字符串......(如果有任何重叠,它应该是智能的......)
javascript - ContentEditable DIV - 禁用拖放
是否可以在 contentEditable 属性设置为 true 的元素上禁用拖放功能。
我有以下 HTML 页面。
我面临的主要问题是可以将图像拖放到 DIV 中并被复制(连同标题和点击处理程序)
javascript - 做一个
代替通过在 contenteditable 上按 Enter
我在我的键盘事件处理程序中编写了一些代码来插入一个<br>
以响应按下 Enter 键:
这仅在光标位于两个字母之间时才有效,如果它在最后我需要两个<br>
-Elements。我可以检测到我是否在线路的末尾吗?或者 Enter 问题的其他一些工作想法?
我还尝试捕获正常的键事件(不按下 ctrl 键)并使用 JS 创建一个键盘事件,其中 Enter 键与 ctrl 一起按下。但这不起作用……</p>
它只需要在 Webkit/Safari 中工作......</p>
javascript - webkit stylewithcss contenteditable 不起作用?
我正在尝试使用 contenteditable 和 styleWithCss。
它似乎在 webkit 中不起作用。
每当我使用执行命令时,它都会生成一个<b>
而不是我预期的跨度。
这是一个演示:http: //jsbin.com/izomo/2/edit
选择部分文本,单击粗体按钮,然后查看 html 输出。
这是一个错误还是我做错了什么。
非常感谢你。
javascript - 将表单元素功能添加到 contenteditable div
我使用 MooTools Javascript 库。这个库在这里提供了几个非常有用的功能:http: //mootools.net/docs/more/Element/Element.Forms
问题是此功能仅适用于文本区域等“表单”元素。
现在我正在制作一个在线编辑器,对于它自己的编辑器,我使用 div 元素和内容可编辑功能。
当我想在 mootools(更多)库中使用 getCaretPosition 之类的函数时,会调用此行:
但比我得到这个错误:
似乎只有表单元素具有此选择对象(在此文档上:S?)。
有没有办法将表单功能添加到 div (或所有)元素?
javascript - 如何在 IE 的 contentEditable div 中获取选定的文本节点?
我正在尝试在 div 标签上创建一个带有 HTML5 contenteditable 的简单文本编辑器。如您所知,所选文本在 IE 中的处理方式完全不同。
我正在寻找一种方法来获取选定的文本节点(而不是文本本身),就像我可以在其他浏览器上使用“anchorNode”和“focusNode”一样。我在 IE 上发现的唯一替代方法是“parentElement()”函数,它只能选择 contenteditable div 本身。
有任何想法吗?
html - 如何将 contentEditable 变成结构化的标记编辑器?
有 LyX 和这样的编辑器试图确保您编写具有独特结构的文本。我希望 html5 contentEditable 字段具有相同的行为,除非我不知道如何。
我的要求:
- 不创建 DIV -标签。
- 文本容器外不允许出现文本。(段落、标题、前置块和内联元素)
我还需要弄清楚如何遍历内容并以这种受限形式将其推送到服务器。
(我也会喜欢关于我可以为 contenteditable 字段做的事情的好文档)
css - IE8中带有'text-align:right'的contenteditable div不显示插入符号
我正在表格单元格中创建一个 contentEditable div 来捕获用户输入。问题是,当我将文本向右对齐时,IE8 不显示文本输入插入符号。我尝试过的所有其他浏览器都可以使用。如果我不使用“text-align:right”,它会起作用。如果插入符号位于 div 最右侧以外的任何位置,它也可以工作。这是一些示例代码:
我究竟做错了什么?如果没有,我该如何解决这个问题?