【问题标题】:Paste only plain-text into editable div仅将纯文本粘贴到可编辑的 div 中
【发布时间】:2010-08-24 02:08:34
【问题描述】:

我需要能够允许用户粘贴到可编辑的 div 中(通过用户选择的任何内容:右键单击和粘贴、快捷键等),但我想放弃格式并只采用纯文本。

我不能使用 textarea,因为如果用户启动的事件应用了 div 将允许基本格式(粗体和斜体)。

onbeforepaste 事件看起来很有希望,但根据 quirksmode,支持非常有限,无法使用。

【问题讨论】:

标签: javascript events text dom-events paste


【解决方案1】:

这很棘手,但并非不可能。你可以做的事情是相当复杂的,而且有点小技巧,它适用于 Firefox 2+、IE 5.5+ 和最近的 WebKit 浏览器,如 Safari 4 或 Chrome(在旧版本上未经测试)。 TinyMCE 和 CKEditor 的最新版本在其基于 iframe 的编辑器上使用了这种技术:

  1. 使用按键事件处理程序检测 ctrl-v / shift-ins 事件
  2. 在该处理程序中,保存当前用户选择,向文档添加屏幕外的 textarea 元素(例如左侧 -1000 像素),关闭 contentEditable 并在 textarea 上调用 focus(),从而移动插入符号并有效地重定向粘贴
  3. 在事件处理程序中设置一个非常简短的计时器(例如 1 毫秒)以调用另一个函数来存储 textarea 值、从文档中删除 textarea、重新打开 contentEditable、恢复用户选择并将文本粘贴到其中。

请注意,这仅适用于键盘粘贴事件,不适用于从上下文或编辑菜单粘贴。 paste 事件会更好,但是当它触发时,将插入符号重定向到 textarea 为时已晚(至少在某些浏览器中)。

【讨论】:

    【解决方案2】:

    对于 Ctrl+v 我检查了 keyup 上可编辑 div 的内容。您可以修改该事件中的内容。我正在使用 nicedit 文本编辑器。 这不适用于从右键单击粘贴 -> 粘贴。 对于“粘贴”,我必须使用 settimeout 修改内容。

    .addEvent('paste', function(e) {
            setTimeout(function(){
                if(condition){
                    //modify content
                }
            },350);
        });
    

    【讨论】:

      【解决方案3】:

      它也可以通过使用 javaScript 来破解。希望这会有所帮助

      我创建了一个示例here

      <div contentEditable="true" id="clean-text-div"> </div>
      <div id="clean-btn"> Clean Me</div>
      <div id="message"> paste html content and clean background HTML for pure text</div>
      
      
      $("#clean-btn").click(function(){
          $("#clean-text-div").text($("#clean-text-div").text());
          $("#message").text("Your text is now clean");
      });
      

      【讨论】:

        【解决方案4】:

        您是否尝试过诸如“粘贴”或“输入”之类的事件?然后你可以使用正则表达式来触发所有 html 标签

        $(document).bind('paste', function(e){ alert('pasting!') })
        

        http://www.hscripts.com/scripts/JavaScript/remove-html-tag.php

        有一个关于粘贴事件的讨论,您还应该阅读:
        Catch paste input

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 2015-09-08
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2011-05-06
          相关资源
          最近更新 更多