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

phần 1 chúng ta đã tìm hiểu cách thêm button vào wp editor và thực hiện upload ảnh lên server imgur.com bằng ajax thông qua API của imgur.com một cách đơn giản rồi.

Phần này chúng ta sẽ tiếp tục cùng nhau tìm hiểu và hoàn thiện plugin Imgur Uploader for TinyMCE.

Ở phần này mình có một chút thay đổi về cấu trúc của plugin, đó là mình sẽ bỏ file imgur.php đi và toàn bộ code trong file ingur.php mình sẽ đưa vào file imgur-upload.php

Đầu tiên ta sẽ chèn code của file imgur.php  vào cuối file imgur-upload.php như sau:

function imgur_uploader_action() {
if(isset($_FILES["img_file"]["type"])) {
$img=$_FILES['img_file'];
if($img['name']==''){
}else{
$filename = $img['tmp_name'];
$client_id = esc_attr(get_option('clientid'));
$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>";
exit();
} }}}
add_action('wp_ajax_imgur_uploader_action','imgur_uploader_action');
add_action('wp_ajax_nopriv_imgur_uploader_action', 'imgur_uploader_action');

Đối với đoạn code trên thì có một chút thay đổi đó là mình sẽ không sử dụng API add trực tiếp vào cliend_id nữa mà sẽ thay bằng  esc_attr(get_option(‘clientid’)); đây là option để chúng ta thay đổi trong setting wp-admin.

Tiếp theo file button.js cũng có một chút thay đổi nhỏ:

(function() {
tinymce.PluginManager.add('imgur_tc_button', function(editor, url) {
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="img_file" name="img_file"/></form>');
editor.addButton('imgur_tc_button', {
title: 'Imgur Uploader',
icon: 'icon imgur-icon',
onclick: function() {
jQuery('#img_file').click();
}//onclick: function() {
});//editor.addButton('imgur_tc_button', {
});
})();

File ajax-action.js 

jQuery('#img_file').live('change', function(){
var file = jQuery('#img_file');
if(file.get(0).files.leight === 0 || file.val() == '') {
alert('Bạn chưa chọn ảnh nào!');
} else {
onsubmit(jQuery("#form_file"));
}//End if get(0)
});
function onsubmit(e) {
jQuery( '.mce-panel' ).find('iframe').after('<div class="imgur-upload-loading"><div class="loading"></div></div>');
var formdata = new FormData(this);
formdata.append('action', 'imgur_uploader_action');
formdata.append('img_file', jQuery("#img_file")[0].files[0]);
jQuery.ajax({
url: sb_imgur_ajax.url,
type: "POST",
data: formdata,
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;
}
});

Và nội dung quan trọng nhất trong phần này là thêm option để thiết lập trong wp-admin và thêm chức năng bình luận bằng TinyMCE editor

Phần Option trong wp-admin sẽ như sau.
Vẫn trong file imgur-upload.php
Loại bỏ function imgur_add_my_tc_button() {…} và thay vào đó là đoạn code sau (chèn lên đầu file nhé)

include 'option-file.php';
if(get_option('addcomment')) {
function gk_comment_form( $fields ) {
ob_start();
wp_editor( '', 'comment', array(
'quicktags' => false,
'media_buttons' => false,
'textarea_rows' => 10
));
$fields['comment_field'] = ob_get_clean();
return $fields;
}
add_filter( 'comment_form_defaults', 'gk_comment_form' );
add_action('init', 'imgur_add_my_tc_button');
add_action('init', 'imgur_tc_css');
add_action('init', 'imgur_action_js');
function imgur_add_my_tc_button() {
if( !current_user_can('edit_posts') && !current_user_can('edit_pages')) {return;}
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');
}}
} else {
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() {
if( !current_user_can('edit_posts') && !current_user_can('edit_pages')) {return;}
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');
}}}

Trong đó include ‘option-file.php’; là file option lát nữa chúng ta sẽ tạo,
phần if(get_option(‘addcomment’)) { kiểm tra check box trong phần thiết lập nếu được chọn thì thêm chức năng bình luận với tinymce và upload imgur, ngược lại sẽ chỉ sử dụng trong wp-admin thôi.

Nội dung file option-file.php như sau:

<?php
add_action('admin_menu', function() {
add_options_page('Imgur Uploader Settings', 'Imgur Uploader Settings', 'manage_options', 'imgur-uploader', 'imgur_uploader_plugin_page');
});
add_action('admin_init', function() {
register_setting('imgur-uploader-plugin-settings', 'clientid');
register_setting('imgur-uploader-plugin-settings', 'addcomment');
});
function imgur_uploader_plugin_page() {
?>
<div class="wrap">
<div id="icon-options-general" class="icon32"></div>
<h2>Imgur Uploader Settings</h2>
<?php settings_errors(); ?>
<div class="clearfix paddingtop20">
<div class="last threecol">
<div class="side-block">
Like the plugin? Don't forget to give it a good rating on WordPress.org.
</div>
<div class="side-block">
<form action="options.php" method="post">
<?php settings_fields('imgur-uploader-plugin-settings');
do_settings_sections('imgur-uploader-plugin-settings');
?>
<br><br>
<table>
<tr>
<td>
<strong><label for="clientid">Enter Your Imgur Client ID: </label></strong>
</td>
<td>
<input type="text" name="clientid" value="<?php echo esc_attr(get_option('clientid')); ?>" />
<i><a href="https://api.imgur.com/">Get it now</a></i>
</td>
<tr>
<br>
<br>
<tr>
<td>
<strong><label for="clientid">Add TinyMCE to Comments box: </label></strong>
</td>
<td>
<input type="checkbox" name="addcomment" value="1" <?php checked(get_option('addcomment'),1); ?> />
<i>If checked this field will add tinymce editor in the comment box in front end.</i>
</td>
<tr>
</table>
<br>
<br>
<input type="submit" value="Save Change" class="button button-primary" />
</form>
<div style="text-align:center;"><a class="button button-primary" href="http://codehay.net">Try It Now!</a></div>
<div class="paypal">
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="UKZ5ELJTU8PC6">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
</div>
</div>
</div>
</div>
</div>
<?php
}

Cuối cùng toàn bộ file Plugin các bạn có thể download Tại đây
Phần 1

Lv2 đã hỏi on 20/07/2016 Plugin.
Thêm bình luận
11 Trả lời

Cùng chức năng như http://demo.designwall.com/dw-tinymce-imgur-upload mà tiết kiệm được tận 17$. Thanks tác giả

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

Bác sơn ngó qua cái
Đăng 1 ảnh
Trả lại 2 ảnh giống nhau
Sớm hồi âm bác nhé

 

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

Em test đâu thấy hiện tượng này nhỉ? Để em xem lại xem sao

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

RE: Plugin thêm button upload ảnh lên imgur.com cho Tinymce Editor Phần 2


Bác ngó xem của mình nó trả lại 2 ảnh với 2 link như bên trên

Lv1 Đã trả lời on 30/07/2016.

nó lưu thành 2 ảnh khác nhau cơ à?

on 30/07/2016.
Thêm bình luận

Bác thử cài bản trên wp org xem có bị lỗi đó ko?
https://vi.wordpress.org/plugins/wp-editor-imgur-button/

Lv1 Đã trả lời on 30/07/2016.

mình dùng thử cả 2 bản đều giống nhau. Đang dùng bản tải xuống từ

https://vi.wordpress.org/plugins/wp-editor-imgur-button/

 

 

. nghi ngờ ở đoạn này này

if($url!=""){

 

echo "<img src='$url'/><br>";

 

exit();

 

} }}}
mình không viết code nên ko rõ
on 30/07/2016.

phần website của bác lỗi code này

if($url!=""){
 
echo "<img src='$url'/><br>";
 
exit();

on 30/07/2016.

cái trình hiển thị code này cứ copy trực tiếp trên website dán vào là lại bị lỗi hiển thị lung tung. bác copy từ 1 trình soạn thảo rồi dán lạilên đây em xem nhé

on 30/07/2016.

lạ nhỉ, mình test trên mấy site đều ko sao cả.

on 30/07/2016.

không cái này là mình thông báo cho bác biết web bác có lỗi thôi :D.
Mình nghi ngờ là cái imgur_uploader_action() chạy không chịu end kìa.
Nên nó kiếm làm nhiều lần như của mình đăng lên IMGUR nó trả lại 2 link nên chạy lần 1 nó trả 1 link và chạy lần 2 nó trả 2 link

on 30/07/2016.
Thêm bình luận

thêm vấn đề nữa là ko phải admin thì không hiện lên cái upload :((

Lv1 Đã trả lời on 30/07/2016.

vụ này thì mình sẽ nghiên cứu

on 30/07/2016.

Cái này ok rồi nhé mình xoá phần current_user_can đi

on 30/07/2016.

Ok bác, em cũng đang tập code thôi, làm đc đến đâu em quăng lên đây ngay đến đấy để cùng học hỏi lẫn nhau. Cảm ơn bác đã góp ý

on 30/07/2016.

ok. Mình đợi bạn fix lỗi của mình nhé. Mình nghi của mình bị ajax upload thành 2 ảnh nên nó trả 2 link khác nhau. Bác ngó qua xem thế nào

on 30/07/2016.

Hồi đang code em cũng bị tình trạng này, sau rồi em tách ajax thành 1 hàm và họi lại trong file ajax-action.js thì thấy nó hoạt động bình thường.
Test nhiều lần chưa thấy gì nên gửi lên wordpress.org

on 30/07/2016.

Bác cho em địa chỉ site bác để em test comment xem sao

on 30/07/2016.

địa chỉ site ở local thôi bác 😀 Đang test xem thế nào.

Mình không biết viết code nên toàn dùng phép thử thôi.
Mà nhân tiện bác nên ghép 2 file js vào làm 1 e nghĩ là ít file js thì server sẽ nhận ít request hơn

on 30/07/2016.

Em đã thử rồi và ko đc bác ạ. File ajax phải sử dụng code này mới chạy (hoặc em chưa biết code)

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' => admin_url('/admin-ajax.php')));
}

Còn file js kia để khai báo button trong tinymce

on 30/07/2016.

ok file cũng nhẹ không sao.

Nãy giờ mình thử thì thầy
add_action(‘wp_ajax_imgur_uploader_action’,’imgur_uploader_action’);
add_action(‘wp_ajax_nopriv_imgur_uploader_action’, ‘imgur_uploader_action’); ???????????? Cái này có tác dụng gì đâu
Mình nghĩ nguyên nhân của mình là do cái imgur_uploader_actionCó cách nào để thêm cái action đấy chỉ trong trường hợp ajax không? tại mình nghĩ gọi kiểu này thì lúc nào nó cũng chờ để hoạt động nên khi mình upload ảnh nó tự chạy 1 lần. Một lần nữa là do ajax nên nó trả cho mình 2 ảnh.
Tham khảo thôi nhé mình không có học qua nên không biết viết code.

on 30/07/2016.

Mình cũng có học qua đâu. Tự mày mò nghịch thôi. Bác thử comment vào đây xem sao http://gin9.com/download-theme-spike-mythemeshop.html
E
m comment thấy bình thường

on 30/07/2016.

Theo mình biết thì cái wp_ajax_ ajax sẽ hoạt động trong wp-admin còn ‘wp_ajax_nopriv_ thì ajax mới hoạt động ngoài front-end mà

on 30/07/2016.

Sau khi test 1 hồi thì chưa thấy xuất hiện lỗi nhân bản hình ảnh, chỉ có 1 lỗi là khi không tải được ảnh lên hoặc ảnh quá lớn nó sẽ trả về số 0, nên mình ném vào đây mấy cái exit() thì nó không trả về kết quả khi không upload đc nữa.

RE: Plugin thêm button upload ảnh lên imgur.com cho Tinymce Editor Phần 2

on 30/07/2016.
Thêm bình luận

https://carpblog.nl/wp-content/plugins/dw-tinymce-imgur-upload/
Bac co cach nao tai dc file php cua no ko?
của mình đang sử dụng anspress, nó ajaxe cái box tinyMCE nên bị thêm 1 cái ajax của bạn nữa mình cũng không hiểu lắm

Lv1 Đã trả lời on 30/07/2016.

😀 đã từng gửi mail xin nó file php nhưng nó không cho 😀

on 31/07/2016.

Nếu bị xung đột thì bác nên tự code cho chắc. Đơn giản mà

on 31/07/2016.

Mình mới cài thử cái anspress plugin cùng với cái plugin của mình thấy nó hoạt động song song rất tốt mà.

on 31/07/2016.

ok Tối qua mình fix đc rồi.
Share cho bác mấy cái này

Mình đổi live = on
jQuery(‘#img_file’).on(‘change’, function(){

Với cả chèn bằng tay vào phần ajax của anspress. ngon rồi nhé.
Cảm ơn ông bạn 😀

on 31/07/2016.

Ok có gì hay bạn đăng lên đây chia sẻ với mọi người nha. Thanks

on 31/07/2016.
Thêm bình luận

dành cho web bạn nào chạy ssl không xanh nhe , do $url == http:// mình trã về https hết nhé ,bạn thêm bên dưới dòng này if($url!=””){  (trong file ‘imgur-upload.php’ nhé  )
if($url!=””){ $url = str_replace(‘http’,’https’, $url);
echo “<img src=’$url’/><br>”;
exit();
}

Lv1 Đã trả lời on 27/06/2017.
Thêm bình luận

Các anh ơi cho em xin code hoàn chỉ về TinyMCE upload được không ạ, em cảm ơn rất nhiều ạ

Email của em [email protected]

thanks

Lv1 Đã trả lời on 12/09/2017.

Bạn download ở đây nhé

on 19/09/2017.
Thêm bình luận

Mình muốn upload nhiều ảnh cùng 1 lúc thì như thứ nào?

Lv1 Đã trả lời on 18/09/2017.
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ụ.