contentEditable中的顏色編碼？

Question

我一直在試圖分解WYSIWYG編輯器是如何工作的，但是在解決它的問題時（甚至不需要5％的多功能性）。

我自己的問題很簡單。

Insides a contentEditable div，我有一堆文本。我想爲任何匹配簡單模式的文本着色代碼。所以，我可能有這樣的文字：

「這是我們[可以忽略]這個較早的企業之一，但任何一個文本[REF = XXXXXX | AAA | bnbb]適合裁判不得不進行顏色編碼。 「

我想任何提及，使[ref=<whatever>]的模式稍微變小/着色。

任何想法如何做到這一點？

Answer 1

一種方法是使用神話般的http://alexgorbatchev.com/SyntaxHighlighter/插件，併爲您的語法編寫自定義畫筆，這應該不會太困難，因爲您的語法着色要求相當簡單。

Answer 2

如果您向您的contenteditable添加了一個關鍵事件偵聽器，則可以在那裏執行您的正則表達式替換，以在contenteditable的innerHTML中添加$ 1。

這樣做會重置脫字符位置，但您可以使用Rangy來保留它。

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

正則表達式可能不完美，但如果沒有，它應該讓你開始。