MIME viết tắt của "Tiện ích mở rộng thư điện tử đa năng" là một Internet tiêu chuẩn về định dạng cho thư điện tử, hầu hết như mọi thư điện tử Internet được truyền qua giao thức SMTP theo định dạng MIME

Type/sub-typeExtensionapplication/envoyevyapplication/fractalsfifapplication/futuresplashsplapplication/htahtaapplication/internet-property-streamacxapplication/mac-binhex40hqxapplication/msworddocapplication/msworddotapplication/octet-streamFile chứa nhị phân ứng dụng/octet-streambinapplication/octet-streamclassapplication/ . ms-excelxlaapplication/vnd. ms-excelxlcapplication/vnd. ms-excelxlmapplication/vnd. ứng dụng ms-excel xlsx/vnd. ms-excelxltapplication/vnd. ms-excelxlwapplication/vnd. ms-outlookmsgapplication/vnd.
payment-initiationsetpayapplication/set-
registration-initiationsetregapplication/vnd. ms-excelxlaapplication/vnd. ms-excelxlcapplication/vnd. ms-excelxlmapplication/vnd. ứng dụng ms-excel xlsx/vnd. ms-excelxltapplication/vnd. ms-excelxlwapplication/vnd. ms-outlookmsgapplication/vnd.
ms-pkicertstoresstapplication/vnd. ms-pkiseccatcatapplication/vnd. ms-pkistlstlapplication/vnd. ms-powerpointpotapplication/vnd. ms-powerpointppsapplication/vnd. ms-powerpointpptapplication/vnd. ms-projectmppapplication/vnd. ms-workswcmapplication/vnd. ms-workswdbapplication/vnd. ms-workswksapplication/vnd. ms-workswpsapplication/vnd.
openxmlformats-officedocument.
bản trình bàyml. ứng dụng pptx thuyết trình/vnd.
openxmlformats-officedocument.
bảng tínhml. sheetxlsxapplication/vnd.
openxmlformats-officedocument.
xử lý văn bảnml. documentdocxapplication/winhlphlpapplication/x-bcpiobcpioapplication/x-cdfcdfapplication/x-compresszapplication/x-compressedtgzapplication/x-cpiocpioapplication/x-cshcshapplication/x-directordcrapplication/x-directordirapplication/x-directordxrapplication/x-dvidviapplication/x-gtargtarapplication/x- . ms-pkipkopkoapplication/zipzipaudio/basicauaudio/basicsndaudio/midmidaudio/midrmiaudio/mpegmp3audio/x-aiffaifaudio/x-aiffaifcaudio/x-aiffaiffaudio/x-mpegurlm3uaudio/x-pn-realaudioraaudio/x-pn-realaudioramaudio/x-wavwavimage/bmpbmpimage/

thần thánh

28-12-2007, 17. 09

Đã có khá nhiều trình soạn thảo văn bản WYSIWYG miễn phí được chia sẻ trên mạng, nhưng nếu bạn là một nhà phát triển web với mục đích thực thi, có thể một lúc nào đó bạn sẽ muốn xây dựng cho riêng mình một Rich Text Editor. Nếu vậy, bài viết này chắc chắn sẽ mang lại cho bạn một chút gì đó hữu ích.

T tiên, khi nảy ra ý muốn viết 1 cái RTE, tôi đã nghĩ đến việc sử dụng 1 thẻ DIV để làm khung soạn thảo. Không khó khăn trong việc khởi tạo con trỏ nhấp nháy và chuyển các ký tự từ bàn phím trong phần tử DIV này. Một ví dụ là chương trình mô phỏng giao diện dòng lệnh của Window mà tôi đặt tên là Web Command Line (http. // sacroroyant. đại học. cc/Ví dụ/cmd/cmd. htm) (nó chỉ để chơi thôi chứ không giải quyết công việc gì. cười nhạo. ).

Nhưng rồi sau nhiều cuộc tìm kiếm, tôi đã phát hiện ra 1 điều quan trọng khác giúp cho công việc đơn giản hóa đi rất nhiều, đó là. Chế độ thiết kế.

DesignMode là 1 thuộc tính của tài liệu đối tượng, giá trị mặc định của nó là "tắt". Khi bạn sửa đổi giá trị này thành "bật", hồ sơ web trở thành dạng có thể chỉnh sửa - editable, và bạn có thể thao tác với trang web trong cửa sổ như đang làm việc trên MS Word. Đây chính là bí quyết để xây dựng RTE cho các trình duyệt web.

Hiện tại chúng ta sẽ làm 1 trình soạn thảo WYSIWYG đơn giản, bao gồm một trường nhập văn bản, và các nút lệnh cho phép định dạng văn bản in đậm - B, in nghiêng - I, gạch . Ngoài ra, chúng tôi cũng thêm vào 2 nút cho phép chèn hình ảnh và liên kết. Sau cùng là một nút để loại bỏ các định dạng. Giao diện của trình soạn thảo trông sẽ như thế này.

http. //trang trại3. tĩnh. flickr. com/2278/2142569192_1e4f841419_o. jpg

Khung soạn thảo là 1 iframe, như cách sử dụng thông thường của các RTE. Chúng ta cho nó 1 ID và sử dụng CSS để thiết lập kích thước và khả năng cuộn.






To biến vùng iframe này về dạng có thể chỉnh sửa, chúng ta thiết lập giá trị của thuộc tính designMode to on by script after.




var editor = document. getElementById('textArea'). nội dungWindow. tài liệu;
trình soạn thảo. designMode='On';
trình chỉnh sửa. open();
trình soạn thảo. write('');');');
trình soạn thảo. close();


Đoạn mã JavaScript này phải được gọi sau khi khung nội tuyến xuất hiện trong trang web.

contentWindow là 1 thuộc tính của các khung, iframe trong hồ sơ HTML.

tài liệu. getElementById('textArea'). contentWindow cho phép tham chiếu đến iframe đối tượng mà danh sách được thiết lập. ID = "textArea".

Trong Mozilla , chúng ta có thể tham chiếu đến 1 đối tượng cửa sổ iframe bằng tập lệnh.


cửa sổ. frames["myFrame"]

Script tương ứng với IE là.

tài liệu. tất cả các. myframe. contentWindow

Vẫn tập lệnh mà chúng tôi sử dụng sẽ thích hợp cho cả IE, Mozilla và Opera.

Như vậy, chúng ta có 1 biến trình soạn thảo toàn cục, để tham chiếu đến tài liệu đối tượng của phần tử iframe giả lập khung soạn thảo văn bản. Dòng lệnh tiếp theo thiết lập designMode of it to "on". Các lệnh open, write, close chèn vào iframe các thẻ cơ bản của 1 hồ sơ HTML, những gì nằm giữa sẽ hiển thị trên các khung soạn thảo như phần văn bản mặc định của Editor. sẽ hiển thị trên các khung soạn thảo như phần văn bản mặc định của Editor. sẽ hiển thị trên các khung soạn thảo như phần văn bản mặc định của Editor.

Sau khi thiết lập designMode = "on", đối tượng tài liệu của iframe sẽ tự động kích hoạt một số phương thức hỗ trợ thực hiện định dạng phần văn bản được chọn (văn bản đã chọn) bên trong nó. Chúng bao gồm.


queryCommandEnabled
queryCommandIndeterm
queryCommandState
queryCommandSupported
queryCommandValue .


Trong đó, quan trọng hơn cả là 2 phương thức execCommand và queryCommandEnabled.

Syntax of execCommand as after.



editableDocument. execCommand(sCommand [, bUserInterface] [, vValue])


Nếu không có văn bản nào được chọn, phương thức này không làm được gì cả.

Tham số bắt buộc sCommand là 1 chuỗi tên lệnh định dạng (mã định danh lệnh), giả định là "bold", "italic". QuirksMode (http. // http. //www. Chế độ quirks. org/) liệt kê khá chi tiết các định dạng lệnh này, và cả cách chúng thực hiện công việc trong từng trình duyệt.

http. //www. Chế độ quirks. org/dom/execCommand. html

Tham số thứ hai, bUserInterface, thuộc dạng tùy chọn và mang 1 giá trị boolean (mặc định. sai). Trong Mozilla, if set is true, you could get 1 error (NS_ERROR_NOT_IMPLEMENTED).

Tham số thứ 3, vValue, cũng thuộc dạng tùy chọn. Bạn sẽ phải sử dụng nó trong một số trường hợp mà tham số đầu tiên cần 1 giá trị cụ thể. Không giới hạn khi muốn định dạng chữ màu, tham số thứ nhất sẽ là "forecolor", và chúng ta cần tham số thứ 3 để trình duyệt biết màu gì sẽ được sử dụng. Ví dụ.


editableDocument. execCommand("forecolor", false, "#0000ff");

Hoặc khi chèn 1 hình ảnh, tham số thứ nhất sẽ là "insertimage", và tham số thứ 3 cho biết đường dẫn của .


editableDocument. execCommand('insertimage', false, imageURL);

Để biết 1 lệnh có thể thực thi hay không, chúng ta sử dụng queryCommandEnabled. Phương thức này nhận 1 tham số là tên của lệnh (như. "đậm", "nghiêng", "forecolor", "chèn ảnh". ), và trả về 1 giá trị boolean cho biết khả năng thi hành lệnh đó. Thông thường chúng ta kiểm tra lệnh trước khi gọi nó. Script dưới đây kiểm tra lệnh tạo liên kết, nếu có thể thực hiện được thì sẽ chèn vào khung soạn thảo 1 HyperLink (aLink).



if(editableDocument. queryCommandEnabled("createlink")){
editableDocument. execCommand('createlink', false, aLink);
}

Hiện tại, chúng ta xem xét các nút. Chúng là những hình ảnh mà bạn tùy ý trình bày sao cho hợp lý. Thông thường các định dạng nút nằm ngay trên khung soạn thảo như trong ví dụ này. Các lệnh in đậm, in nghiêng, gạch dưới được liên kết với hàm doFormat thông qua sự kiện nhấp chuột.

Ham doFormat as after.



hàm doFormat(a,b){
if(editor. queryCommandEnabled(a)){
if(. b){b=null;}
trình chỉnh sửa. execCommand(a,false,b);
}
}


Như vậy, doFormat nhận vào 2 tham số.

- a. tên của lệnh
- b. value of command

Ở đây, trình soạn thảo là biến toàn cục đã được định nghĩa bên ngoài hàm như trình bày phía trên. Khi được gọi, doFormat sử dụng phương thức truy vấnCommandEnabled của trình soạn thảo để kiểm tra khả năng thực thi lệnh a. Sau đó, tiếp tục kiểm tra tham số thứ 2, nếu không thấy thì gán cho nó giá trị null. If could thi command, call method execCommand.

Đối với việc chèn hình ảnh và liên kết, có một chút khác biệt, chúng ta viết 2 hàm addLink và insertImage dành riêng cho nhiệm vụ này. Chúng được gọi theo cách tương tự như 3 nút lệnh trước.







Trong IE, bạn có thể viết.


biên tập viên. execCommand("CreateLink", true);

Hoặc.


biên tập viên. execCommand("InsertImage", true);

Quy trình duyệt này sẽ hiển thị một hộp thoại để người dùng nhập vào các tham số thích hợp.

http. //trang trại3. tĩnh. flickr. com/2014/2143437544_9b83c775e1_o. jpg

http. //trang trại3. tĩnh. flickr. com/2225/2143456580_e53ca630eb_o. jpg

Tuy nhiên, tính năng này chưa được Mozilla và Opera hỗ trợ, vì vậy, một số người thiết lập trình Rich Text Editor đã tự xây dựng các kiểu DialogBox riêng để thay thế. Việc đó không khó, nhưng trong bài viết này, chúng ta sẽ đơn giản hóa công việc bằng 1 hộp thoại nhắc.


Dưới đây là hàm addLink.



function addLink(){
var aLink=prompt('Nhập hoặc dán liên kết. ', '');
if(aLink){
doFormat('CreateLink', aLink);
}}}}
}

Và hàm insertImage :



hàm insertImage(){
tài liệu. getElementById('textArea'). nội dungWindow. focus();
var iURL=prompt('Nhập hoặc dán URL. ', '');
if(iURL){
doFormat('InsertImage', iURL);
}}}}
}

Khi người sử dụng click trên nút [http://b.imagehost.org/0395/link1.gif], một hộp thoại prompt bật ra để họ nhập chuỗi siêu liên kết. Hàm addLink kiểm tra lại chuỗi này, nếu có giá trị thị gọi doFormat với
2 tham số. "CreateLink" - tên lệnh, và aLink - URL đích do người dùng cung cấp.

Khi hàm insertImage được gọi, chúng ta sử dụng dòng lệnh đầu tiên để tập trung vào vùng soạn thảo. (Điều này là cần thiết để trình duyệt IE duyệt, bạn thử bỏ qua và chạy thử chương trình thì sẽ hiểu tại sao. ). Tiếp theo đó, 1 hộp thoại Nhắc mở yêu cầu người dùng nhập vào URL của hình ảnh. Cuối cùng, chúng ta gọi doFormat bằng lệnh "InsertImage" và giá trị iURL mà người dùng đã nhập.

Nút lệnh [http. // b. máy chủ hình ảnh. org/0457/removeformatting. gif] cho phép loại bỏ mọi định dạng trên phần văn bản được chọn.




Chúng ta viết hàm xử lý như sau.


function unformat(){
doFormat('removeformat');
doFormat('unlink');
}

Không có gì để giải thích nhiều. Command "removeformat" loại bỏ toàn bộ các thiết lập kiểu dáng văn bản. Command "unlink" gỡ bỏ liên kết cho phần văn bản đó.

Cuối cùng, chúng ta có toàn bộ mã HTML và JavaScript như dưới đây.

Rich Text Editor

Bây giờ thì Editor của chúng ta đã có thể hoạt động trên Mozilla, IE, Opera và Safari.

Bản trình diễn.

http. // sacroroyant. đại học. cc/Ví dụ/Trình chỉnh sửa/V1/rte. htm

Phần sau, chúng ta sẽ tìm hiểu sâu hơn một số lệnh khác để mở rộng tính năng cho trình soạn thảo này, đồng thời viết lại kịch bản điều khiển Trình soạn thảo theo kiểu đối tượng. Refacing.

thần thánh

29-12-2007, 17. 56

Định dạng văn bản tại chỗ.

đậm. in đậm văn bản
tên phông chữ. chữ chữ, giá trị. tên phông chữ. VD. arial, verdana.
cỡ chữ. khổ chữ, giá trị. các số từ 1 đến 7.
màu nền trước. chữ. vValue. chuỗi tên hoặc mã màu. VD. #0000ff, hải quân.
hilitecolor. màu nền (1). vValue. chuỗi tên hoặc mã màu. VD. #0000ff, hải quân.
in nghiêng. làm nghiêng văn bản
chỉ số dưới. text low down so with normal
superscript. đưa văn bản lên cao hơn bình thường
underline. gạch dưới văn bản

Định dạng khối văn bản.

tiêu đề. Format for a title. vValue.
thụt lề. cho khối văn bản lui vào 1 tab
insertorderedlist. liệt kê theo thứ tự thứ tự
insertunorderedlist. liệt kê không đánh số.
justifycenter. căn giữa
justifyfull. dàn đều 2 biên
justifyleft. căn trái
justifyright. căn cứ phải
outdent. cho block text lui ra 1 tab

Các lệnh khác.

tạo liên kết. tạo liên kết. vValue. chuỗi URL
xóa. xóa phần lựa chọn
inserthorizontalrule. chèn vào 1 phần tử
inserthtml. chèn vào 1 chuỗi HTML (2)
chèn hình ảnh. insert image. vValue. path to file image.
xóa định dạng. type bỏ các định dạng trong phần lựa chọn.
hủy liên kết. loại bỏ liên kết trong phần lựa chọn.

The command control editor.

hoàn tác. Khôi phục lại trạng thái trước khi có 1 thay đổi được ghi nhận (3)
redo. Khôi phục lại trạng thái trước khi hoàn tác 1 bước.
chọn tất cả. chọn toàn bộ bộ biên tập nội dung.

Danh sách trên chưa đầy đủ, nhưng là những gì cơ bản nhất cho 1 trình soạn thảo văn bản. Chúng là các lệnh nhận được sự hỗ trợ chung của nhiều trình duyệt.

Nhắc lại cú pháp của execCommand.

editableDocument. execCommand(sCommand [, bUserInterface] [, vValue])

Trong đó.

editableDocument. tham chiếu tên biến đến phần tử tài liệu của iframe đối tượng được sử dụng để thiết lập khung soạn thảo giả.
sLệnh. chuỗi tên lệnh. Không phân biệt được hoa - normal.
bGiao diện người dùng. biến tùy chọn hiển thị các DialogBox. Luôn luôn thiết lập là sai để tránh lỗi trong Mozilla và Opera.
giá trị. value for command. Nếu lệnh không cần chỉ định giá trị, sử dụng null.

Thông thường vValue là 1 chuỗi, ngoại trừ giá trị cho kích thước chữ có thể định dạng interger, nhưng nói chung vẫn nên đưa về kiểu chuỗi.

* Chú thích.


Với IE, cần thay bằng command backcolor.
Chỉ lệnh hỗ trợ Mozilla duy nhất này. Với IE, có thể sử dụng các lệnh cụ thể cho từng đối tượng muốn chèn, như. InsertInputButton, InsertTextArea, InsertMarquee. Xem thêm tại đây (http. //msdn2. Microsoft. com/en-us/library/ms533049%28VS. 85%29. aspx).
Các thay đổi được ghi nhận có thể là bất cứ hành động nào làm đi nội dung khác vốn có trong Trình chỉnh sửa, chẳng hạn như việc nhập vào, xóa đi, hoặc đổi màu 1 ký tự. Hoàn tác và Làm lại chỉ làm việc hoàn hảo trong Mozilla.

beham

30-12-2007, 19. 43

Tôi xin thêm cái chuyển đổi giữa chế độ code và chế độ deisgn mặc định + lấy nội dung mã HTML trong richtext mà mình sẽ cần khi "đăng" bài

Rich Text Editor   Author by Sacroyant Nguyen - Email. - ©2007

thần thánh

31-12-2007, 22. 11

Khi ôm lấy những khái niệm xung quanh thuộc tính designMode và phương thức execCommand, việc xây dựng Rich Text Format Editor không còn là điều khó khăn nữa. Có thể những bạn nào qua topic này, lần đầu tiên nghe nói đến các khái niệm trên, sẽ có cùng cảm giác như vậy. Hiểu vấn đề là giải quyết vấn đề.

Các trình WYSIWYG build thường khá cồng kềnh. Chúng càng cố khoác lên mình vẻ bề ngoài của các ứng dụng soạn thảo văn bản máy tính để bàn thì hình thức càng dò xét, bề bộn, với những tính năng mà chúng ta có thể không bao giờ sử dụng đến.

Đây là một số trình soạn thảo WYSIWYG phổ biến.


* Trình soạn thảo văn bản đa dạng thức miễn phí (http. //www. freerichtexteditor. com/trang/3. htm)
* Trình chỉnh sửa SPAW (http. //www. solmetra. com/en/disp. php/en_products/en_spaw/en_spaw_demo)
* Xinha (http. //xinha. phe nhóm. com/)
* Trình chỉnh sửa xuyên web (http. //koivi. com/WYSIWYG-Editor/)
* Trình soạn thảo văn bản đa dạng thức trên nhiều trình duyệt (http. // kevinroth. com/rte/demo. htm)

Các Editor cũng giống như mọi ứng dụng nền web ứng dụng, đều có giới hạn chế độ phải phụ thuộc vào mức độ hỗ trợ của các trình duyệt. Một ứng dụng web có thể hoạt động trong nhiều trình duyệt khác nhau, không có lỗi khi chạy và ít rắc rối, thì dễ gây cảm xúc hơn những trò chơi hoa lá.

Quay lại những trình soạn thảo mà các dịch vụ web sử dụng thì cái của Gmail (http. //email. Google. com/) hợp với mỹ cảm của tôi hơn cả. Ở đó có sự hài hòa giữa tính đơn giản, vẻ đẹp trang nhã và khả năng hoạt động chuẩn xác, hoàn hảo.

Do bài viết này chỉ nhằm mục đích giới thiệu cách xây dựng trình thảo WYSIWYG, chúng ta nên giữ nguyên cấu hình của bản trước mà không cần thêm các nút định dạng lệnh khác trên thanh công cụ .

The ta start by đoạn script.




var RTE=null;
var isIE=document. tất cả đều đúng. false;
var isMz=(navigator. appName=='Netscape')?true. sai;

hàm rel(id){
trả về tài liệu. getElementById (id). null;
}
hàm setHTML(el,sHTML){
if(rel(el)){
rel(el).innerHTML=sHTML;
}
else{
alert('Không tìm thấy phần tử "'+el+'". ');
}
}
function setBtnAction(btnID, Action){
var . addEventListener){
if(el.addEventListener){
el. addEventListener('click', new Function(Action), false);
}
else if (el. attachmentEvent){
el. AttachEvent('onclick', new Function(Action));
}
}


rel trả về phần tử dựa trên id . setHTML có nhiệm vụ gán mã HTML vào 1 phần tử nào đó.

setBtnAction chỉ định 1 hành động cho 1 nút bên dưới sự kiện nhấp chuột. Hàm này nhận vào 2 tham số. ID của nút và chuỗi tên hành động. Ví dụ chúng ta có nút btnBold hiển thị dưới dạng 1 biểu tượng nhỏ.

Nếu muốn chương trình thực thi lệnh doFomat("bold"), khi nhấp vào hình ảnh này, chúng ta chỉ thực hiện lệnh gọi hàm.


setBtnAction('btnBold', 'doFormat("bold")');

Khi chuỗi 'doFormat("bold")' được truyền vào hàm setBtnAction, .

Giữ nguyên các thành phần điều khiển Editor như cũ, chúng ta viết lại mã HTML.








.






Thay vì nhúng các hàm vào từng button, chúng ta đã cho mỗi hình ảnh một giá trị ID.

Nếu cấu hình điều khiển WYSIWYG của chúng ta giống như 1 đối tượng, nó có thể mang các thuộc tính cơ bản như bản chất. tên, kích thước vùng làm việc, nội dung bên trong. Và bên cạnh đó là 1 loạt các phương thức thi hành công việc định dạng văn bản. chèn liên kết, chèn hình ảnh. This is a build function.



hàm RichTextEditor(sID, oContain, sDefaultText, iWidth, iHeight){

cái này. ID=sID;
này. content=sDefaultText;
cái này. chiều rộng=(iWidth>300?iWidth. 500);
này. chiều cao=(cân nặng>80?Chiều cao. 200);

var sEditor='';';';
sEditor+='" style="width:'+this.width;
sEditor+='px;height:'+this.height;
sEditor+='px;overflow:auto;">';

setHTML(oContain,sEditor);

this. Giao diện người dùng = tài liệu. getElementById(cái này. TÔI). contentWindow;
cái này. biên tập = cái này. giao diện người dùng. tài liệu;

với(cái này. editor){
designMode='On';
open();
write('');');');
close();
}
}


Các tham số :

sID. chuỗi tên riêng cho từng Editor, bằng cách này, chúng ta có thể sử dụng nhiều Editor trên cùng 1 trang web.
oChứa. phần tử chứa Editor mà các khung soạn thảo sẽ được tạo bên trong.
sVăn bản mặc định. default text display when Editor open. Đây là 1 chuỗi HTML.
iWidth. chiều rộng của khung soạn thảo.
iHeight. chiều cao của khung soạn thảo.

Trong hàm dựng, chúng ta thiết kế các thuộc tính.

ID. định danh riêng
nội dung. nội dung văn bản trong trình soạn thảo
chiều rộng. chiều rộng
chiều cao. chiều cao
UI. tham chiếu đến khung iframe
editor. tham chiếu đến tài liệu đối tượng của khung iframe. Biến này trực tiếp thi hành các lệnh.

Hàm doFormat ở bản cũ sẽ trở thành phương thức formatText của lớp đối tượng RichTextEditor.



RichTextEditor. nguyên mẫu. formatText=function(dấu phẩy, giá trị){
if(this. biên tập viên. queryCommandEnabled(lệnh)){
if(. value){value=null;}
cái này. biên tập viên. execCommand(command,false,value);
}
}



Và tương tự cho addLink, insertImage, unformat.



RichTextEditor. nguyên mẫu. addLink=function(){
var aLink=prompt('Nhập hoặc dán liên kết. ', '');
if(aLink){
this. formatText('CreateLink', aLink);
}
}
RichTextEditor. nguyên mẫu. insertImage=function(){
this. giao diện người dùng. focus();
var aLink=prompt('Nhập hoặc dán URL. ', '');
if(aLink){
this. formatText('InsertImage', aLink);
}
}
RichTextEditor. nguyên mẫu. unformat=function(){
cái này. formatText('removeformat');
cái này. formatText('unlink');
}


Xin ra chúng ta cũng thêm vào 1 phương thức mới là getContent để lấy nội dung văn bản.


RichTextEditor. nguyên mẫu. getContent=function(){
return cái này. biên tập viên. thân thể. innerHTML;
}

Cuối cùng là 1 hàm dùng để khởi tạo trình soạn thảo, được gọi sau khi trang tải xuống để chỉnh sửa.



function init(){

RTE=new RichTextEditor('RTE', 'wysiwyg', '', 500, 240);

setBtnAction('btnBold', 'RTE.formatText("bold")');
setBtnAction('btnItalic', 'RTE. formatText("italic")');
setBtnAction('btnUnderline', ' RTE. formatText("underline");');
setBtnAction('btnInsertImage', 'RTE. insertImage();');
setBtnAction('btnAddLink', 'RTE. addLink();');
setBtnAction('btnUnformat', ' RTE. unformat();');
}


Biến RTE được sử dụng để thể hiện lớp RichTextEditor. Các dòng sau thiết lập hành động cho từng nút lệnh trên thanh công cụ.

init is call onload the same event.


cửa sổ. onload=init ;

Và thế là chúng ta đã có phiên bản Rich Text Editor mới, tuy không thay đổi trên giao diện, nhưng cấu trúc chương trình đã trở nên chặt chẽ hơn Chắc chắn.

Bản trình diễn.
http. // sacroroyant. đại học. cc/Ví dụ/Trình chỉnh sửa/V1/rte2. htm


Còn đây là sản phẩm hoàn thiện.


http. // d. máy chủ hình ảnh. org/0758/Biên tập viên. png (http. // sacroroyant. đại học. cc/Examples/Editor/)

Từ bản demo Rút ​​gọn đến sản phẩm sau cùng chỉ còn một khoảng thời gian ngắn, và chắc chắn bạn sẽ thấy dễ chịu hơn nếu đi tới đó một mình lol

thần thánh

03-01-2008, 13. 00

Clipboard là một vùng nhớ tạm thời trong cửa sổ, nơi chứa dữ liệu mà chúng ta đã sao chép hoặc cắt. Các ứng dụng khác nhau vẫn được phép sử dụng chung khối dữ liệu này. Có nghĩa là bạn có thể sao chép văn bản trong MS Word, sau đó dán lên khung soạn thảo của Google Docs (http. // tài liệu. Google. com/).

Các lệnh "sao chép", "cắt", "dán" cho phép RTE của chúng ta làm điều này. Nhưng vì lý do an toàn, ngoại trừ IE, các trình duyệt khác đều mặc định vô hiệu hóa tính năng trên.

Nếu Java Script cố gọi lệnh này trên Mozilla, trình duyệt sẽ trả về lỗi.


Lỗi. [Ngoại lệ. Mã "Quyền truy cập vào dịch vụ XPConnect bị từ chối". kết quả "1011". "0x805303f3 (NS_ERROR_DOM_XPCONNECT_ACCESS_DENIED)"

Google Documents bắt lỗi này lại và cho ra thông báo.


http. //trang trại3. tĩnh. flickr. com/2111/2158772881_27c098df3f_o. jpg

Yêu cầu phương pháp đã được đưa ra để giải quyết nỗi sợ hãi này, đồng thời tránh việc phải yêu cầu người dùng thay đổi cấu hình trên hệ thống của họ. Một trong những phương pháp khá thú vị là sử dụng Action Script. Do ngôn ngữ này có thể thâm nhập sâu vào hệ thống của khách hàng nên 1 chương trình flash đã được viết ra để bổ sung khả năng vào nơi mà Java Script bất lực. (Xem chi tiết (http. //www. jeffothy. com/weblog/clipboard-copy/))

Nhưng nếu bạn đã từng sử dụng Zoho Writer (http. //nhà văn. zoho. com), bạn sẽ thấy họ vẫn đang thực hiện lệnh sao chép, cắt và dán hoạt động trên FireFox. Lần tìm giải pháp trong mã nguồn của một ứng dụng web phức tạp như Zoho Writer (http. //nhà văn. zoho. com) là một công việc không mấy dễ dàng. Chỉ còn cách dựa vào các biểu hiện để phán đoán.

Điều dễ nhận thấy là chúng ta không thể đẩy khối văn bản được sao chép hoặc cắt từ khung soạn thảo của Zoho Writer vào MS Word, và ngược lại, cũng không thể sử dụng lệnh dán trên khung . Từ đó cho thấy nội dung chỉ được lưu trong 1 biến tạm thời của kịch bản javascript mà Zoho Writer sử dụng.

Tuy nhiên, cách làm của Zoho Writer (http. //nhà văn. zoho. com) chưa hoàn toàn phục hồi. Hạn chế của nó là không ngăn chặn được "kiểu hợp nhất". Xem hình minh họa bên dưới.


http. //trang trại3. tĩnh. flickr. com/2351/2158265821_560faa7706. jpg (http. //trang trại3. tĩnh. flickr. com/2351/2158265821_291e7efe0b_o. jpg)

Đầu tiên tôi chọn đoạn văn bản "thuộc tính designMode", nhấn lệnh Copy bên trên toolBar, rồi đặt con trỏ vào cuối dòng tiêu đề - "Viết lớp cho trình soạn thảo", sau đó nhấn . Kết quả là chuỗi được dán sẽ mang định dạng của chuỗi tiêu đề bài viết mà không giữ nguyên kiểu dáng của nó. Nếu bạn quen dùng MS Word thì điều này thật đáng ngạc nhiên.

Chúng ta sẽ giải quyết vấn đề một cách triệt để hơn Zoho. Ý tưởng cơ bản là tạo ra 1 bản sao chính xác của phần văn bản được chọn, lưu nó vào một biến tạm thời. Biến này đóng vai trò clipboard, được xem như 1 thuộc tính của lớp RichTextEditor.

Với mỗi lệnh, chúng ta sẽ có cách xử lý tương ứng.


bản sao. tạo bản sao của lựa chọn, lưu vào biến tạm thời.
cắt. sao chép rồi xóa đi phần lựa chọn văn bản.
dán. mount string in atemporary to back editor.


Để thực hiện ý tưởng, trước hết hãy tìm hiểu đôi chút về Lựa chọn và Phạm vi.

Phạm vi là một phần nội dung trong hồ sơ HTML, thường liên quan đến phần văn bản được đánh dấu bởi người sử dụng. Đối tượng này mô tả tất cả nội dung giữa điểm đầu và điểm cuối. Với các phương thức và thuộc tính của các đối tượng này, chúng ta có thể làm được khá nhiều việc với phần văn bản đang ở trạng thái được chọn. Cùng một thời điểm, có thể tồn tại nhiều phạm vi đối tượng.

Selection là đối tượng chỉ phần văn bản đang ở trạng thái được chọn và đang hoạt động. Nó cung cấp thông tin về văn bản và toàn bộ các phần tử nằm trong phần văn bản được chọn. Không hoàn toàn giống với Phạm vi, Lựa chọn liên quan đến các đối tượng văn bản, như. từ, câu, đoạn. In the 1 time point only could tồn tại 1 Lựa chọn.

Điểm khác biệt giữa Range và Selection khá tinh tế. Lấy 1 minh họa như hình dưới đây cho dễ hiểu.


http. //trang trại3. tĩnh. flickr. com/2337/2161283730_eb0c77167f_o. jpg

Nếu bạn tạo 1 Lựa chọn từ phần được chọn, các đối tượng này sẽ phản ánh chuỗi "đối tượng để sửa đổi tài liệu

Chính vì vậy, việc sử dụng Range cho phép chúng ta không những lấy ra phần text selection mà cả các phần tử chứa nó - các tag HTML, nghĩa là text selection có kèm theo định dạng :rolleyes:

VỚi Opera và Mozilla, bạn có thể tạo Range bằng phương thức createRange của đối tượng document, hoặc phương thức getRangeAt của đối tượng Selection. Khi chọn 1 đoạn text bất kỳ trên trang web, bạn có thể lấy nội dung phần được chọn bằng phương thức getSelection của window. Phương thức này cũng đồng thời tạo ra một đối tượng Selection.

Range có khá nhiều thuộc tính và phương thức. Danh sách đầy đủ bạn có thể xem tại đây (http://developer.mozilla.org/en/docs/DOM:range). Trong số này chúng ta sẽ cần đến 2 phương thức extractContents và cloneContents.

cloneContents trả về 1 bản sao chính xác của range hiện thời, tức là phần text được chọn. extractContents cũng tương tự cloneContents, nhưng loại bỏ range gốc. Kết quả trả về từ 2 phương thức này có dạng 1 đối tượng documentFragment. Tới đây chúng ta rơi vào lãnh địa của XML và DOM.

Vì documentFragment giống như mọi phần tử trong 1 hồ sơ XML, chúng ta sẽ dùng phương thức serializeToString của đối tượng XMLSerializer được các trình duyệt tuân thủ chuẩn W3C hỗ trợ, để chuyển phần hồ sơ XML đó về dạng chuỗi thông thường.


Ngược lại với serializeToString của đối tượng XMLSerializer là phương thức parseFromString của đối tượng DOMParser, cho phép bạn thao tác trên 1 chuỗi text bình thường như với một tập hợp node trong hồ sơ XML.

Chẳng hạn bạn có chuỗi s='125789', đây không phải là dữ liệu trong 1 hồ sơ XML nên bạn không thể xử lý result như phần tử XML. Và bạn cần parseFromString để làm điều đó.


Trở lại với công việc chính, theo logic chương trình như trên, chúng ta thêm vào class RichTextEditor 1 thuộc tính có tên là clipBoard :


function RichTextEditor(sID, oContain, sDefaultText, iWidth, iHeight){
this.ID=sID;
this.content=sDefaultText;
this.width=(iWidth>300?iWidth:500);
this.height=(iHeight>80?iHeight:200);
this.clipBoard='';
....

Và phương thức useClipboard được định nghĩa như dưới đây :


RichTextEditor.prototype.useClipboard=function(com mand){
if(isIE){
this.format(command);
}
else{
if(command=='cut'||command=='copy'){
var sel = this.UI.getSelection();
if(sel==''){return;}
var range = sel.getRangeAt(0);
var docFrag = (command=='cut')?range.extractContents():range.clo neContents();
var xmls = new XMLSerializer();
this.clipBoard=xmls.serializeToString(docFrag);
}
else if(command=='paste'){
if(this.clipBoard!=''){
this.format('inserthtml',this.clipBoard);
}
}
}
this.UI.focus();
}

useClipboard kiểm tra xem trình duyệt có phải IE không, nếu là IE thì thực hiện command bình thường. Ngược lại, bắt đầu phân tích command.

Với copy và cut, chúng ta tạo ra Selection


var sel = this.UI.getSelection();

Từ đối tượng Selection này, chúng ta tạo Range bằng phương thức getRangeAt(0). Ở đây, tham số 0 ám chỉ Range đầu tiên trong tập hợp Range.


var range = sel.getRangeAt(0);

Và clone của nó ở dạng documentFragment. Nếu là cut thì sử dụng extractContents, nếu là copy thì sử dụng cloneContents :


var docFrag = (command=='cut')?range.extractContents():range.clo neContents();

Cuối cùng , chúng ta khởi tạo XMLSerializer và chuyển chuỗi vào clipboard của Editor.


var xmls = new XMLSerializer();
this.clipBoard=xmls.serializeToString(docFrag);


Với paste, chúng ta dùng command inserthtml để chèn chuỗi từ clipboard vào editor :


this.format('inserthtml', this.clipBoard);

Thế là vấn đề đã được giải quyết xong. Bây giờ hãy thêm vào toolbar các lệnh Copy, Cut và Paste :

Và thêm thiết lập action trong hàm init :


setActionOnButton('btnCut', 'RTE.useClipboard("cut");');
setActionOnButton('btnCopy', 'RTE.useClipboard("copy");');
setActionOnButton('btnPaste', 'RTE.useClipboard("paste");');

Kết quả sẽ như trang demo này :

http://sacroyant.uni.cc/Examples/Editor/V1/rte3.htm


:::::::::::::::::::::::::::::::::::::::::::::::::: ::::::::::::::

* Bổ sung một chút

Phương thức unformat không hoạt động chính xác trên Opera, đã được sửa lại như sau :



var isOp=(navigator.appName=='Opera')?true:false;

RichTextEditor.prototype.unformat=function(){
if(isOp){
var sel = this.UI.getSelection();
this.format('inserthtml', sel);
}
else{
this.format('removeformat');
this.format('unlink');
}
}

Ban biên tập xin cáo lỗi cùng quý độc giả lol

thần thánh

28-02-2008, 05. 37

Nhúng bộ gõ chữ Việt

Để nhúng bộ gõ chữ Việt, chúng ta có thể sử dụng AVIM. Nó xử lý khá thông minh và hỗ trợ tốt các định dạng iframe có thể chỉnh sửa.

Bạn có thể tải AVIM từ trang web của tác giả. http. //hdang. đồng. uk/

Việc sử dụng khá đơn giản, bạn chỉ cần nhúng tệp JavaScript có tên là AVIM. js vào trong trang web chứa Editor, nó sẽ làm việc.

Điều duy nhất cần chú ý là nên bỏ chế độ kiểm tra chính tả, nó thường làm người sử dụng khó chịu khi nhập các thuật ngữ tin học bằng tiếng Anh. Ví dụ như ở diễn đàn này, khi tôi gõ AJAX, nó sẽ thành công. Unknown.

Để loại bỏ chế độ sửa chữa mô tả chính xác, bạn mở AVIM. js, edit the dockspell value value to 0, default of it is 1.

AVIM hỗ trợ 5 kiểu gõ. AUTO, TELEX, VNI, VIQR, VIQR*. Tuy nhiên, hiện nay được sử dụng nhiều nhất vẫn là VNI, trong trang demo dưới đây, tôi chỉ sử dụng VNI.

http. // sn. người viết blog. org/Biên tập viên/

http. //trang trại4. tĩnh. flickr. com/3068/2297096106_db8af3f757_o. jpg


Đăng dữ liệu trong Trình soạn thảo với AJAX

Để có thể sử dụng AJAX gửi nội dung văn bản trong trình soạn thảo từ máy chủ lên, chúng ta thêm vào 2 hàm sau.


function cod(s){return encodeURIComponent(s);}
function AJAXControl(){
var req=null; . ActiveXObject){
if(window.ActiveXObject){
req=new ActiveXObject("Msxml2. XMLHTTP");
if(. req){
req=new ActiveXObject("Microsoft. XMLHTTP");
}
}
else if(window. XMLHttpRequest){
req=new XMLHttpRequest();
req. overrideMimeType('text/html');
}
return req;
}

. Bây giờ tôi thêm 2 phương thức khác là getText và doPost. Phương thức getText cho phép lấy toàn bộ văn bản trong văn bản mà không tính đến định dạng mã. Phương thức do Post làm nhiệm vụ gửi nội dung văn bản có định dạng HTML code đính kèm.


RichTextEditor. nguyên mẫu. getText=function(){
return isIE?this. biên tập viên. thân thể. nội dung. cái này. biên tập viên. thân thể. t extContent;
}

RichTextEditor. nguyên mẫu. doPost=function(mục tiêu){
var content=this. getContent();
if(content==''){
alert("Không có dữ liệu để gửi. ");
return;
}
else if(this. getText(). length
alert("Tin nhắn quá ngắn. ");
return;
}
else{
val='content=' . =null&&typeof(req). =undefined){
var req=AJAXControl();
if(req!=null&&typeof(req)!=undefined){
yêu cầu. onreadystatechange =function(){
if(req. readyState==4 && yêu cầu. status==200){
var response=req. responseText;
//xử lý kết quả trả về
}
req. open("POST", target, true);
req. setRequestHeader("Content-Type","application/x-www-form-urlencoded;");
req. send(val);
}
}
}

Như vậy, phương thức doPost . Các vấn đề xem khá đơn giản và không cần giải thích gì thêm.

Một ví dụ minh họa là Phần Thảo luận - Góp ý (http. //thuvienvl. đại học. cc/?action=discussion) trên Võ lâm văn sĩ giai phẩm quán (http. //thuvienvl. đại học. cc/?).

http. //thuvienvl. đại học. cc/?action=discussion

http. //trang trại4. tĩnh. flickr. com/3127/2296331757_90e29cd460. jpg (http. //trang trại4. tĩnh. flickr. com/3127/2296331757_0356013a9a_o. jpg)

(Bác nào hiểu rõ về lỗi XSS thì kiểm tra giúp mình với lol)

Bài hướng dẫn này xin dừng ở đây. Nếu các bạn còn thắc mắc gì thêm, xin vui lòng cho biết, tôi sẽ cố gắng trả lời trong thời gian nhanh nhất.

Tạm biệt.

thần thánh

13-07-2008, 11. 03

Cám ơn bác thần thánh rất nhiều. Em cũng đã làm được rồi nhưng em vẫn chưa biết dữ liệu được lấy từ bàn phím vào iframe rồi sẽ sử lý tiếp thế nào nữa. if em to it into a form, then will must get data as THẾ NÀO. Một lần nữa xin cám ơn bác. D.

Hôm nay vẫn ghé mà không để ý có bạn hỏi, xin lỗi.

Ở phần này (http. //www. đth. com/showthread. php?p=978864#post978864) mình đã trình bày các phương thức của Editor, bao gồm getContent. That is used to get content in Editor.

Có nhiều cách đăng nội dung này lên máy chủ. Bạn không giới hạn sử dụng 1 input ẩn, khi gửi biểu mẫu thì gọi 1 hàm javascript có nhiệm vụ.

- lấy nội dung trong trình chỉnh sửa bằng getContent
- chuyển nội dung vào chế độ ẩn đầu vào
- thực hiện các kiểm tra khác .
- gửi biểu mẫu như bình thường.

Khi đó, ở máy chủ, nếu bạn viết mã bằng PHP, và tên thẻ nhập ẩn là "dữ liệu" giả tạo, thì nội dung gửi lên được ghi nhận bằng $_POST["data"] .

Trong trường hợp dùng AJAX, bạn không cần tạo input ẩn.

thần thánh

15-07-2008, 08. 13

cách lấy nội dung trong trình soạn thảo thì em đã hiểu nhưng em vẫn chưa biết truyền nội dung đó nên ẩn đầu vào như thế nào. D. Em sẽ phải tạo một kiểu đầu vào ẩn nhưng giá trị của nó em sẽ phải làm sao. D. Mong anh thông cảm em mới học java script nên đừng bao nhiêu. D.

Giả sử chúng ta đã có 1 trình soạn thảo trên trang như trong các hướng dẫn bài viết. Bây giờ để đăng nội dung trong trình chỉnh sửa lên 1 tệp xử lý gửi. php theo cách truyền thống. Chúng ta tạo 1 biểu mẫu.

Và đây là hàm doSend :


hàm doSend(){
var content=RTE. getContent();
// kiểm tra dữ liệu nếu muốn.
//.

//gán giá trị trong trình soạn thảo vào đầu vào ẩn.
tài liệu. f. dữ liệu. value=content;

//và gửi biểu mẫu.
tài liệu. f. submit();
}

Cuối cùng là gửi. php, sợ gì mà không kiểm tra nhỉ. )


?$content=$_POST['data'];
echo $content;< . < . < .
?>


- Trong cấu trúc của hồ sơ HTML , form trên không nhất thiết phải bao lấy phần editor.
- Nếu sử dụng iframe ẩn, bạn chỉ định mục tiêu cho biểu mẫu. Cách này phù hợp hơn cả khi làm việc với các WYSIWYG.
- Nếu truyền dữ liệu qua XMLHttpRequest, bạn không cần phải tạo biểu mẫu này nếu không có các trường khác phải gửi đi. Đây là cách người dùng thích sử dụng nhất.

Cảm ơn bạn đã quan tâm đến chủ đề này. )

thần thánh

12-08-2008, 17. 47

@sacroyant. bạn chèn thêm Yahoo eco bằng hàm nào thế nhỉ ?
mình có xem mã nguồn bạn chia sẻ chỉnh sửa xong chưa tìm ra.
Cảm ơn.

Đến biểu tượng cảm xúc của Yahoo. IM vào editor, mình tạo 1 mảng đa chiều.


cái này. biểu tượng cảm xúc=[
['hạnh phúc','. )','1. gif'],
['buồn','. (','2. gif'],
['rose','@};-','53. gif'],
['cà phê','~O)','57. gif'],
['chớp mắt',';;)','5. gif'],
['cái ôm lớn','>. D
['bối rối','. -/','7. gif'],
['tình yêu sét đánh','. x','8. gif'],
['đỏ mặt','. ">','9. gif'],
['lưỡi','. P','10. gif'],
['bất ngờ','. -O','13. gif'],
['cool','B-)','16. gif'],
['khóc','. ((','20. gif'],
['cười','. ))','21. gif'],
['mặt thẳng','. ','22. gif'],
['đừng nói với ai nhé','. -$','32. gif'],
['ngáp','(. ','37. gif'],
['suy nghĩ','. -?','39. gif'],
['d\'oh','#-o','40. gif'],
['vỗ tay','=D>','41. gif'],
['angel','O. )','25. gif'],
['daydreaming','8->','105. gif'],
['kiss','. -*','11. gif'],
['gif','X(','14. gif'],
['lo lắng','. -S','17. gif'],
['đang chờ','. -w','45. gif'],
['Tôi không biết','. -??','106. gif'],
['xấu hổ về bạn','[-X','68. gif'],
['huýt sáo','. -"','65. gif'],
['đang cầu nguyện','[-O
['nháy mắt',' ;)','3. gif'],
['cười toe toét','. D','4. gif']
];

Như vậy này. biểu tượng cảm xúc[n][0] là ý nghĩa của biểu tượng, hiển thị dưới dạng tiêu đề khi di chuột lên. cái này. biểu tượng cảm xúc[n][1] là ký tự viết tắt của biểu tượng cảm xúc. Và cái này. biểu tượng cảm xúc[n][2] là tên tệp hình (mà Yahoo. set for).

Sau đó mình viết 1 phương thức có tên là osl (nghĩa là Open Smiley List ấy mà. )) để duyệt qua các chiều của mảng và tạo thành 1 bảng biểu tượng.


cái này. osl=function(){
var s='
var h=0,k=0;
for(var i=0;i<8;i++){
s+='