Any way to avoid losing focus when clicking input text from tinymce container?

Question

I made this tinymce fiddle to show what I'm saying.

Select the text in the editor, then click on the input text, select in tinyMCE (obviously).

Now I know that this is not so simple, because both the built-in editor and the input text are in one document, so the focus is only on one. But is there any way to choose how the “unfocused” selection (gray color) whenever I click on the input text?

I am talking about this because I have a custom color picker, this color picker has an input where you can enter a HEX value, when you click OK it will execCommand change the color on the selected text, but it looks ugly because the highlight is lost.

I do not want to use an iframe, I know that using a non-built-in editor (iframe) is one of the solutions, but for several reasons I cannot use the iframe text editor.

Any suggestion here? Thanks.

PS: Because of the topic, do any of you guys know why I cannot access the tinymce object in tinyMCE Fiddle? it looks like the tinyMCE global variable has been overwritten by the tinymce dom selector on the page itself. I can not execute the tinyMCE lol command.

Answer 1

Another solution:

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

PS: From the topic, do any of you guys know why I cannot access the tinymce object in the tiny MCE script? It looks like a tiny global var has been overwritten by the tinymce dom selector on the page itself. I can not execute the tinyMCE lol command.

Well, you can access the tinyMCE variable and even execute commands.

Answer 2

this line is incorrect

var colorHex = document.getElementById ("colorHex")

colorHex contains an input element, not a value.

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

it works now ( neolist could not load, so I deleted it)

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

Answer 3

I needed to do something similar recently.

Firstly, you cannot have two different elements selected at the same time. Therefore, for this you will need to imitate the built-in “highlighted text selection” of the browser. To do this, you will need to insert spaces in the text to simulate the selection, and then capture the mousedown and mouseup events.

Here's the StackOverflow user script " fullpipe " that illustrates the technique I used.

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

As you can see in the violin, the gibberish text in the right pane remains highlighted regardless of focus elsewhere on the page.

At this point, you will have to apply color changes to all relevant ranges.