2012-06-23 34 views
4

如何創建一些JavaScript執行以下操作 - 當用戶點擊「大膽」按鈕,選中的文本得到一個「<b>」和「</B > 「纏住它。添加<b></b>標籤來選定的文本在一個文本

<form name="my"> 
<textarea name="textarea"></textarea><br /> 
<input type="button" value="bold" onclick="formatText ('b');" /> 
<input type="button" value="italic" onclick="formatText ('i');" /> 
<input type="button" value="underline" onclick="formatText ('u');" /> 
</form> 

請幫我支持幾乎Web瀏覽器中創建Java腳本

+7

你爲什麼不使用預發[富文本編輯器(http://www.webdesignerdepot.com/2008/12/20-excellent-free-rich-text-editors/)? – egasimus

+1

爲什麼要重新發明輪子?谷歌「PHP JavaScript的富文本編輯器」,並採取你的選擇 – GDP

+0

@egasimus,這就是主意。但是,這個來源太舊 – Alexander

回答

-1

試試這個功能:

function formatText(tag) { 
    var Field = document.getElementById('text'); 
    var val = Field.value; 
    var selected_txt = val.substring(Field.selectionStart, Field.selectionEnd); 
    var before_txt = val.substring(0, Field.selectionStart); 
    var after_txt = val.substring(Field.selectionEnd, val.length); 
    Field.value = before_txt + '<' + tag + '>' + selected_txt + '</' + tag + '>' + after_txt; 
} 

例子:http://jsbin.com/ilecug/
來源:http://jsbin.com/ilecug/edit

0

請嘗試腳本下面給出...

<script> 
function formatText (key){ 

    var elem = document.my.textarea; 
    /*start of selection area*/ 
    var start = elem.selectionStart; 
    var end = elem.selectionEnd; 
    var len = elem.value.length; 
    var sel_txt = elem.value.substring(start,end); 

    if (sel_txt != ""){ 
     var begin_tag = "<"+key+">"; 
     var close_tag = "</"+key+">"; 
     var replace = begin_tag + sel_txt + close_tag; 
     elem.value = elem.value.substring(0,start) + replace + elem.value.substring(end,len); 
    } 
</script> 

我已經試過腳本http://jsfiddle.net/VRqU3/。請檢查一下。

我希望這將是爲你工作, 謝謝你,

0

這將是比較簡單的,如果不是爲IE < 9,不支持textarea元素的selectionStartselectionEnd性能。這裏是我的詳細介紹瞭如何做到這一點前面的回答:

https://stackoverflow.com/a/10739034/96100

1

你應該使用現有的富文本編輯器,它們配置的,因此可以給用戶只有你想讓他們使用什麼樣的功能。他們還具有在各種不同瀏覽器上工作的額外好處。

以粗體,斜體和下劃線設置tinyMCE的示例。

tinyMCE.init({ 
    // General options 
    mode : "textareas", 
    theme : "advanced", 

    // Theme options 
    theme_advanced_buttons1 : "bold,italic,underline" 
}); 
+0

我不知道TinyMCE提供了他們的腳本的輕量級版本,並且他們會這樣定製。我已經搜索了幾個小時,並試圖自己創建一個,我非常感謝發現這個提示! – Mafia

相關問題