Plugin thêm button upload ảnh lên imgur.com cho Tinymce Editor

Trong quá trình nghịch code wordpress thì đôi lúc mình thấy cần upload ảnh lên imgur.com hay một nơi lưu trữ nào đó thay vì upload trực tiếp lên server, như thế sẽ tiết kiệm được tài nguyên hơn, đặc biệt với những website có nhiều hình ảnh và cho phép thành viên đăng ảnh lên website.
Tìm kiếm trên mạng thì mình thấy có plugin DW Tinymce Imgur Upload đáp ứng rất tốt nhu cầu này, đó là thêm 1 button vào editor để upload trực tiếp ảnh lên imgur.com. Tuy nhiên giá của nó là $17, cũng không hề rẻ vì vậy mình quyết định mày mò viết thử xem sao.
Mình ko phải coder, cũng chưa từng học qua chỉ là mày mò thôi nên code sẽ có phần gà hơn người khác, có gì mọi người góp ý cho mình nhé.

Mình sẽ chia làm 2 phần cho Plugin này.
Phần 1: Viết Plugin thêm nút vào editor upload ảnh lên imgur.com (cái này dễ hơn upload lên nơi khác :D), tuy nhiên chỉ hoạt động trong wp-admin thôi.
Phần 2: Thêm chức năng bình luận có nút upload imgur.com

Cấu trúc plugin sẽ như thế này:

Plugin thêm button upload ảnh lên imgur.com cho Tinymce Editor


Plugin thêm button upload ảnh lên imgur.com cho Tinymce Editor


Chúng ta sẽ tạo ra thư mục và các tệp như trên hình
Đầu tiên là file imgur-upload.php

<?php
/*
* Plugin Name: Imgur Uploader
* Plugin URI: http://codehay.net/
* Description: Plugin Upload ảnh lên Imgur.com cho wordpress
* Author: Sơn Trần
* Version: 1.0
* Author URI: http://codehay.net
*/
add_action('admin_head', 'imgur_add_my_tc_button');
add_action('admin_enqueue_scripts', 'imgur_tc_css');
add_action('admin_enqueue_scripts', 'imgur_action_js');
function imgur_add_my_tc_button() {
global $typenow;
//Check user premissions
if( !current_user_can('edit_posts') && !current_user_can('edit_pages')) {return;}
//verify the post type
if( !in_array($typenow, array('post', 'page')) ) return;
//Check if WYSIWYG is enabled
if( get_user_option('rich_editing') == 'true' ) {
add_filter('mce_external_plugins', 'imgur_add_tiny_plugin');
add_filter('mce_buttons', 'imgur_register_my_tc_button');
}}
function imgur_add_tiny_plugin($plugin_array) {
$plugin_array['imgur_tc_button'] = plugins_url('/js/button.js', __FILE__);
return $plugin_array;
}
function imgur_register_my_tc_button($buttons) {
array_push($buttons, 'imgur_tc_button');
return $buttons;
}
function imgur_tc_css() {
wp_enqueue_style('imgur-tc', plugins_url('/style/style.css', __FILE__));
}
function imgur_action_js() {
wp_enqueue_script('ajax-action', plugins_url('/js/ajax-action.js',__FILE__), array('jquery'), false, true);
wp_localize_script('ajax-action', 'sb_imgur_ajax', array('url' => plugins_url('/imgur.php',__FILE__)));
}

Phần này là add button vào trong editor, trên website đã có 1 bài hướng dẫn cụ thể rồi. Xem tại đây

Tiếp theo là file button.js

(function() {
tinymce.PluginManager.add('imgur_tc_button', function(editor, url) {
editor.addButton('imgur_tc_button', {
title: 'Imgur Uploader',
icon: 'icon imgur-icon',
onclick: function() {
jQuery('body').append('<form action="" method="POST" id="form_file"><input type="file" accept="image/gif,.gif,image/jpeg,.jpg,image/png,.png,.jpeg" id="file" name="file"/></form>');
jQuery('#file').click();
}//onclick: function() {
});//editor.addButton('imgur_tc_button', {
});
})();

Đoạn code trên có tác dụng thêm button và bắt sự kiện khi click vào button.

Code file style.css trong thư mục style như sau:

i.imgur-icon {
background-image: url('../img/camera.gif');
}
.mce-edit-area {
position: relative!important;
}
.imgur-upload-loading {
position: absolute!important;
top: 0;
left: 0;
width: 100%!important;
height: 100%!important;
background: rgba(0, 0, 0, 0.4)!important;
}
.imgur-upload-loading .loading {
position: absolute;
top: 30%;
left: 42%;
background: url('../img/loading.gif') center center no-repeat;
width: 100px;
height: 100px;
background-size: 100px 100px;
}

File ảnh gif: https://drive.google.com/file/d/0B5CE7VL4wcKaeFNjMzFCZEVfT2c/view?usp=sharing
Tiếp theo chúng ta có file js nữa để bắt sự kiện onchange của input và truyền dữ liệu qua ajax
ajax-action.js:

jQuery('#file').live('change', function(){
jQuery("#form_file").on('submit',(function(e) {
e.preventDefault();
jQuery( '.mce-panel' ).find('iframe').after('<div class="imgur-upload-loading"><div class="loading"></div></div>');
jQuery.ajax({
url: sb_imgur_ajax.url,
type: "POST",
data: new FormData(this),
contentType: false,
cache: false,
processData:false,
success: function(data)
{
jQuery( '.mce-panel' ).find('.imgur-upload-loading').remove();
tinymce.activeEditor.execCommand('mceInsertContent', false, data);
return false;
}});
}));
var file = jQuery('#file');
if(file.get(0).files.leight === 0 || file.val() == '') {
alert('Bạn chưa chọn ảnh nào!');
} else {
jQuery("#form_file").submit();
}//End if get(0)
});

Và cuối cùng là file thực hiện upload lên imgur.com sau khi nhận dữ liệu qua ajax và trả về kết quả
imgur.php

<?php
if(isset($_FILES["file"]["type"])) {
$img=$_FILES['file'];
if($img['name']==''){
}else{
$filename = $img['tmp_name'];
$client_id="xxxxxxxxxxxxxxxx";
$handle = fopen($filename, "r");
$data = fread($handle, filesize($filename));
$pvars = array('image' => base64_encode($data));
$timeout = 30;
$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, 'https://api.imgur.com/3/image.json');
curl_setopt($curl, CURLOPT_TIMEOUT, $timeout);
curl_setopt($curl, CURLOPT_HTTPHEADER, array('Authorization: Client-ID ' . $client_id));
curl_setopt($curl, CURLOPT_POST, 1);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($curl, CURLOPT_POSTFIELDS, $pvars);
curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
$out = curl_exec($curl);
curl_close ($curl);
$pms = json_decode($out,true);
$url=$pms['data']['link'];
if($url!=""){
echo "<img src='$url'/><br>";
}else{
die();
} }
}else{
die();
}
?>

Các bạn lưu ý thay chuỗi xxxxxxxxxxxxxxxx trong $client_id=”xxxxxxxxxxxxxxxx” bằng client id của mình nhé.
Còn làm thế nào để có client id imgur.com thì các bạn search google nha.

Cuối cùng toàn bộ plugin các bạn có thể tải về tại đây

Tạm thời các bạn download plugin này về vẫn cài đặt bình thường và chỉ cần thay client id là nó hoạt động được, không cần thiết lập gì hết (vì mình cũng chưa viết đến phần hiết lập).

Như mình đã nói ở trên mình chỉ mò mẫm chắp vá code thôi nên sẽ còn gà, ai có cách nào hay hơn thì hãy chia sẽ với mọi người ở dưới đây nhé.
Xem phần 2 tại đây: http://codehay.net/q/plugin-them-button-upload-anh-len-imgur-com-cho-tinymce-editor-phan-2/

Thêm bình luận
1 Trả lời

Plugin hay quá. Bao giờ thì có phần 2 vậy?

Lv2 Đã trả lời on 18/07/2016.
Thêm bình luận

Trả lời của bạn

Bằng cách gửi bài trả lời của bạn, bạn đồng ý với Chính sách bảo mậtđiều khoản dịch vụ.