Redactor: Remove all formatting when pasting text into the Rich Text Editor

AndyB

AndyB

Well-known member
I would like to see an option that would would remove all formatting when pasting text into the Rich Text Editor. This would remove bold, font size, font color etc.. It would be identical to the way pasting text into the BB Code editor currently functions.

The Remove Formatting on Paste function would be a Admin CP setting.
 
Upvote 16
James said:
What if someone were to paste some text into the editor and then start adding formatting, such as bold? In this instance, all of those would be removed upon save too.
Click to expand...

No the formatting is only removed upon pasting text into the editor, exactly the way the BB Code Editor works. The member can add bold, underline and other formatting that I allow. On my forum I remove editor buttons like, font, color, size and others.

James said:
I think automatically removing all formatting isn't the most user friendly option here. It's much more difficult to add formatting that has been removed (imagine all the colours/styles to redo) than it is to remove formatting from already formatted text. Perhaps the solution here is a slight education curve to members to encourage the removal of unwanted formatting.
Click to expand...

Educating all the members is not a feasible or desirable option IMHO. On my forum I prefer to not allow different font styles, sizes, colors and other formatting.
 
If you don't allow them, this seems like a viable suggestion. If it's not added into the core, I'm sure an addon won't be far behind :)
 
Redactor as it's currently implemented still preserves font-sizing and colours, but I'm sure this could be fixed. Regardless of whatever the defaults end up set to, Redactor is far cleaner and easier to customize. Providing a better user experience will be much easier than it was with TinyMCE. This is a big step up for XenForo.(y)

Forums are one of the only corners of the internet that still allow visitor content to have completely random styling applied (I'm referring mostly to font-family/size/colours/etc here). It's one of the many reasons most forums tend to look so awful. Not only is messy post content ugly, but more importantly it's a massive hinderance to readability and usability. Why would anyone want to read paragraphs of yellow text set in Comic Sans because member HockeyFan329 thought it was an awesome idea? He'd probably follow it up with a giant "signature" too, another forum concept that should've completely died off ages ago.

The reactions to AndyB's original post were predictable. I really don't expect many forum admins to sympathise with my views given the state of their own sites, but at least there's now better tools available for people who actually know or care about usability and design.
 
I really like the feature in Redactor that removes most formatting codes when text is pasted. However it would be great feature if there was an option to also include the removal of the font size attribute for those admins like myself that don't want posts to contain large font sizes.
 
AndyB said:
I really like the feature in Redactor that removes most formatting codes when text is pasted. However it would be great feature if there was an option to also include the removal of the font size attribute for those admins like myself that don't want posts to contain large font sizes.
Click to expand...
You want to do this with or without addons?

Edit:
Without addon, do this:
  • Modify this class: XenForo_BbCode_Formatter_Base
  • Find the function getTags()
  • For any bbcodes you don't want to parse, just replace the code with this:
PHP: 
'bbCodeName' => array(
   'replace' => array('', '')
)
 
Last edited:
Hi cclaerhout,

You know me too well already, yes I prefer to modify the code directly.

I searched for XenForo_BbCode_Formatter_Base and it comes up in several files. I assume the one where I will add your code is located here:

/library/Xenforo/BbCode/Formatter/Wysiwyg.php

Is this correct?

Thank you kindly for your help.
 
King Kovifor said:
XenForo/BbCode/Formatter/Base.php
Click to expand...

Thank you for the tip, King Kovifor.

On line #271 I see this section of code:

Code: 
  public function getTags()
   {
     if ($this->_tags !== null)
     {
       return $this->_tags;
     }

     return array(
       'b' => array(
         'hasOption' => false,
         'replace' => array('<b>', '</b>')
       ),
       'i' => array(
         'hasOption' => false,
         'replace' => array('<i>', '</i>')
       ),
       'u' => array(
         'hasOption' => false,
         'replace' => array('<span style="text-decoration: underline">', '</span>')
       ),
       's' => array(
         'hasOption' => false,
         'replace' => array('<span style="text-decoration: line-through">', '</span>')
       ),

       'color' => array(
         'hasOption' => true,
         'optionRegex' => '/^(rgb\(\s*\d+%?\s*,\s*\d+%?\s*,\s*\d+%?\s*\)|#[a-f0-9]{6}|#[a-f0-9]{3}|[a-z]+)$/i',
         'replace' => array('<span style="color: %s">', '</span>')
       ),
       'font' => array(
         'hasOption' => true,
         'optionRegex' => '/^[a-z0-9 \-]+$/i', // regex matched to HTML->BB code regex
         'replace' => array('<span style="font-family: \'%s\'">', '</span>')
       ),
       'size' => array(
         'hasOption' => true,
         'optionRegex' => '/^[0-9]+(px)?$/i',
         'callback' => array($this, 'renderTagSize'),
       ),

etc...

Yet when I modify any of these tags it doesn't appear to effect the pasted text into the Rich Text Editor. Perhaps this is the incorrect section of code that needs to be modified?
 
This request is exactly what I asked for a year or two ago with TinyMCE; even the TinyMCE forum was no help, as nobody could figure out a way to force plain-text pasting by default.

I am glad that Redactor does handle pasted text more gracefully, but like @AndyB says, forum staff cannot be expected to educate users into changing their habits--they are going to do whatever they want. I see it as a usability problem, especially when you're running a big board and can't expect your 15 staff members to hand-hold the members to do things right. I still have a couple of client issues with WordPress where a secretary in an office will paste a Word document in to the WordPress TinyMCE editor and then wonders why screwy things happen. Switching editors just confuses some members also.

My argument was always this: the ability to paste styles into the editor window had to be written in the first place! So there had to be something in the code to disable in order to force an editor window to accept text-only pasting.

This is definitely not a XenForo problem either--it has more to do with the editor itself.
 
@Rudy
TinyMCE 3.x has a plugin for this. In his last version, there was even an option to enable the plain text mode by default. TinyMCE 4.x is going to have one in its next release.
 
What you want is a plain text mode that would need to be written by the XenForo developers since that plugin doesn't exist on Redactor.
What you also want is also to prevent a user to use the RTE or any bbcode to parse the content. The modification you've just performed will be enable after you save the message. Just check it.
 
Hi cclaerhout,

What I would like is to prevent large text to be pasted into the editor as large text, but be converted to the default text size. Redactor already has code to remove most formatting like colors, underlines and a lot more. I think if we could find that code, adding the additional code to remove the font size should be doable.
 
AndyB said:
Hi cclaerhout,

What I would like is to prevent large text to be pasted into the editor as large text, but be converted to the default text size. Redactor already has code to remove most formatting like colors, underlines and a lot more. I think if we could find that code, adding the additional code to remove the font size should be doable.
Click to expand...

Just to give you an idea of what looks like a "paste plugin" (source: TinyMCE 3.x), click here. This is not simple. Some developers have been worked on it for years so I fully respect their expertise especially when it is shared with the community.
 
Here's the solution. The code below will remove h1, h2 and h3 tags from text that is pasted into the rich editor.

Edit the following file:

/js/redactor/redactor.js

Add the code between the hack comments.

Line 2308

Code: 
if (this.opts.pasteCleanUpCallback)
{
  // start hack
  html = html.replace(/<h1[^>]*>([\w\W]+?)<\/h1>/ig, '<b>$1</b>');
  html = html.replace(/<h2[^>]*>([\w\W]+?)<\/h2>/ig, '<b>$1</b>');
  html = html.replace(/<h3[^>]*>([\w\W]+?)<\/h3>/ig, '<b>$1</b>');
  // end hack
  html = this.opts.pasteCleanUpCallback(e, this, html);
}
 
Last edited:
AndyB said:
Here's the solution. The code below will remove h1, h2 and h3 tags from text that is pasted into the rich editor.

Edit the following file:

/js/redactor/redactor.js

Add the code between the hack comments.

Line 2308
Click to expand...


Hello, did you find a solution for all copy-paste formatting ?


Thanks
 
AndyB said:
Here's the solution. The code below will remove h1, h2 and h3 tags from text that is pasted into the rich editor.

Edit the following file:

/js/redactor/redactor.js

Add the code between the hack comments.

Line 2308

Code: 
if (this.opts.pasteCleanUpCallback)
{
  // start hack
  html = html.replace(/<h1[^>]*>([\w\W]+?)<\/h1>/ig, '<b>$1</b>');
  html = html.replace(/<h2[^>]*>([\w\W]+?)<\/h2>/ig, '<b>$1</b>');
  html = html.replace(/<h3[^>]*>([\w\W]+?)<\/h3>/ig, '<b>$1</b>');
  // end hack
  html = this.opts.pasteCleanUpCallback(e, this, html);
}
Click to expand...

I am trying to apply this change. But I cannot find the hack comments in the file in the latest version of XenForo. Have things changed in the newer builds?
 
I'm currently using XenForo v1.3.1 and here's my hack:

Purpose is to strip h1, h2 and h3 tags when text is pasted into the rich editor.

js/redactor/redactor.full.js

line 2453

PHP: 
            if (this.opts.pasteCleanUpCallback)
            {
                // start hack

                html = html.replace(/<h1[^>]*>([\w\W]+?)<\/h1>/ig, '$1');
                html = html.replace(/<h2[^>]*>([\w\W]+?)<\/h2>/ig, '$1');
                html = html.replace(/<h3[^>]*>([\w\W]+?)<\/h3>/ig, '$1');
               
                // end hack
                               
                html = this.opts.pasteCleanUpCallback(e, this, html);
            }
 


Write your reply...

Similar threads

R
  • Question Question
XF 2.1 Unable to paste images or drag and drop them into the rich text editor
Replies
1
Views
710
sbj
sbj
jOOc
Partial fix Strange issues when pasting into rich text editor (holding paste keys)
Replies
3
Views
2K
Mike
Mike
wdb
  • Suggestion Suggestion
Lack of interest Limit styling that is preserved when pasting text into the editor.
Replies
4
Views
742
Digital Doctor
Digital Doctor
Back
Top Bottom