突出顯示/格式textareas

我正在尋找在保留空白的網頁內實現一個實時差異。突出顯示/格式textareas

我在過去在IE6中使用TinyMCE和JQuery的組合（對於該項目是必需的），但它沒有保留空白。（它不應該，但我沒有添加任何東西來實現它，它只是）。 TinyMCE並不理想，因爲我正在處理純文本，而TinyMCE是一種支持豐富文本的所見即所得風格編輯器。它的大部分功能都沒有被使用，並且很難禁用。

我瀏覽了大部分在http://en.wikipedia.org/wiki/Comparison_of_JavaScript-based_source_code_editors列出的項目。 EditArea看起來很有希望，但似乎無法確定哪些元素實際上用於顯示文本。

$（ '＃frame_modified'）。內容（）。找到（ '＃編輯器'）。文本（）

顯示大量的在線信息（123456789101112等）以及光標所在的行，但不是其餘的。我還沒有想出如何應用/修改與之相關的樣式。

比方說用戶類型富，我想，使其顯示爲<跨度類=「酒吧」 > FOO在飛行</SPAN >把它包起來。要獲得這種功能，最簡單的解決方案是什麼？

IE8是此項目的目標瀏覽器。

來源

2010-08-18 Rob Paisley

你可以對onKeyDown事件做一些操作（在你自己的插件中）。如果您的光標已經在新的範圍內，則添加剛輸入的字符，然後用輸入的字符創建一個新的範圍。這樣的事情：

ed.onKeyDown.add(function(ed,evt){ 
    char = getChar(evt.keyCode); // your function to get the character to be inserted depending on evt.keyCode 

    // if span already exists 
    node = ed.selection.getNode(); 
    if (node.nodeName.toLowerCase() == 'span' && node.className == 'myclass'){ 
    node.innerHTML += char; 
    } 
    // new span 
    else { 
    doc = ed.getDoc(); 
    new_element = doc.createElement('span'); 
    new_element.className = "myclass"; 
    new_element.innerHTML = char; 
    tinymce.activeEditor.mceInsertContent(new_element); 
    } 
})

來源

2010-08-19 12:21:11 Thariama

我要試試看看它是怎麼回事。也許有些時候，因爲我正在度假，直到星期一開始幾個小時。 - 如果我能用這些空白和所有東西來爲我工作，在我可以接受這個答案之前，我想對代碼進行一些編輯。 var聲明char/node/doc/new_element，===而不是==字符串進行比較，最後的分號就是我目前所看到的。 – 2010-08-19 13:45:29

突出顯示/格式textareas

回答

相關問題