草庐IT

contenteditables

全部标签

javascript - 使用 AngularJs 将 html 内容作为纯文本粘贴到 contenteditable div 中

这个问题在这里已经有了答案:JavaScriptgetclipboarddataonpasteevent(Crossbrowser)(22个答案)关闭5年前。我想将从某个文档(pdf、docx、html)中选择的文本粘贴到contenteditable类型的div中。现在,我想在呈现之前删除剪贴板文本的所有格式。所以,最终粘贴的内容应该是纯文本。此场景的模拟可以是将内容粘贴到Windows记事本中。如何使用AngularJs完成此操作。或者存在任何其他javascript库来完成此操作。更新:我可以使用以下代码将剪贴板作为文本获取。editor.addEventListener("pa

javascript - 使用 AngularJs 将 html 内容作为纯文本粘贴到 contenteditable div 中

这个问题在这里已经有了答案:JavaScriptgetclipboarddataonpasteevent(Crossbrowser)(22个答案)关闭5年前。我想将从某个文档(pdf、docx、html)中选择的文本粘贴到contenteditable类型的div中。现在,我想在呈现之前删除剪贴板文本的所有格式。所以,最终粘贴的内容应该是纯文本。此场景的模拟可以是将内容粘贴到Windows记事本中。如何使用AngularJs完成此操作。或者存在任何其他javascript库来完成此操作。更新:我可以使用以下代码将剪贴板作为文本获取。editor.addEventListener("pa

html - 如何使 HTML5 contenteditable div 只允许 firefox 中的文本?

我想制作具有仅允许文本的contentEditable属性的div。使用Chrome可以轻松实现:但是它在Firefox中不起作用。有没有办法在Firefox中制作纯文本的contenteditablediv?我知道这是可能的,因为GooglePlus有这样的div,但我不知道他们是怎么做到的。 最佳答案 我自己也遇到过这个问题。这是我在Firefox和Chrome中测试过的解决方案:确保contenteditablediv有csswhite-space:pre,pre-line或pre-wrap以便它显示\n作为新行。覆盖“ent

html - 如何使 HTML5 contenteditable div 只允许 firefox 中的文本?

我想制作具有仅允许文本的contentEditable属性的div。使用Chrome可以轻松实现:但是它在Firefox中不起作用。有没有办法在Firefox中制作纯文本的contenteditablediv?我知道这是可能的,因为GooglePlus有这样的div,但我不知道他们是怎么做到的。 最佳答案 我自己也遇到过这个问题。这是我在Firefox和Chrome中测试过的解决方案:确保contenteditablediv有csswhite-space:pre,pre-line或pre-wrap以便它显示\n作为新行。覆盖“ent

javascript - contenteditable=false 在 contenteditable=true

问题:我在Chrome和Opera中观察到一个不受欢迎的行为,当一个连接两个p通过删除它们之间的分隔来标记。Chrome和Opera删除contenteditable=false元素(小部件)和之后的文本。示例:exampleonjsfiddlehtml:Thisisthefirstparagraph.←Placeyourcursorhereandpressbackspace.widgetTextafterwidgetCSS:.widget{display:inline-block;padding:5px;background-color:gray;}.editor{font

javascript - contenteditable=false 在 contenteditable=true

问题:我在Chrome和Opera中观察到一个不受欢迎的行为,当一个连接两个p通过删除它们之间的分隔来标记。Chrome和Opera删除contenteditable=false元素(小部件)和之后的文本。示例:exampleonjsfiddlehtml:Thisisthefirstparagraph.←Placeyourcursorhereandpressbackspace.widgetTextafterwidgetCSS:.widget{display:inline-block;padding:5px;background-color:gray;}.editor{font

javascript - 使用 insertHTML 的 execCommand 的 iframe 撤消/重做(contenteditable)

因此,目前我正在开发一个小按钮,要求用户输入视频链接,然后我将该链接放入iframe中,然后使用document.execCommand("insertHTML",false,"'>")将其插入到contenteditable中。.这很好用,视频被嵌入到contenteditable中.唯一的问题是,如果我这样做Command+Z或按undo在Safari,iframe不会因为某种原因被撤消。它适用于Firefox,Chrome,Edge,和Opera,但出于某种原因我认为safari不明白如何undo它。除了实现我自己的撤消/重做堆栈之外,是否有任何解决方法?我只想在用户选择undo

javascript - 使用 insertHTML 的 execCommand 的 iframe 撤消/重做(contenteditable)

因此,目前我正在开发一个小按钮,要求用户输入视频链接,然后我将该链接放入iframe中,然后使用document.execCommand("insertHTML",false,"'>")将其插入到contenteditable中。.这很好用,视频被嵌入到contenteditable中.唯一的问题是,如果我这样做Command+Z或按undo在Safari,iframe不会因为某种原因被撤消。它适用于Firefox,Chrome,Edge,和Opera,但出于某种原因我认为safari不明白如何undo它。除了实现我自己的撤消/重做堆栈之外,是否有任何解决方法?我只想在用户选择undo

javascript - Contenteditable 高度动画 : animate only after a line is deleted

这是我之前question的延续.我设法通过添加一个条件e.which===13来修复“动画暂停每次连续击键”,当Enter键是按下。这是前一个的工作原理:如您所见,在输入换行符和连续击键后,动画会滞后,这意味着动画会在每次击键时执行。这些是修改后的,只有在Enter被按下后才会有动画:它运行流畅(虽然在录制过程中有点滞后)。以下是删除每个字符(不是长按)时的工作原理:如您所见,它的动画效果不佳,因为当您连续删除每个字符时,动画会暂停,就像第一次尝试一样。所以我现在要实现的是相反的,删除换行后动画流畅。这是一个实时代码:varkAnimationSpeed=250;varkPaddin

javascript - Contenteditable 高度动画 : animate only after a line is deleted

这是我之前question的延续.我设法通过添加一个条件e.which===13来修复“动画暂停每次连续击键”,当Enter键是按下。这是前一个的工作原理:如您所见,在输入换行符和连续击键后,动画会滞后,这意味着动画会在每次击键时执行。这些是修改后的,只有在Enter被按下后才会有动画:它运行流畅(虽然在录制过程中有点滞后)。以下是删除每个字符(不是长按)时的工作原理:如您所见,它的动画效果不佳,因为当您连续删除每个字符时,动画会暂停,就像第一次尝试一样。所以我现在要实现的是相反的,删除换行后动画流畅。这是一个实时代码:varkAnimationSpeed=250;varkPaddin