Jquery 在 Redactor 文本编辑器中获取突出显示的文本答案

【问题标题】：Jquery get highlighted text in Redactor text editorJquery 在 Redactor 文本编辑器中获取突出显示的文本
【发布时间】：2012-07-22 16:07:48
【问题描述】：

我正在使用一个出色的 jquery 文本编辑器，名为 Redactor。我正在尝试添加一个新按钮，单击该按钮会获取在文本编辑器中突出显示的文本。

脚本允许通过添加以下设置来添加新按钮：

buttonsCustom: {
        button1: {
            title: 'Button', 
            callback: testButton //executes callback on button click
        } 
}

然后在回调中我想得到突出显示的文本

function testButton(obj, event, key)
{
     alert(highlighted_text);
}

我彻底查看了文档，但无法获得突出显示的文本。我尝试了其他功能，例如...

function getSelText() {
  var txt = '';
  if (window.getSelection) {
    txt = window.getSelection();
  } else if (document.getSelection) {
    txt = document.getSelection();
  } else if (document.selection) {
    txt = document.selection.createRange().text;
  } else return;
  return txt;
}

...但是文本编辑器脚本已经有办法做到这一点，最好使用它。

在脚本中，我发现文本选择功能位于第 1719 行，但不知道如何将其用于自定义按钮。

任何有Redactor经验的人，请帮忙！

【问题讨论】：

标签： jquery wysiwyg text-editor redactor

【解决方案1】：

选择你的毒药（两种方法都适用于 Firefox 和 IE）：

方法一：未记录的内部函数

有一个名为 getSelection 的内部函数，但它不是公共 API 的一部分。

您可以使用$('#redactor_content').data('redactor').getSelection() 调用它。

方法二：复制功能

现在，如果您不想依赖访问 Redactor 的内部，您可以将实现复制到您自己的函数中，将访问内部变量替换为调用 getDoc()：

function getRedactorSelection(elem)
{
    var doc = elem.getDoc().get(0);
    if (doc.getSelection)
    {
        return doc.getSelection();
    }
    else if (doc.selection)
    {
        return doc.selection.createRange();
    }
};

用法：getRedactorSelection($('#redactor_content'))

好处是您可以避免更改 Redactor 的内部函数的命名和调用方式，但坏处是您的代码不再独立于浏览器。

【讨论】：

太棒了！方法一有效，但在资源管理器中返回 [object]
在 IE 上选择的是 TextRange，所以你必须调用 .text 来获取字符串。这确实使该方法不那么吸引人......

【解决方案2】：

更新：Redactor 添加了一个新功能来获取选定的 html。

$('#redactor').getSelected();

【讨论】：

【解决方案3】：

你可能需要这个：$('#redactor_content').getDoc()[0].getSelection();

试试这个：

转至：http://redactorjs.com/docs/examples/fixed/，
选择一些文字
在 Firefox（或 Chrome）中打开控制台并输入：

alert($('#redactor_content').getDoc()[0].getSelection())
按 Enter 或单击运行。

【讨论】：

谢谢，除了在资源管理器上之外似乎有效（不足为奇..）。