Question

我正在使用textarea编辑一个简单的富文本编辑器，我只需将<tag><tag/>粘贴为粗体，斜体和＆amp;在textarea下划线一切正常，问题是我无法理解如何插入有序列表＆amp;使用此脚本的无序列表。

以下是我的代码。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style>
#my_textarea{
    width:300px;
    height:150px;
    border:thin solid #000;
    color:#000;
    padding:10px;
    min-height:150px;
    min-width:300px;
    max-height:150px;
    max-width:300px;
}
#preview{
    width:300px;
    height:150px;
    border:thin solid #000;
    color:#000;
    padding:10px;
    min-height:150px;
    min-width:300px;
    max-height:150px;
    max-width:300px;
}
</style>
<script type="text/javascript"> 

function formatText(tag) {
   var myTextArea = document.getElementById('my_textarea');
   var myTextAreaValue = myTextArea.value;
   var selected_txt = myTextAreaValue.substring(myTextArea.selectionStart, myTextArea.selectionEnd);
   var before_txt = myTextAreaValue.substring(0, myTextArea.selectionStart);
   var after_txt = myTextAreaValue.substring(myTextArea.selectionEnd, myTextAreaValue.length);
   myTextArea.value = before_txt + '<' + tag + '>' + selected_txt + '</' + tag + '>' + after_txt;
}
function preview() {
    var textbox , view ;
    textbox = document.getElementById('my_textarea');
    view = document.getElementById("preview");
    view.innerHTML = textbox.value
}

function onload(){
    var textarea = document.getElementById("my_textarea");
    textarea.onkeypress = function(e){
        if( e.which === 13)
        {
            this.value += "<br>";
        }
    }
}
</script>
</head>

<body onLoad="onload();">
<input type="button" value="bold" onClick="formatText ('b');" /> 
<input type="button" value="italic" onClick="formatText ('i');" /> 
<input type="button" value="underline" onClick="formatText ('u');" /><br><br>
<textarea name="my_textarea" id="my_textarea"></textarea><br><br>
<div id="preview"></div><br>
<button id="btn" onClick="preview();">Preview</button>
</body>
</html>

演示：http://jsfiddle.net/yZ6Va/

Answer 1

我得到了解决方案

<html>
<head>
<script>
function olist(tag){
   var myTextArea = document.getElementById('my_textarea');
   var myTextAreaValue = myTextArea.value;
   var selected_txt = myTextAreaValue.substring(myTextArea.selectionStart, myTextArea.selectionEnd);
   var before_txt = myTextAreaValue.substring(0, myTextArea.selectionStart);
   var after_txt = myTextAreaValue.substring(myTextArea.selectionEnd, myTextAreaValue.length);
   myTextArea.value = before_txt + '<' + tag +'>' + '\n' + '<' + 'li' + '>' + selected_txt + '</' + 'li' + '>' + '\n' + '</' + tag +'>'  + after_txt;
}
</script>
<head>

<body>
<input type="button" value="Orderd List" onClick="olist ('ol');" /><br>
<textarea name="my_textarea" id="my_textarea" style="width:300px; height:150px;"></textarea>
</body>
</html>

演示：http://jsfiddle.net/nbx7e/1/

Answer 2

为什么不使用document.execcommands？（如果目标浏览器都是较新的浏览器）

e.g。小提琴：http://jsfiddle.net/skoch/8hxdLwqh document.execCommand('InsertUnorderedList', false, 'newUL');

支持的浏览器：www.quirksmode.org/dom/execCommand.html

使用Textarea的简单富文本编辑器

2 个答案: