Question

我已经制作了这个fiddle以显示我说的话。

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

现在，我知道这并不容易，因为内联编辑器和输入文本都在同一个文档中，因此，焦点只有一个。但是，有没有什么好的方法可以让你像一个没有焦点的＆＃34;每当我点击输入文字时突出显示（灰色）？

我之所以这样说是因为我有一个自定义的颜色选择器，这个颜色选择器有一个输入，您可以输入HEX值，当单击OK时，它会对所选文本执行颜色更改，但它看起来很像丑陋，因为亮点丢失了。

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

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

P.S：出于话题，你们中间是否有人知道为什么我无法访问tinyMCE小提琴中的tinymce对象？看起来像tinyMCE全局变量被页面本身的tinymce select dom元素覆盖。我无法执行tinyMCE命令lol。

Answer 1

另一种解决方案：

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

P.S：出于话题，你们中间是否有人知道为什么我无法访问 tinyMCE小提琴中的tinymce对象？看起来像tinyMCE全球 var被页面的tinymce select dom元素覆盖本身。我无法执行tinyMCE命令lol。

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

Answer 2

此行错误

var colorHex = document.getElementById（“colorHex”）

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

var colorHex = document.getElementById（“colorHex”）。value

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

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

Answer 3

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

首先，您不能同时“选择”两个不同的元素。因此，为了实现这一点，您需要模仿浏览器内置的“选定文本突出显示”。为此，您必须在文本中插入跨距以模拟突出显示，然后捕获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;
}

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

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

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

3 个答案: