Fixed Tabs in WYSIWYG mode

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.
 
It started doing this some releases ago, so annoying. You can't edit old posts, etc. Without patching things up all the time.
 
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.
 
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.
 
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:

Image%202012.06.08%205:26:50%20PM.png
 
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
 
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)...
 
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.
 
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.
 
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
            )
        );


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.
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.
 
@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.
 
@MagnusB Yeah, I thought the tabs are the roots of all evils, but they are not. Space sequences get trimmed too under some circumstances.
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.
 
Top Bottom