如何防止在tinymce容器之外单击输入文本时失去焦点？

Question

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

在编辑器中突出显示文本，然后点击输入文本，在tinyMCE中突出显示会丢失（显然）。

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

我之所以这么说是因为我有一个定制的颜色选择器，这个颜色选择器有一个输入框，您可以在其中键入HEX值，单击确定后，它会在所选文本上执行execCommand颜色更改，但由于突出显示丢失，看起来很丑陋。

我不想使用iframe，我知道使用非内联编辑器（iframe）是其中一种解决方案，但由于一些原因，我无法使用iframe文本编辑器。

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

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

- msqar

---

复杂，但考虑捕获选择，然后在执行命令之前重新选择它。 - dandavis

Answer 1

另一个解决方案： http://fiddle.tinymce.com/sBeaab/5 顺便说一下，你们中的任何人知道为什么我无法访问tinyMCE Fiddle中的tinymce对象吗？看起来像是页面上的tinymce select dom元素覆盖了tinyMCE全局变量。我无法执行tinyMCE命令哈哈。

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

- Thariama

---

这是一个非常好的解决方案，它使用 tinyMCE.get('textContainer') 而不是 tinyMCE.activeEditor 来使用 TinyMCE 记住的选择而不是脆弱的 DOM 选择。 - dandavis

Answer 2

这一行有错误。

var colorHex = document.getElementById("colorHex")

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

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

现在它可以工作了（neolist 无法加载，所以我将其移除了）。

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

- wasikuss

---

谢谢你的回复，但是主要问题还是焦点的问题 :( 我觉得这是不可能的...除非我在输入框或文本编辑器上使用一个iframe...我完了。 - msqar

你想通过焦点实现什么？- 我认为几乎每个 TinyMCE 问题都有解决方案。 - Thariama

Answer 3

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

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

这里有一个来自StackOverflow用户“fullpipe”的fiddle，演示了我使用的技术。

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;
}

正如您在fiddle中所看到的，右侧窗格中的无意义文本保持高亮显示，而不管页面上其他地方的焦点在哪里。

此时，您需要将颜色更改应用于所有匹配的span。

- Bangkokian

---

看起来很不错，但我需要在这里使用tinyMCE。我最初认为我可以做类似的事情，但是添加一个虚假的高亮到所选文本可能不是最好的选择 :( 不过我会尝试一下。 - msqar