How does WordPress add a wp_editor editor on the front end to upload pictures without popping up the media library

PetitQ WordPress Tutorial 2023-5-30 1.10K zero one

Collection

We often encounter editor problems in wordpress development. Wordpress has an editor called wp_editor. The editor has the function of uploading pictures, but it needs to be added to the media and pop up the window of the media library. This may not be friendly to users who submit articles in the foreground. So how can we add a minimalist editor with pictures uploaded to the foreground? Here I will explain it to you.

First, call the editor. We need to simplify the buttons on the editor.

Want to be here? contact us bar

 wp_editor (  '' ,  'task_content' , task_editor_settings ( array ( 'textarea_name' => 'content' ,  'height' => two hundred and fifty ,  'allow_img' =>  one ) )  ) ;

Then we define some functions and upload logic

 function task_editor_settings ( $args  =  array ( ) ) {

 $allow_img  =  isset ( $args [ 'allow_img' ] )  &&  $args [ 'allow_img' ] ? one  :  zero ;

```
 return  array (
```

 'textarea_name'  =>  $args [ 'textarea_name' ] ,

```
 'media_buttons'  =>  false ,
```
```
 'quicktags'  =>  false ,
```
```
 'tinymce'  =>  array (
```
```
 'statusbar'  =>  false ,
```

 'height'  =>  isset ( $args [ 'height' ] ) ? $args [ 'height' ]  :  one hundred and twenty ,

 'toolbar1'  =>  'bold, italic,underline,blockquote,bullist,numlist' . ( $allow_img ? ',TaskImg' : '' ) ,

```
 'toolbar2'  =>  '' ,
```
```
 'toolbar3'  =>  ''
```
```
 )
```
```
 ) ;
```
```
 }
```
```
  
```

 add_filter (  'mce_external_plugins' ,  'erphp_task_mce_plugin' ) ;

 function erphp_task_mce_plugin ( $plugin_array ) {

 $plugin_array [ 'TaskImg' ]  = ERPHP_TASK_URL .  '/static/js/TaskImg.js' ;

```
 return  $plugin_array ;
```
```
 }
```
```
  
```

 add_action ( 'wp_ajax_task_img_upload' ,  'erphp_task_img_upload' ) ;

```
 function erphp_task_img_upload ( ) {
```
```
 $res  =  array ( ) ;
```
```
  
```
```
 $user  = wp_get_current_user ( ) ;
```
```
 if ( $user -> ID ) {
```
```
 $upfile  =  $_FILES [ 'upfile' ] ;
```

 $upload_overrides  =  array ( 'test_form'  =>  false ) ;

 $file_return  = wp_handle_upload ( $upfile ,  $upload_overrides ) ;

```
  
```

 if  ( $file_return  &&  ! isset ( $file_return [ 'error' ] ) )  {

```
 //Save to Media Library
```
```
 $attachment  =  array (
```

 'post_title'  =>  preg_replace (  '/\. [^.]+$/' ,  '' ,  basename (  $file_return [ 'file' ]  )  ) ,

 'post_mime_type'  =>  $file_return [ 'type' ] ,

```
 ) ;
```

 $attach_id  = wp_insert_attachment ( $attachment ,  $file_return [ 'file' ] ) ;

 $attach_data  = generate_attachment_metadata ( $attach_id ,  $file_return [ 'file' ] ) ;

 wp_update_attachment_metadata ( $attach_id ,  $attach_data ) ;

```
 $res [ 'result' ]  =  zero ;
```

 $file_return [ 'alt' ]  =  preg_replace (  '/\. [^.]+$/' ,  '' ,  basename (  $file_return [ 'file' ]  )  ) ;

```
 $res [ 'image' ]  =  $file_return ;
```
```
 }  else  {
```
```
 $res [ 'result' ]  =  one ;
```
```
 }
```
```
 }  else  {
```
```
 $res [ 'result' ]  =  two ;
```
```
 }
```
```
 echo  json_encode ( $res ) ;
```
```
 exit ;
```
```
 }
```
```
  
```

 function generate_attachment_metadata ( $attachment_id ,  $file )  {

 $attachment  = get_post (  $attachment_id  ) ;

```
 $metadata  =  array  ( ) ;
```

 if  ( ! function_exists ( 'file_is_displayable_image' ) )  include ( ABSPATH .  'wp-admin/includes/image.php'  ) ;

```
  
```

 if  ( preg_match  (  '!^ image/!' , get_post_mime_type (  $attachment  )  )  && file_is_displayable_image (  $file  ) )  {

 $imagesize  =  getimagesize  (  $file  ) ;

 $metadata  [ 'width' ]  =  $imagesize  [ zero ] ;

 $metadata  [ 'height' ]  =  $imagesize  [ one ] ;

 list  (  $uwidth ,  $uheight  )  = wp_constrain_dimensions (  $metadata  [ 'width' ] ,  $metadata  [ 'height' ] ,  one hundred and twenty-eight ,  ninety-six  ) ;

 $metadata  [ 'hwstring_small' ]  =  "height=' $uheight ' width=' $uwidth '" ;

```
  
```

 // Make the file path relative to the upload dir

 $metadata  [ 'file' ]  = _wp_relative_upload_path (  $file  ) ;

```
 // work with some watermark plugin
```

 $metadata  = apply_filters (  'wp_generate_attachment_metadata' ,  $metadata ,  $attachment_id  ) ;

```
 }
```
```
 return  $metadata ;
```
```
 }
```

Then you need js to upload

 tinymce. PluginManager . add ( 'TaskImg' ,  function ( editor , url )  {

```
  
```

 var $el = jQuery ( editor. getElement ( ) ) . parent ( ) ;

```
 var timer =  null ;
```
```
  
```

 var input = document. createElement ( 'input' ) ;

 input. setAttribute ( 'type' ,  'file' ) ;

 input. setAttribute ( 'accept' ,  'image/*' ) ;

```
  
```

 function notice ( type , msg , time ) {

```
 clearTimeout ( timer ) ;
```
```
 jQuery ( '#notice' ) . remove ( ) ;
```

 $el. append ( '<div id="notice"><div class="notice-bg"></div><div class="notice-wrap"><div class="notice-inner notice-' + type + '">' + msg + '</div></div></div>' ) ;

```
 if ( time )  {
```
```
 timer = setTimeout ( function  ( )  {
```
```
 jQuery ( '#notice' ) . remove ( ) ;
```
```
 } , time ) ;
```
```
 }
```
```
 }
```
```
  
```
```
 function img_post ( )  {
```
```
 var fd =  new FormData ( ) ;
```

 fd. append (  "upfile" , input. files [ zero ] ) ;

 fd. append (  "action" ,  'task_img_upload' ) ;

```
 jQuery. ajax ( {
```
```
 type :  'POST' ,
```
```
 url : _ERPHP. ajaxurl ,
```
```
 data : fd , 
```
```
 processData :  false ,
```
```
 contentType :  false ,
```
```
 dataType :  'json' ,
```

 success :  function ( data , textStatus , XMLHttpRequest )  {

```
 clearTimeout ( timer ) ;
```
```
 jQuery ( '#notice' ) . remove ( ) ;
```
```
 if ( data. result == '0' ) {
```

 editor. insertContent (  '<img src="' + data. image . url + '" alt="' + data. image . alt + '">'  ) ;

```
 } else {
```

 notice ( zero ,  'There was an error uploading the image, please try again later!' ,  one thousand and two hundred ) ;

```
 }
```
```
 } ,
```

 error :  function ( MLHttpRequest , textStatus , errorThrown )  {

```
 clearTimeout ( timer ) ;
```
```
 jQuery ( '#notice' ) . remove ( ) ;
```
```
 alert ( errorThrown ) ;
```
```
 }
```
```
 } ) ;
```
```
 }
```
```
  
```
```
 input. onchange  =  function ( )  {
```
```
 var file =  this . files [ zero ] ;
```
```
  
```
```
 if ( file ) {
```

 if ( !/ \. ( gif | jpg | jpeg | png | GIF | JPG | JPEG | PNG ) $ / . test ( file. name ) ) {

 notice ( zero ,  'Only image files in jpg, png and gif formats can be uploaded' ,  two thousand ) ;

```
 return  false ;
```

 } else  if ( file. size  >  two  *  one thousand and twenty-four  *  one thousand and twenty-four ) {

 notice ( zero ,  'The image size cannot exceed 2M' ,  one thousand and five hundred ) ;

```
 return  false ;
```
```
 } else {
```
```
 img_post ( ) ;
```

 notice ( one ,  'Uploading...' ,  zero ) ;

```
 }
```
```
 }
```
```
 } ;
```
```
  
```
```
  
```
```
 editor. addButton ( 'TaskImg' ,  {
```
```
 text :  '' ,
```
```
 icon :  'image' ,
```
```
 tooltip :  "Upload picture" ,
```
```
 classes :  'TaskImg' ,
```
```
 onclick :  function ( )  {
```

 if (  !  /Android|webOS|iPhone|iPod|BlackBerry/i . test ( navigator. userAgent )  )  {

```
 input. click ( ) ;
```
```
 }
```
```
 } ,
```
```
 onTouchEnd :  function ( ) {
```

 if (  /Android|webOS|iPhone|iPod|BlackBerry/i . test ( navigator. userAgent )  )  {

```
 input. click ( ) ;
```
```
 }
```
```
 }
```
```
 } ) ;
```
```
 } ) ;
```

Finally, it should be noted that users need to have the upload permission of WordPress.

The tutorial is simple and needs someone with certain development ability to understand it clearly~

How does WordPress add a wp_editor editor on the front end to upload pictures without popping up the media library

276 people have bought

Permanent update:
Demo data:

The download price of this resource is

five

element

Buy Now

(VIP free)

View Demo Upgrade VIP Buy Now

Cool enterprise website building works display WordPress Chinese template

Supro - minimalist e-commerce website template WordPress Chinese theme

Photo - Full screen photo album product display website WordPress Chinese theme

WordPress Tutorial

How does WordPress add a wp_editor editor on the front end to upload pictures without popping up the media library

How does WordPress add a wp_editor editor on the front end to upload pictures without popping up the media library

Related articles

Solution for not displaying Chinese attachments uploaded by WordPress

WordPress gets the number of pictures in the article

Wordpress displays different articles and calls different sidebars

Post reply Cancel Reply

Hot selling template