CODEWITHSUNDEEP
javascriptjquerycontenteditable
Sol Orwell
Sol Orwell

Reputation: 115

Color coding within contentEditable?

I've been trying to breakdown how WYSIWYG editors work, but am having problems figuring it out (and do not need even 5% of that versatility).

My own problem is simple.

Insides a contentEditable div, I have a bunch of text. I want to color code any text that matches a simple pattern. So I may have this text:

"this is is a text we [can ignore] this earlier one, but anything that [ref=xxxxxx|aaa|bnbb] that fits the ref has to be color coded."

I want any mention that follows the pattern of [ref=<whatever>] made slightly smaller/colored.

Any idea on how to do that?

Upvotes: 1

Views: 186

Answers (2)

Ivy
Ivy

Reputation: 887

If you add a keyup event listener to your contenteditable, you can perform your regex replacements there to add $1 in the contenteditable's innerHTML.

Doing so will reset the caret position, but you can preserve it using Rangy. 

function highlight(){
  var selection = rangy.saveSelection();
  contenteditable.innerHTML = contenteditable.innerHTML.replace(/(\[ref=[^\]]*\])([^<])/g, '<span class="ref">$1</span>$2');
  rangy.restoreSelection(selection);
}

The regex may not be perfect, but if not, it should get you started.

Upvotes: 0

techfoobar
techfoobar

Reputation: 66693

One way is using the fabulous http://alexgorbatchev.com/SyntaxHighlighter/ plugin and writing a custom brush for your syntax, which shouldn't be too difficult since your syntax coloring requirements are rather simple.

Upvotes: 1

Related Questions