Lack of interest Attachments insertion with several editors on the same page

cclaerhout

Well-known member
#1
Here's a code (for mce) to manage attachments insertion with several editors on the same page. I have no idea if it can be updated to Redactor (to get the active editor). If yes, then all RTE & BB Code editors can be targeted with a possibility to automatically insert bimg bbcode with img url inside editors with NoAttachment class. Tested on FF, Chrome & IE10. I'm not sure if the hover trick to get the last focus element will work on mobile devices.

I don't know if it can help.

Code:
  /**************************************************************************
       OVERRIDE THE XENFORO FUNCTION "getEditorInForm"
   **************************************************************************/
   XenForo.getEditorInForm = function(form, extraConstraints, $lastFocusedElement, enableExtraConstraints)
   {
     /**
      *  To be able to use  $lastFocusedElement & keep compatibility with XenForo it should
      *  be in thrid position. Since extraContraints might mess the below detection method,
      *  they will be disable by default and can only be enable with a fourth argurment
      **/
     if(!enableExtraConstraints){
       extraConstraints = '';
     }

     /**
      *  MessageEditor is used for original loaded ediors (exit Toggled editors)
      *  .bbCodeEditorContainer textarea is to catch Toggled BbCode editors
      **/
     $form = $(form);
     $messageEditors = $form.find('textarea.MessageEditor' + (extraConstraints || ''));
     $bbCodeEditors = $form.find('.bbCodeEditorContainer textarea' + (extraConstraints || ''));
     $allEditors = $messageEditors.add($bbCodeEditors);
    
     /*There must be at least one message editor in the form*/
     if($messageEditors.length == 0){
       return false;
     }

     /*The first message editor will be the fallback*/
     $messageEditor = $messageEditors.eq(0);
     $bbCodesBbCodeEditor = $bbCodeEditors.eq(0);

     /**
      * Let's find if one of the message editors or bbCode editors
      * belongs to the $lastFocusedElement
      **/
     if($lastFocusedElement && $lastFocusedElement.length){
       var validFocus = false;
       $allEditors.each(function(){
         if($(this).attr('id') == $lastFocusedElement.attr('id')){
           validFocus = $(this);
           return;
         }
       });
      
       if(validFocus) {
         /**
          *   The lastFocusedElement is valid
          *   Let's focus it again if users need to insert several attachments
          *   Then let's return it
          **/
         validFocus.focus();
         //console.log('Editor from focus');
         return validFocus;
       }
     }
  
     /**
      * MCE Section
      **/    
     if(window.tinyMCE){
       var    activeEditor = tinyMCE.activeEditor,
         $mceTextarea = $(activeEditor.getElement()),
         mceTextareaId = $mceTextarea.attr('id'),
         mceIsValid = false;
        
         $messageEditors.each(function(){
           if($(this).attr('id') == mceTextareaId){
             mceIsValid = true;
             return;
           }
         });

       if(activeEditor && mceIsValid && !$mceTextarea.attr('disabled')){
         //console.log('MCE active');
         return tinyMCE.activeEditor;
       }else{
         /*With old browser it could be possible that the activeEditor is lost (not sure)*/
         var messageEditorId = $messageEditor.attr('id');
         if(   messageEditorId
           && typeof tinyMCE.editors[messageEditorId] !== 'undefined'
           && !$messageEditor.attr('disabled')
         )
         {
           //console.log('MCE Fallback');
           return tinyMCE.editors[messageEditorId];
         }
       }
     }
    
     if($messageEditor.attr('disabled')){
       /*.attr is used to maintain a compatibily with XenForo 1.1.x */
       if(!$bbCodesBbCodeEditor.length){
         return false;
       }
      
       //console.log('Bbcode Fallback');
       return $bbCodesBbCodeEditor;
     }

     //console.log('Editor Fallback');    
     return $messageEditor;
   };

   /**************************************************************************
       OVERRIDE THE XENFORO FUNCTION "AttachmentInserter"
   **************************************************************************/
   var insertSpeed = XenForo.speed.normal,   removeSpeed = XenForo.speed.fast;
  
   XenForo.AttachmentInserter = function($trigger)
   {
     var $lastFocusedElement = false;
    
     $trigger.hover(function(e){
       $lastFocusedElement = $(document.activeElement);
     });

     $trigger.click(function(e)
     {
       var $attachment = $trigger.closest('.AttachedFile').find('.Thumbnail a'),
         attachmentId = $attachment.data('attachmentid'),
           editor,
         bbcode,
         imgBbcode,
         html,
         baseUrl = XenForo._baseUrl,
         thumb = $attachment.find('img').attr('src'),
         img = $attachment.attr('href');

       e.preventDefault();

       if ($trigger.attr('name') == 'thumb')
       {
         bbcode = '[ATTACH]' + attachmentId + '[/ATTACH] ';
         imgBbcode = '[img]'+baseUrl+thumb+'[/img]';
         html = '<img src="' + thumb + '" class="attachThumb bbCodeImage" alt="attachThumb' + attachmentId + '" /> ';
       }
       else
       {
         bbcode = '[ATTACH=full]' + attachmentId + '[/ATTACH] ';
         imgBbcode = '[img]'+baseUrl+img+'[/img]';
         html = '<img src="' + img + '" class="attachFull bbCodeImage" alt="attachFull' + attachmentId + '" /> ';
       }

       //Don't specify extraConstraints, it will mess the detection method, check the .NoAttachment after
       editor = XenForo.getEditorInForm($trigger.closest('form'), '', $lastFocusedElement);

       function activateImgFallback($textarea, output){
         if($textarea.hasClass('NoAttachment') && $textarea.hasClass('ImgFallback')){
           return imgBbcode;
         }
         return output;
       }

       if (editor.execCommand && window.tinyMCE) {
         $textarea = $(editor.getElement());
         html = activateImgFallback($textarea, html)
         editor.execCommand('mceInsertContent', false, html);
       }else{
         bbcode = activateImgFallback(editor, bbcode)
         editor.val(editor.val() + bbcode);
       }
     });
   };
 
Top