Asked Oct 25th, 2017 7:19 AM 411 0 1
  • 411 0 1
0

(Angularjs) Upload ảnh

Share
  • 411 0 1

Chào cả nhà. Hiện tại mình đang làm phần upload ảnh. Mình muốn khi click vào 1 button thì nó link trực tiếp đường dẫn ảnh đã được cấu hình cho ck-finder để vào thư viện ảnh trên server. Nhưng mình chưa biết cấu hình sao. Mong cả nhà giúp đỡ. Thanks all!

Thang Tran Duc @thangtd90
Oct 26th, 2017 1:03 AM

Câu hỏi của bạn mơ hồ và khó hiểu quá 😂

Bạn có thể giải thích rõ link trực tiếp đường dẫn ảnh đã được cấu hình cho ck-finder là sao, vào thư viện ảnh trên server là như thế nào không 🤔

Bạn chia sẻ đoạn code hiện tại của mình, và nói rõ mình muốn thực hiện điều gì, lên thì tốt 😄

0
| Reply
Share
Hà Nhung @hathinhung92
Oct 26th, 2017 1:24 AM

@thangtd90 Bình thường hi quản trị nội dung sẽ tích hợp ckfinder vào trong ckeditor. Nhưng mình muốn tích hợp ckfinder vào button FileUpload, để khi click vào button FileUpload nó sẽ mở ra popup chọn tệp của ckfinder thôi.

0
| Reply
Share

1 ANSWERS


Answered Oct 30th, 2017 3:06 AM
Accepted
0

Theo như mình đọc document và test từ trang https://docs.ckeditor.com/ckfinder/ckfinder3/#!/guide/dev_installation hay https://docs.ckeditor.com/ckfinder/demo/ckfinder3/samples/modals.html , thì có vẻ bạn có thể làm như thế này để chạy CKFinder từ button.

var button1 = document.getElementById( 'ckfinder-popup-1' );
var button2 = document.getElementById( 'ckfinder-popup-2' );

button1.onclick = function() {
	selectFileWithCKFinder( 'ckfinder-input-1' );
};
button2.onclick = function() {
	selectFileWithCKFinder( 'ckfinder-input-2' );
};

function selectFileWithCKFinder( elementId ) {
	CKFinder.modal( {
		chooseFiles: true,
		width: 800,
		height: 600,
		onInit: function( finder ) {
			finder.on( 'files:choose', function( evt ) {
				var file = evt.data.files.first();
				var output = document.getElementById( elementId );
				output.value = file.getUrl();
			} );

			finder.on( 'file:choose:resizedImage', function( evt ) {
				var output = document.getElementById( elementId );
				output.value = evt.data.resizedUrl;
			} );
		}
	} );
}

Khi đó, click vào nút Browse Server thì Popup Window của CKFinder sẽ mở ra, cho phép bạn chọn file, bạn thử xem có được không 🤔

Hay ở trang này cũng có hướng dẫn tương tự tại https://docs.ckeditor.com/ckfinder/ckfinder3/#!/guide/dev_integration

Đấy là code ở phía js, ngoài ra, để chạy được CKFinder trong project của mình, bạn cần code ở phần backend nữa. Cụ thể, nếu bạn dùng PHP thì cần phải enable CKFinder PHP Connector, bạn có thể download source code về và làm theo hướng dẫn ở đây: https://docs.ckeditor.com/ckfinder/ckfinder3-php/quickstart.html

Share
Hà Nhung @hathinhung92
Nov 1st, 2017 7:07 AM

Cảm ơn bạn. Mình đã làm được rồi. Hihi

+1
| Reply
Share