Hướng dẫn tích hợp ckfinder 3.4.2 và ckeditor

https://docs-old.ckeditor.com/ckfinder3-net/integration.html

 

Advertisements

CKEditor 4 và CFinder 3 – PHP

Hướng dẫn cài đặt CKEditor 4 và Cfinder 3

  • Tải CKEditor, CKFinder ở 2 link sau

https://ckeditor.com/ckeditor-4/
https://ckeditor.com/ckeditor-4/download/#ckfinder (3.4.2)

  • Giải nén và chép ckeditor, cfinfer vào thư mục gốc của website (web root folder)
  • Cấu hình cfinder tích hợp với ckeditor

Thay đổi $config[‘authentication’] file config.php nằm trong thư mục cfinder như sau

$config[‘authentication’] = function () {
return true; // FALSE -> TRUE
};

  • Add CKEditor vào trang web

src=”ckeditor/ckeditor.js”>
src=”ckfinder/ckfinder.js” type=”text/javascript”>

Thành phần TEXT EDITOR //TextArea
<textarea name=”editor1″ id=”editor1″ rows=”10″ cols=”80″>
This is my textarea to be replaced with CKEditor.
</textarea>
//Script for CKEditor

// Replace the with a CKEditor
// instance, using default configuration.
var editor = CKEDITOR.replace( ‘editor1’, {
filebrowserBrowseUrl: ‘ckfinder/ckfinder.html’,
filebrowserImageBrowseUrl: ‘ckfinder/ckfinder.html?type=Images’,
filebrowserFlashBrowseUrl: ‘ckfinder/ckfinder.html?type=Flash’,
filebrowserUploadUrl: ‘ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files’,
filebrowserImageUploadUrl: ‘ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images’,
filebrowserFlashUploadUrl: ‘ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash’
});
CKFinder.setupCKEditor( editor, {
skin: ‘jquery-mobile’,
swatch: ‘b’,
onInit: function( finder ) {
finder.on( ‘files:choose’, function( evt ) {
var file = evt.data.files.first();
console.log( ‘Selected: ‘ + file.get( ‘name’ ) );
} );
}
} );

 

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