Asked thg 10 25, 2017 7:19 SA 880 0 1
  • 880 0 1
0

(Angularjs) Upload ảnh

Share
  • 880 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!

Avatar Tran Duc Thang @thangtd90
thg 10 26, 2017 1:03 SA

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
Avatar Hà Nhung @hathinhung92
thg 10 26, 2017 1:24 SA

@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 thg 10 30, 2017 3:06 SA
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
Avatar Hà Nhung @hathinhung92
thg 11 1, 2017 7:07 SA

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

+1
| Reply
Share
Viblo
Let's register a Viblo Account to get more interesting posts.