单击tinymce容器中的输入文本时，有什么方法可以防止失去焦点？

Question

我制作了这个 tinymce fiddle 来展示我所说的话。

在编辑器中高亮文本，然后点击输入文本，tinyMCE 中的高亮丢失（显然）。

现在，我知道这并不容易，因为内联编辑器和输入文本都在同一个文档中，因此，焦点只有一个。但是，当我单击输入文本时，是否有任何 tinymce 方法可以像“未聚焦”突出显示（灰色）一样？

我这么说是因为我有一个自定义的颜色选择器，这个颜色选择器有一个输入，您可以在其中输入 HEX 值，当单击“确定”时，它会 execCommand 对所选文本进行颜色更改，但它看起来很难看，因为高光消失了。

我不想使用 iframe，我知道使用非内联编辑器 (iframe) 是一种解决方案，但由于某些原因，我不能使用 iframe 文本编辑器。

这里有什么建议吗？谢谢。

P.S：题外话，你们中的任何人都知道为什么我无法访问 tinyMCE Fiddle 中的 tinymce 对象吗？看起来 tinyMCE 全局变量已被页面本身的 tinymce 选择 dom 元素覆盖。我无法执行 tinyMCE 命令，哈哈。

Answer 1

另一种解决方案：

http://fiddle.tinymce.com/sBeaab/5

P.S：题外话，有没有人知道为什么我不能访问 tinyMCE Fiddle 中的 tinymce 对象？看起来像 tinyMCE 全局 var 被页面的 tinymce 选择 dom 元素覆盖 本身。我无法执行 tinyMCE 命令，哈哈。

嗯，你可以访问 tinyMCE 变量，甚至可以执行命令。

Answer 2

这一行是错误的

var colorHex = document.getElementById("colorHex")

colorHex 包含输入元素，而不是值。

var colorHex = document.getElementById("colorHex").value

现在它可以工作了（neolist 无法加载，所以我删除了它）

http://fiddle.tinymce.com/DBeaab/1

Answer 3

我最近不得不做类似的事情。

首先，你不能同时“选择”两个不同的元素。因此，为了实现这一点，您将需要模仿浏览器的内置“选定文本突出显示”。为此，您必须在文本中插入 span 以模拟突出显示，然后捕获 mousedown 和 mouseup 事件。

这是来自 StackOverflow 用户“fullpipe”的小提琴，它说明了我使用的技术。

http://jsfiddle.net/fullpipe/DpP7w/light/

$(document).ready(function() {
        var keylist = "abcdefghijklmnopqrstuvwxyz123456789";

        function randWord(length) {

            var temp = '';

            for (var i=0; i < length; i++)

            temp += keylist.charAt(Math.floor(Math.random()*keylist.length));

        return temp;
    }

    for(var i = 0; i < 500; i++) {
        var len = Math.round(Math.random() * 5 + 3);
        document.body.innerHTML += '<span id="'+ i +'">' + randWord(len) + '</span> ';
    }

    var start = null;
    var end = null;

    $('body').on('mousedown', function(event) {
        start = null;
        end = null;
        $('span.s').removeClass('s');
        start = $(event.target);
        start.addClass('s');
    });

    $('body').on('mouseup', function(event) {
        end = $(event.target);
        end.addClass('s');
        if(start && end) {
            var between = getAllBetween(start,end);

            for(var i=0, len=between.length; i<len;i++)
                between[i].addClass('s');

            alert('You select ' + (len) + ' words');
        }
    });


});

function getAllBetween(firstEl,lastEl) {

    var firstIdx = $('span').index($(firstEl));
    var lastIdx = $('span').index($(lastEl));

    if(lastIdx == firstIdx)
        return [$(firstEl)];

    if(lastIdx > firstIdx) {
        var firstElement = $(firstEl);
        var lastElement = $(lastEl);
    } else {
        var lastElement = $(firstEl);
        var firstElement = $(lastEl);
    }

    var collection = new Array();
    collection.push(firstElement);
    firstElement.nextAll().each(function(){
        var siblingID  = $(this).attr("id");
        if (siblingID != $(lastElement).attr("id")) {
            collection.push($(this));
        } else { 
            return false;
        }
    });

    collection.push(lastElement);
    return collection;
}

正如您在小提琴中看到的那样，无论页面上其他地方的焦点如何，右窗格中的乱码都会保持突出显示。

此时，您将不得不将颜色更改应用于所有匹配的跨度。