【问题标题】:How can i find out which character gets deleted in a tinymce editor on backspace (before it actually gets deleted)?如何找出在退格键上的 tinymce 编辑器中删除了哪个字符(在实际删除之前)?
【发布时间】:2011-06-15 14:57:49
【问题描述】:

假设 tinymce 编辑器中的光标位置在段落内。 当用户点击退格时,我需要知道哪个字符将被删除。 在删除字符之前必须知道这一点(onKeyDown 可以,onKeyUp 为时已晚)。

我怎样才能知道退格键删除了哪个字符(在实际删除之前)?

【问题讨论】:

  • 我想知道你为什么要这样做?这个问题可能有更好的解决方案。
  • 我们在编辑器文本中有不可见的软连字符,当用户按下退格键时,我需要确定其中一个软连字符是否会被删除,以便确定是否有必要删除一个额外的字符,否则用户将看不到按退格键会删除任何内容(即使确实如此,但要删除的软连字符不可见)

标签: javascript jquery editor tinymce


【解决方案1】:

上面的代码没有考虑段落中间的退格,或者整个选择的退格。尝试将 the a-tools plugin 之类的东西(尽管还有其他几个类似的东西)与以下事件处理程序结合使用:

jQuery('input, textarea').keydown(function(e) {
  if(e.keyCode === 8) {
    var selection = jQuery(this).getSelection();
    var selStart  = (selection.length) ? selection.start : selection.start - 1;
    var selEnd    = selection.end;
    alert(jQuery(this).val().slice(selStart, selEnd));
  }
});

【讨论】:

  • 我没有输入元素或文本区域,而是内容可编辑的 iframe,但如果此代码适用,我会尝试
  • 当我使用 "$( ed.getDoc() ).keydown(function(e) {..." (ed.getDoc 返回 iframes 文档) 时,这没有定义
  • 我现在没有时间写一些代码,但是您是否尝试过查看tinyMCE.get('foo').selection 属性? foo 是你的编辑的名字。
  • 是的,我熟悉 tinymce 选择。这里的问题是我无法为启动时在编辑器中创建的每个段落分配事件处理程序
【解决方案2】:

在我的一个插件中我设置了 onKeyDown

ed.onKeyDown.add(function(ed, evt) {
  if (paragraph && evt.keyCode == 8 && ed.selection.isCollapsed()) {

        //insert special marker char
    var value = '<span id="__ircaret" class="ircaret">\u2060</span>';
    ed.selection.setContent(value, {format : 'raw', no_events: 1});

    // node is the dom node the caret is placed in
    var node = ed.selection.getNode();
    var node_content = $(node).text();

    var position = node_content.search('\u2060');

        // this is the character
    var char_vor_cursor = position != 0 ? node_content.slice(position - 1, position) : '';

    // Test for soft-hyphen
    if (char_vor_cursor != '' && char_vor_cursor.charCodeAt(0) == 173) {
        // correct innerHTML
                var text_after_backspace = node_content.slice(0, position - 1) + '<span id="__ircaret" class="ircaret">\u2060</span>' +  node_content.slice(position + 1);
        node.innerHTML = text_after_backspace;
    }
    var caret_node = $(node).find('#__ircaret').get(0);

    // select caretnode and remove
    ed.selection.select(caret_node);
    $(ed.getBody()).find('.ircaret').remove();
  }
}

【讨论】:

  • 什么是变量node
  • @JoelWorsham:对不起。 node = ed.selection.getNode();
  • 我可以得到位置和字符,但不能删除它们。为什么?
  • 知道了:char_vor_cursor.charCodeAt(0) == 173 :)
猜你喜欢
  • 2012-12-19
  • 1970-01-01
  • 2018-12-25
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-10-18
相关资源
最近更新 更多