Nhúng bộ soạn thảo WYSIWYG cho web
Posted: 9/11/2009.
Bộ soạn thảo WYSIWYG là tên gọi chung cho loại chương trình giúp soạn thảo văn bản, chọn phông chữ, định dạng... với chức năng chính là giúp người dùng thuận tiện hơn trong việc xử lý văn bản.
![Nhúng bộ soạn thảo WYSIWYG cho web]( "Nhúng bộ soạn thảo WYSIWYG cho web")
Bộ soạn thảo WYSIWYG là tên gọi chung cho loại chương trình giúp soạn thảo văn bản, chọn phông chữ, định dạng... với chức năng chính là giúp người dùng thuận tiện hơn trong việc xử lý văn bản.
Bước 1: Tải và cài đặt WYSIWYG vào trang Web:
Trước tiên bạn cần tải mã nguồn của thành phần WYSIWYG, rồi giải nén tập tin zip để được thư mục htmlArea. Sau đó, copy các thư mục image, popups và editor.js trong htmlArea vào thư mục Web của bạn (cùng thư mục với trang Web cần nhúng bộ soạn thảo).
Bước 2: Nhúng bộ soạn thảo vào Web:
Tiếp đến, mở tập tin HTML cần nhúng bộ soạn thảo bằng Notepad hoặc bất kì trình soạn thảo, Web nào khác. Thêm đoạn mã 1 vào giữa cặp thẻ <HEAD></HEAD>.
Đoạn mã 1:
- <script language="Javascript1.2">
- _editor_url = "";
- var win_ie_ver = parseFloat(navigator.appVersion.split("MSIE")[1]);
- if (navigator.userAgent.indexOf('Mac') >= 0) { win_ie_ver = 0;}
- if (navigator.userAgent.indexOf('Windows CE') >= 0) { win_ie_ver = 0;}
- if (navigator.userAgent.indexOf('Opera') >= 0) { win_ie_ver = 0;}
- if (win_ie_ver >= 5.5)
- {
- document.write('<scr' + 'ipt src="' +_editor_url+ 'editor.js"');
- document.write(' language="Javascript1.2"></scr' + 'ipt>');
- }
- else { document.write('<scr'+'ipt>function editor_generate()
- { return false; }</scr'+'ipt>'); }
- </script>
Để tạo ra bộ soạn thảo gồm các chức năng mặc định thì chỉ cần thêm đoạn mã 2 tạo TextArea và đoạn mã 3 vào giữa thẻ <BODY></BODY>.
Đoạn mã 2:
- <TEXTAREA id = “TxtArea” rows=”14” cols = “81”></TEXTAREA>
Đoạn mã 3:
- <script language="JavaScript1.2" defer>
- editor_generate('TxtArea');
- </script>
Nếu muốn thêm bớt các nút chức năng, bạn thay đoạn mã 3 bằng đoạn mã 4, rồi thêm bớt các nút trong mảng config.toolbar, thêm bớt phông ở mảng config.fontnames, thay đổi phông, màu, kích cỡ chữ ở dòng:
config.bodyStyle = 'background-color: white; font-family: "Verdana"; font-size: x-small;';
Đoạn mã 4:
- <script language="JavaScript1.2" defer>
- var config = new Object();
- config.width = "90%";
- config.height = "200px";
- config.bodyStyle = 'background-color: white; font-family: "Verdana"; font-size: x-small;';
- config.debug = 0;
- config.toolbar = [['fontname'],['fontsize'],['fontstyle'],['linebreak'],['bold','italic','underline','separator'],['strikethrough','subscript','superscript','separator'],['justifyleft','justifycenter','justifyright','separator'],['OrderedList','UnOrderedList','Outdent','Indent','separator'],
- ['forecolor','backcolor','separator'],['custom1','custom2','custom3','separator'],['HorizontalRule','Createlink','InsertImage','htmlmode','separator'],['about','help']];
- config.fontnames = {
- "Arial": "arial, helvetica, sans-serif",
- "Courier New": "courier new, courier, mono",
- "Georgia": "Georgia, Times New Roman, Times, Serif",
- "Tahoma": "Tahoma, Arial, Helvetica, sans-serif",
- "Times New Roman": "times new roman, times, serif",
- "Verdana": "Verdana, Arial, Helvetica, sans-serif",
- "impact": "impact",
- "WingDings": "WingDings"
- };
- config.fontsizes = {
- "1 (8 pt)": "1",
- "2 (10 pt)": "2",
- "3 (12 pt)": "3",
- "4 (14 pt)": "4",
- "5 (18 pt)": "5",
- "6 (24 pt)": "6",
- "7 (36 pt)": "7"
- };
- editor_generate('TxtArea',config);
- </script>
Ngoài ra, bạn cũng có thể tải chương trình mẫu về tham khảo (47KB).
[Nghean-Aptech st]
Các tin mới:
Hướng dẫn tích hợp giao diện trang quản trị SB Admin 2 vào Laravel 5.8.
Hướng dẫn tích hợp Google ReCaptcha v2 vào Laravel bằng curl.
Học lập trình React JS trong vòng 5 phút.
Sử dụng trình soạn thảo CKeditor tích hợp CKFinder với Laravel.
Hướng dẫn cài đặt Apache, PHP, MySQL, PHPMyAdmin trên Windows 10 và cấu hình SendMail.
Các tin cũ hơn:
Cách tạo một menu dọc trong C.
Tránh viết mã cứng URL trong Web Service.
Thực thi phương thức một cách bất đồng bộ.
Thực thi phương thức với WaitHandle.
Gọi bất đồng bộ một phương thức web.