Tạo text editor đơn giản với jQuery

Html & Javascript 29-3-2015

Nếu các bạn đã từng dùng WordPress hay Joomla để làm website thì đã quá quen thuộc với các text editor được hỗ trợ từ những mã nguồn mở này. Trong bài viết hôm nay, mình sẽ bày cho các bạn một cách có thể làm Text Editor cho chính website hay blog của mình từ phần tử Text Area trong HTML bằng jQuery.

jQuery, jQuery Plugins, text editor,Text Area, create text editor

Để tạo text editor chúng ta sẽ sử dụng Plugin tên là nicEdit. Đây là plugin rất nhẹ và dễ dàng tích hợp.

Bước 1 : Chèn plugin vào bên trong thẻ <head>

<script type="text/javascript" src="http://js.nicedit.com/nicEdit-latest.js"></script>

Bước 2 : Sau đó chúng ta chèn thêm đoạn khởi tạo sau :

<script type="text/javascript">

        bkLib.onDomLoaded(function() { nicEditors.allTextAreas() }); // convert all text areas to rich text editor on that page



        bkLib.onDomLoaded(function() {

             new nicEditor().panelInstance('area1');

        }); // convert text area with id area1 to rich text editor.



        bkLib.onDomLoaded(function() {

             new nicEditor({fullPanel : true}).panelInstance('area2');

        }); // convert text area with id area2 to rich text editor with full panel.

</script>

Trong đoạn code bên trên area2 chính là tên text area mà chúng ta cần tạo text editor.

Để các bạn có thể dễ hiểu, sau đây là toàn bộ đoạn script cho việc tạo text editor như sau :

<html>

<head>

  <title>How to Create textarea into a rich content/text editor using jQuery</title> 

  <script type="text/javascript" src="nicEdit-latest.js"></script>

  <script type="text/javascript">

//<![CDATA[

  bkLib.onDomLoaded(function() {

        new nicEditor({maxHeight : 200}).panelInstance('area');

        new nicEditor({fullPanel : true,maxHeight : 200}).panelInstance('area1');

  });

  //]]>

  </script>

</head>

<body>

<h4>How to Create textarea into a rich content/text editor using jQuery</h4>

<div id="sample">

  <h4>Simple textarea</h4> 

  <textarea name="area" id="area" style="width:70%;height:200px;">

       Some Initial Content was in this textarea

  </textarea>

  <h4>textarea with complete panel</h4>

  <textarea name="area1" id="area1" style="width:70%;height:200px;">

       Some Initial Content was in this textarea

  </textarea>

</div>

</body>

</html>

Mình hy vọng là bài viết này sẽ có ích cho các bạn , và nhớ chia sẻ cho bạn bè mình cùng biết nhé.