1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Fixed Tabs in WYSIWYG mode

Discussion in 'Resolved Bug Reports' started by digitalpoint, Nov 10, 2011.

  1. digitalpoint

    digitalpoint Well-Known Member

    I've seen both Kier and Mike acknowledge that they know about (or at least annoyed by) how tabs just get lost when using the WYSIWYG editor in random threads, but I couldn't find a specific bug report for it... so here it is. :)

    Tabs getting lost in the editor is terribly annoying when using things like [code]. Even worse is when you switch to non-WYSIWYG because you know about the issue, and then when you preview or edit an existing post, all tabs are lost.

    There have been numerous times where I've had to go back and manually add tabs over and over just because I wanted to edit an existing post that had code in it.
     
    Floren, Alien, Jeremy and 1 other person like this.
  2. Floris

    Floris Guest

    It started doing this some releases ago, so annoying. You can't edit old posts, etc. Without patching things up all the time.
     
    mrGTB likes this.
  3. Mike

    Mike XenForo Developer Staff Member

    Looks like we'll have to come back to this - this is internal to TinyMCE. Webkit uses a <span> with white-space: pre on it to do tabs. Somewhere between getting into the editor and submission (I should note that we have cleanup disabled in TinyMCE) that span is getting stripped/modified. On the full TinyMCE demo, you can see that it doesn't preserve tabs in Chrome even at the paste time (where as FF does). That's a slightly different behavior, but it may be down to version differences and plugins loaded.
     
    mrGTB and (deleted member) like this.
  4. Kier

    Kier XenForo Developer Staff Member

    Ack. +1 to the long term bugs list.
     
    1 person likes this.
  5. digitalpoint

    digitalpoint Well-Known Member

    Looks like this might be fixed in the later versions of TinyMCE (I haven't updated TinyMCE to test it, but it sounds like it). I believe XF uses TinyMCE 3.4.2...

    http://www.tinymce.com/develop/changelog/?type=tinymce

     
    mrGTB likes this.
  6. Andy.N

    Andy.N Well-Known Member

    Is it fixed for you when you use the latest TinyMCE?
     
  7. Jeremy

    Jeremy XenForo Moderator Staff Member

    He hasn't updated yet.
     
  8. digitalpoint

    digitalpoint Well-Known Member

    Oh yeah... forgot to test. haha

    Sadly, it doesn't seem like the tab thing is fixed. Looking at the network traffic, the tabs aren't even getting sent to the backend.
     
  9. digitalpoint

    digitalpoint Well-Known Member

    So I came up with a bit of a hack to retain tabs... it's not ideal, but it's much better at least.

    What I'm doing is using TinyMCE's cleanup_callback option... and then when a "get_from_editor_dom" type is passed to it, regex replace tabs with "&nbsp; &nbsp; "... essentially changing tabs into 4 spaces that don't collapse into one by TinyMCE's internal cleanup function...

    Code (with tabs) wrapped in PHP BBCode... done with WYSIWYG editor previews out to:

    [​IMG]
     
    Bob and Kevin like this.
  10. cclaerhout

    cclaerhout Well-Known Member

    That's may be not the best solution, but you can try:

    PART 1
    Class: XenForo_BbCode_Formatter_Wysiwyg​
    Function: public function filterFinalOutput($output)​

    Just before
    PHP:
    return $output;
    Add:
    PHP:
    $output preg_replace('#\t#''&nbsp;&nbsp;&nbsp;&nbsp;'$output);

    PART 2
    And if you want to get back the tabs in the normal textarea (normal 'editor'):

    Class: XenForo_Html_Renderer_BbCode​
    Function: public static function renderFromHtml($html, array $options = array())​
    Just before
    PHP:
    return $rendered;
    Add:
    PHP:
    $rendered preg_replace('# {4}#'"\t"$rendered);


    P.S: I've tested the option to create a span white block with a margin-left (to emulate a tab) in tinyMCE but the caret management is not that great
     
  11. cclaerhout

    cclaerhout Well-Known Member

    I had made an addon to autopatch this problem, but it seems the bug still occurs when TinyMCE takes too much time to load (for ie, when much code has been inserted in it)...
     
  12. cclaerhout

    cclaerhout Well-Known Member

    I've made an error with my patch permissions :coffee: This should work. Try to use this patch addon.
     
    Adam Howard likes this.
  13. nailxx

    nailxx Member

    Hello!

    We use XenForo for community that often shares code snippets. As you know indentation in code blocks is crucial. However seems like the editor eats some leading white space while editing message.

    Steps to reproduce. Try to post following:

    Code:
    String command;
    while (command.length()<MAX_COMMAND_LENGTH)
    {
     if (serial.available())
     {
      char c = Serial.read();
      if ((' '==c) || (0==c)) break;
     }
    }
    int direction, value;
    if (parseCommand(command, direction, value))
    {
     // do something
    }
    
    Then start message editing. Note how spaces before `if` on 4-th line and further are trimmed. It shouldn't be so.
     
  14. Chris D

    Chris D XenForo Developer Staff Member

  15. MagnusB

    MagnusB Well-Known Member

    If you are using the wysiwyg to type in code tags, this will happen. When you paste in text in the wysiwyg tabs are removed. If you use the "code" box (when you press the code button) and paste in there, the tabs are kept, but transformed to spaces when you are hitting submit, if I am not mistaken.
     
    Chris D likes this.
  16. Chris D

    Chris D XenForo Developer Staff Member

    Testing...

    Code:
            $viewParams = array(
                'canUpdateStatus' => $visitor->canUpdateStatus(),
                'authoriseUri' => $authoriseUri,
                'tokens' => unserialize($visitor['status_tokens']),
            );   
       
            return $this->_getWrapper(
                'account', 'statusUpdates',
                $this->responseView(
                    'Status_Tweeter_ViewPublic_Account_StatusUpdates',
                    'status_account_status_settings',
                    $viewParams
                )
            );    

    Yes, that works well...

    The TinyMCE fix from C├ędric does fix the problem entirely though. There is still an issue when you paste stuff in directly.
     
    sprite likes this.
  17. nailxx

    nailxx Member

    @MagnusB Yeah, I thought the tabs are the roots of all evils, but they are not. Space sequences get trimmed too under some circumstances.

    @Chris Great thanks for the link! Looks like viable solution.
     
  18. MagnusB

    MagnusB Well-Known Member

    I have not noticed the spaces issue, but I have more or less given up on the editor and code tags, it just can't handle tabs. The fix Chris linked seems to be the best solution as of now.
     
    Chris D likes this.
  19. Mike

    Mike XenForo Developer Staff Member

    The editor change in 1.2 sorts this.
     

Share This Page