Xây dựng 1 simple text editor

Chào các bạn. Một số bạn không thích dùng rich text editor cho lắm, nên họ sẽ dùng simple text editor thay thế vì nó đơn giản hơn, và được các trình duyêt hỗ trợ nhiều hơn
Code: <!-- text editor -->
<div class="editor">
<input type="button" value="B" id="bold" />
<input type="button" value="I" id="italic" />
<input type="button" value="U" id="underline" />
</div> <div class="editor">
<textarea id="editor" name="editor"></textarea>
</div>



Dùng CSS để đinh dạng :
Code: .editor { background: #F4FAFF;
padding: 3px 3px 3px 10px;
margin-top: 1px;
margin-bottom: 3px;
margin-left: 10px;
margin-right: 10px;
border-bottom: 1px #0164F9 dashed;
border-top: 1px #0164F9 dashed;
font-family: Verdana;
font-size: 12px;
font-weight: bold;
letter-spacing: 5px;
}

#editor {
height: 120px;
width: 500px;
background: url('/ldquo-grey.gif') no-repeat;
background-color: #FFFFFF;
background-position: 1px 1px;
padding: 10px;
border: 1px solid #0055E5;
}


Các bạn cũng có thể tự tạo cho mình với phong cách khác.
Tiếp theo ta sẽ tạo 2 mảng : một mảng chứ tag mở (tag open), một mảng chứ tag đóng (tag end). 2 mảng này cần được gián các giá trị tuơng đương nhau để lát nữa khi chèn tag, không bị lỗi “râu ông này cắm cằm bà kia”.
Code: var tagO = new Array();
var tagE = new Array(); tagO[0] = '{B}';
tagO[1] = '{I}';
tagO[2] = '{U}';
tagE[0] = '{/B}';
tagE[1] = '{/I}';
tagE[2] = '{/U}';


Đây là những biến toàn cục, có thể gọi được khi ở trong hàm. Các bạn có thể thay thế ‘{’ và ‘}’ bằng ‘[' và ']‘ cho giống BBCODE.
Sau đó, ta viết một hàm để ấn định các việc sẽ làm khi có sự kiện onclick trên các button ta vừa tạo trên :
Code: var pre = function() {
var bold = document.getElementById('bold');
var italic = document.getElementById('italic');
var underline = document.getElementById('underline'); //--> Task onclick
bold.onclick = function() { addTag(0) }
italic.onclick = function() { addTag(1) }
underline.onclick = function() { addTag(2) }
}


Hàm này chút nữa sẽ đưa vào sự kiện onload.
Tiếp theo ta viết hàm chèn tag. Code như sau :
Code: function addTag(num)
{
var obj = document.getElementById('editor'); if(navigator.appName == 'Netscape') { // for FF, Opera
// code here
try {
var pos = obj.scrollTop;
var st = obj.selectionStart;
var en = obj.selectionEnd;
var before = obj.value.substring(0,st);
var after = obj.value.substring(en,obj.value.length);
var str = obj.value.substring(st,en);
var result = before + tagO[num] + str + tagE[num] + after;
obj.value = result;
obj.setSelectionRange(st,(en + tagE[num].length + tagO[num].length));
obj.scrollTop = pos;
} catch(e) { alert('Error : ' + e); }
//--> end this code
} else { // for IE
// code here
try {
if(document.selection.createRange().parentElement( ).name == 'editor'){
var str = document.selection.createRange().text;
document.selection.createRange().text = tagO[num] + str + tagE[num];
document.selection.createRange().select();
}
} catch(e) { alert('Error: ' + e); }
}
//--> end this code
obj.focus();
}


navigator.appName sẽ lấy tên trình duyệt mà ta đang sử dụng. Vì Netscape và Internet Explorer sẽ phải có những phuơng thức khác nhau để chèn code, nên ta mới kiểm tra. Hầu hết các trình duyệt đề có navigator.appName là “Netscape”, riêng IE là “Internet Explorer”. Các bạn có thể thử bằng javascript với câu lệnh alert(navigator.appName);
Chúng ta truy vấn tới đối tượng textarea thông qua biến :
var obj = document.getElementById(’editor’;
obj.scrollTop sẽ lấy ra vị trí scroll trong textarea. Khi có nhiều dòng, việc này sẽ hữu ích. Ta lấy trước vị trí này, lát lại dùng thuộc tính obj.scrollTop gán lại vị trí cũ để tạo cảm giác thuận tiện cho người dùng.
obj.selectionStart và obj.selectionEnd giúp chúng ta lấy vị trí của đoạn text được chọn ở đầu và ở cuối. Nên nhớ, đầu tiên đối với lập trình luôn luôn là 0.
Ta sẽ chèn tag bằng cách chèn lại đoạn text mới với tag của chúng ta. Ta sẽ lôi ra từng phần của đoạn text đó : Phần đầu – từ vị trí 0 đến vị trí đầu của vùng chọn, phân 2 – từ vị trí đầu vùng chọn cho đến cuối vùng chọn và phân 3 – từ cuối vùng chọn cho đến hết đoạn text :
Code: var before = obj.value.substring(0,st);
var after = obj.value.substring(en,obj.value.length);
var str = obj.value.substring(st,en); var result = before + tagO[num] + str + tagE[num] + after;
obj.value = result;


Sau đó ta sẽ đưa result vào lại value của textarea. Thật đơn giản.
Sau đó, ta sẽ select vùng add tag bằng code :
Ta chọn từ vị trí đầu được select ban nãy (trước khi chèn tag) tới vị trí cuối bằng tổng độ dài string các tags và vị trí cuối của vùng chọn ban nãy.
Dùng obj.scrollTop = pos; để đưa vị trí scroll đến vị trí vùng chèn tags khi có nhièu dòng có scroll bar bên hông.
Đối với IE thì Browser này có hỗ trợ bạn phưong thức document.selection.createRange() để xử lí chuỗi đang select.
Code: if(document.selection.createRange().parentElement( ).name == 'editor'){
var str = document.selection.createRange().text;
document.selection.createRange().text = tagO[num] + str + tagE[num];
document.selection.createRange().select();
}

document.selection.createRange().parentElement().n ame == ‘editor’ kiểm tra để chắc rằng vùng text đựoc chọn phải là vùng có nút cha tên là ‘editor’.
Sau đó ta gán vùng text được chọn bằng đoạn text mới mang tags : document.selection.createRange().text = tagO[num] + str + tagE[num];
Cuối cùng ta select lại vùng đó :
Code: document.selection.createRange().select();

Ta focus lại textarea bằng obj.focus();
Ta có thể viết hàm sau để thực thi hàm khi đã load xong trang web :
Code: function addLoadFunc(func)
{
var oldLoad = window.onload;
if(typeof oldLoad != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldLoad();
func();
}
} }


Có thể nó không cần thiết, nhưng với 1 số lượng lớn hàm cần đựoc thưc thi sau khi load thì tốt hơn hết là ta nên viết.
Ta đưa hàm của ta vào là xong
addLoadFunc(pre);
Nguồn : zoejoe.net/store/test/STE/