How to select code snippet in textarea

Question

When you use the click on stack overflow's button to add code snippets in the rich text editor it adds some text like this 'enter code here'. It also selects (or highlights) this inserted text with the caret so the user can easily replace the text by just typing. I want to implement the same functionality to my rich text editor.

I created a javascript function that enters a dummy text inside pre and code tags. Now I want to use a functionality similar to this javascript function: http://www.w3schools.com/jsref/met_textarea_select.asp

The problem is that this function selects the whole textarea and I only want to select my dummy text inside pre and code tags.

I insert the dummy text in the following way:

var preElement = new CKEDITOR.dom.element("pre");
var codeElement = new CKEDITOR.dom.element("code");
preElement.append(codeElement);
codeElement.setText('insert your code here');
editor.insertElement(preElement);

Oh, and I am using CKEditor for this and a plugin I wrote to execute this function.

Does this answer your question? [How to highlight a part part of an Input text field in HTML using Javascript or JQuery](https://stackoverflow.com/questions/10341843/how-to-highlight-a-part-part-of-an-input-text-field-in-html-using-javascript-or) — PhoneixS, Sep 06 '22 at 14:50

score 1 · Accepted Answer · edited May 23 '17 at 12:20

1

Here is an Stack Overflow question that I believe does exactly what you would like:

JQuery/JavaScript - highlight a part of text from input or textarea

The short:

You have to place a div behind your textarea and then style it according to it's text.

edited May 23 '17 at 12:20

Community

1
1

answered Aug 06 '14 at 20:50

possiblyLethal

191
6

How to select code snippet in textarea

1 Answers1