Jakikolwiek sposób, aby zapobiec utracie ostrości po kliknięciu tekstu wejściowego z pojemnika tinymce?

Question

Zrobiłem ten tinymce fiddle, aby pokazać, co mówię.

Podświetl tekst w edytorze, a następnie kliknij tekst wejściowy, zaznacz w tinyMCE - zaginie (oczywiście).

Wiem, że to nie jest łatwe, ponieważ zarówno edytor liniowy, jak i tekst wejściowy są w tym samym dokumencie, a więc fokus jest tylko jeden. Ale czy istnieje jakiś sposób, aby za każdym razem, gdy kliknę w tekst wejściowy, uzyskać "nieostre" podświetlenie (szary kolor)?

Mówię to, ponieważ mam dostosowany selektor kolorów, ten próbnik kolorów ma wejście, w którym można wpisać wartość HEX, po kliknięciu przycisku OK polecenie to spowoduje zmianę koloru zaznaczonego tekstu, ale wygląda brzydko ponieważ podświetlenie zostanie utracone.

Nie chcę używać elementu iframe, wiem, że przy użyciu edytora nielinearnego (iframe) jest jednym z rozwiązań, ale z kilku powodów nie mogę użyć edytora tekstu iframe.

Wszelkie sugestie tutaj? Dzięki.

P.S: Czy nikt z was nie wie, dlaczego nie mogę uzyskać dostępu do przedmiotu z tinymce w maleMCE Fiddle? wygląda na to, że globalny var tinyMCE został nadpisany przez tinymce select dom element strony. Nie mogę wykonać komendy tinyMCE lol.

Answer 1

linia ta jest źle

var colorHex = document.getElementById ("colorHex")

colorHex zawiera elementów napędowych, a nie wartość.

var colorHex = document.getElementById ("colorHex"). Wartość

teraz działa (neolist nie może załadować, więc usunąłem go)

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

Answer 2

Another rozwiązanie:

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

P.S: Czy na pewno ktoś z Was wie, dlaczego nie mam dostępu do obiektu tinymce w urządzeniu tinyMCE Fiddle? wygląda na to, że zmienna tinyMCE globalna została nadpisana przez element tinymce select dom strony samej w sobie. Nie mogę wykonać komendy tinyMCE lol.

Cóż, można uzyskać dostęp do zmiennej tinyMCE, a nawet wykonywać polecenia.

Answer 3

Musiałem ostatnio zrobić coś podobnego.

Po pierwsze, tak naprawdę nie można tak naprawdę jednocześnie wybrać dwóch różnych elementów. Aby to osiągnąć, musisz naśladować wbudowany "zaznaczony podświetlony tekst". Aby to zrobić, będziesz musiał wstawiać przęzgi do tekstu, aby symulować podświetlanie, a następnie przechwytywać zdarzenia mousedown i mouseup.

Oto skrzypce użytkownika StackOverflow "fullpipe", które ilustruje technikę, której użyłem.

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

Jak widać na skrzypcach, tekst bełkot w prawym okienku pozostaje podświetlony niezależnie od ostrości w innym miejscu na stronie.

W tym momencie będziesz musiał zastosować zmiany koloru do wszystkich pasujących zakresów.