Cấu hình toolbar cho CKEditor

Bài viết này hướng dẫn các bạn cách Cấu hình toolbar cho CKEditor với toolbar cơ bản (basic toolbar)

Các bước thực hiện:

  1. Mở file config.js trong thư mục ckeditor
  2. Copy đoạn code sau chèn vào phía trên của file config.js

CKEDITOR.config.toolbar = [
[‘Styles’, ‘Format’, ‘Font’, ‘FontSize’],

[‘Bold’, ‘Italic’, ‘Underline’, ‘StrikeThrough’, ‘-‘, ‘Undo’, ‘Redo’, ‘-‘, ‘Cut’, ‘Copy’, ‘Paste’, ‘Find’, ‘Replace’, ‘-‘, ‘Outdent’, ‘Indent’, ‘-‘, ‘Print’],

[‘NumberedList’, ‘BulletedList’, ‘-‘, ‘JustifyLeft’, ‘JustifyCenter’, ‘JustifyRight’, ‘JustifyBlock’],
[‘Image’, ‘Table’, ‘-‘, ‘Link’, ‘Flash’, ‘Smiley’, ‘TextColor’, ‘BGColor’, ‘Source’]
];

3. Lưu và kiểm tra lại kết quả.

Integrate CKEditor and CKFinder

Bài viết dưới đây hướng dẫn cách tích hợp CKEditor và CKFinder trong ASP.NET MVC. Các bước thực hiện:

  1. Download CKEditor ở địa chỉ CKEditor 4.5.11
  2. Download CKFinder ở địa chỉ CKFinder
  3. Giải nén và copy 2 thư mục CKEditor và CKFinder vào trong thư mục gốc của website, ví dụ cấu trúc ứng dụng web là CMS thì 2 thư mục CKEditor và CKFinder sẽ là (nhớ xóa hết các file source của ckedit và ckfinder):
    • CMS\ckeditor
    • CMS\ckfinder
  4. Chèn scripts vào View cần tạo CKeditor và CKFinder

@section scripts
{
http://~/ckeditor/ckeditor.js
http://~/ckfinder/ckfinder.js
}

5. Chèn CKeditor vào View như sau

@Html.LabelFor(model => model.Content, htmlAttributes: new { @class = “control-label col-md-2” })

@Html.TextAreaFor(model => model.Content, new { htmlAttributes = new { @class = “form-control” } })
@Html.ValidationMessageFor(model => model.Content, “”, new { @class = “text-danger” })

</div>

6. Bổ sung script để tạo CKeditor và tích hợp CKFinder

var editor = CKEDITOR.replace(‘Content’); //Tạo CKEditor
CKFinder.setupCKEditor(editor, ‘/ckfinder/’);//Tích hợp CKFinder