CKEditor - Trình Soạn Thảo Theo Kiểu WYSIWYG

Thảo luận trong 'Software' bắt đầu bởi Elain Godiva, 29 Tháng chín 2018.

  1. Elain Godiva

    Bài viết:
    7
    WYSIWYG (viết tắt của What You See Is What You Get ), được hiểu là "những gì bạn đang thấy là những gì bạn sẽ nhận được" hoặc hiểu nôn na là "tay làm - mắt thấy"

    CKEditor là một trình soạn thảo văn bản, cụ thể là HTML, nó hỗ trợ người dùng trong việc soạn thảo văn bản trong thiết kế website

    Điểm nổi bật của CKEditor là đơn gian, nhẹ gọn mà đầy đủ chức năng, cài đặt dễ dàng, miễn phí.

    [​IMG]

    Để chèn CKEditor vào website mà cụ thể là mã HTML chúng ta làm như sau:

    Bước 1: Tải giói cài đặt CKEditor

    Để tải CKEditor các bạn có thể tải về từ link dứoi đây:

    Phiên bản hiện tại là 4.5. X

    • Nội dung HOT bị ẩn:
      Bạn cần đăng nhập & nhấn Thích để xem
    • Nội dung HOT bị ẩn:
      Bạn cần đăng nhập & nhấn Thích để xem
      (link dự phòng)
    • Nội dung HOT bị ẩn:
      Bạn cần đăng nhập & nhấn Thích để xem
      (link dự phòng)

    Bước 2: Giải nén file vừa tải về

    Sau khi giải nén chúng ta được cấu trúc các thư mục của CKEditor như sau:

    [​IMG]

    Bước 3: Chèn CKEditor vào mã HTML

    Trình soạn thảo CKEditor sẽ được chèn vào thẻ textarea.

    Ví dụ: Các bạn tạo file html với nội dung sau.

    <html>

    <head>

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

    <title>Demo CKEditor</title>

    <script src= "ckeditor/ckeditor. Js" ></script>

    </head>

    <body>

    <h1>Demo CKEditor</h1>

    <form >

    <textarea name= "ten" id= "ten" ></textarea>

    <script>CKEDITOR. Replace ( 'ten' ) ;</script>

    </form>

    </body>

    </html>

    Chú ý:

    • Chèn script Ckeditor: <script src= "ckeditor/ckeditor. Js" ></script>
    • Khai báo CKEditor: <script>CKEDITOR. Replace ( 'ten' ) ;</script>. Trong dó "ten" là id của textarea

    Kết quả hiển thị như sau:

    [​IMG]
     
Trả lời qua Facebook
Đang tải...