CKEditor – CKFinder đã cấu hình

Link download CKEditor – CKFinder đã cấu hình, copy paste sau đó tích hợp vào ứng dụng web.

Tải CKFinder

Tải CKEditor

Dưới đây là mã nguồn Image Manager ImageManager

 

Advertisements

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