Tích hợp WYSIWYG HTML editor cho biên tập tin tức Dspace

Discussion in 'Huớng dẫn, tài liệu Dspace' started by chiasetrithuconline, Mar 4, 2019.

  1. chiasetrithuconline

    chiasetrithuconline New Member

    Mặc định khung soạn thảo tin tức (tin tức bên trên và tin tức thanh slidebar) của Dspace chỉ là form html cơ bản, nếu người sử dụng không biết code html thì khá khó khăn khi định dạng văn bản cho nội dung (tô màu, tạo chữ in nghiêng, đậm, chèn link…). Hôm nay mình sẽ hướng dẫn cơ bản cách chèn trình soạn thảo WYSIWYG HTML editor cho tin tức slidebar, ở đây cụ thể sẽ dùng CKEditor.
    [​IMG]
    Form mặc định Dspace

    [​IMG]

    Form đã tích hợp ckeditor

    Chi tiết cách tích hợp như sau:

    - Đầu tiên truy cập website để tải về souce code CKEditor theo link : https://ckeditor.com/ckeditor-4/ ( ở đây mình sẽ tải phiên bản CKEditor 4.)
    - Chọn mục Download , ở đây sẽ cho bạn 4 tùy chọn tải về bao gồm: các phiên bản basic, stand, full, customize, tùy nhu cầu sử dụng bạn có thể tải bản phù hợp, mình sẽ tải bản full để trải nghiệm thử).
    Nếu không muốn tải về bạn có thể sử dụng nhanh liên kết tập tin ckeditor.js thông qua tùy chọn CKEditor CDN.
    - Sau khi tải source về, tiến hành giải nén vào copy thư mục chứa source ckeditor vào mục static của dspace theo đường dẫn C:\dspace\webapps\jspui\static\ckeditor (đường dẫn có thể thay đổi theo thư mục cài đặt dspace trên máy của bạn).
    - Mở file footer-default.jsp ( đường dẫn C:\dspace\webapps\jspui\layout), thêm đoạn code sau trước thẻ </footer>
    // code ckeditor
    <script type=”text/javascript” src=”<%= request.getContextPath() %>/static/ckeditor/ckeditor.js”> </script>
    <script>

    <script>
    CKEDITOR.replace( ‘news’ );
    </script>
    Nếu bạn sử dụng ckeditor.js thông qua tùy chọn CKEditor CDN thì thay thế link liên kết đến tập tin ckeditor.js
    - Reload lại trình duyệt và mở biên tập tin tức trên Dspace để sử dụng.

    - Kết quả định dạng text cho tin tức:
    [​IMG]

    Lưu ý: để trình soạn thảo nhẹ nhàng khi load thì nên sử dụng bản stand hoặc bỏ bớt các chức năng không sử dụng bằng cách chọn chức năng Online Builder trước khi tải source về. Còn nếu bạn đã tải bản full về mà muốn loại bỏ bớt chức năng thì có thể làm như sau:
    - Trong source ckeditor tải về, bạn mở file index.html ( trong đường dẫn ckeditor\samples) để try cập chức năng config ckeditor.
    - Giao diện config mở lên, bạn chọn Toolbar Configurator, và tiến hành bỏ các chức năng không sử dụng ( bằng cách click bỏ dấu check vào chức năng không dùng đến).
    [​IMG]
    - Tiếp theo chọn Get toolbar config, copy code và dán vào file config.js nằm trong thư mục chứa ckeditor.
    - Reload lại trình duyệt để kiểm tra sự thay đổi.
    [​IMG]

    Bài viết còn thiếu sót nhiều, rất mong các anh chị cho ít gạch đã xây nhà hehe.
  2. Tran huu Trung

    Tran huu Trung Active Member

    Cái này hay đây. Bộ soạn thảo của Dspace là bản đơn giản, hơi chuối. Tích hợp WYSIWYG là ngon.
    hay đấy @chiasetrithuconline
    chiasetrithuconline likes this.
  3. chiasetrithuconline

    chiasetrithuconline New Member

    Không biết còn thư viện nào dùng chức năng tin tức này không chứ đa số là dùng hình ảnh thay thế hoặc code trực tiếp trên file home :):)
  4. Tran huu Trung

    Tran huu Trung Active Member

    Chủ yếu là phần này của dspace chuối, nên ko ai dùng, chỉ dùng mức tối thiểu.
    chiasetrithuconline likes this.

Share This Page