How to stop Redactor stripping out additional HTML

SimonClay · Feb 18th 2020

When I paste HTML into code view in Redactor it strips out the <span> tags. How can I stop this happening?

hus_hmd · Feb 19th 2020

Hi Simon,

Check Redactor's settings (https://imperavi.com/redactor/docs/settings/). If there's an option to enable the behaviour you're looking for, then you can customise your editor configuration to enable it.

SimonClay · Feb 19th 2020

Thanks hus_hmd,

This seems to be the setting: https://imperavi.com/redactor/…/paste/#s-pasteinlinetags

But I cannot get it to work. Can you see where I've gone wrong?

Code

Perch.UserConfig.redactor = function () {
var get = function(profile, config, field) {
config.pasteInlineTags = ['a', 'img', 'br', 'strong', 'ins', 'code', 'del', 'span', 'samp', 'kbd', 'sup', 'sub', 'mark', 'var', 'cite', 'small', 'b', 'u', 'em', 'i'];
return config;
};
return {
'get': get,
'load': load
}
}();

Display More

hus_hmd · Feb 20th 2020

The Redactor docs state that this is the default value for the settings:

Code

['a', 'img', 'br', 'strong', 'ins', 'code', 'del', 'span', 'samp', 'kbd', 'sup', 'sub', 'mark', 'var', 'cite', 'small', 'b', 'u', 'em', 'i']

So you're overwriting the default with the same default value which won't result in a change in the editor's behaviour.

SimonClay · Feb 20th 2020

Thanks, so what’s causing those tags to be stripped out?

hus_hmd · Feb 20th 2020

This is probably something to ask Imperavi, the company that built Redactor. I personally don't rely on the markup that's inputted into the editor so it's not something I came across.

ryan · Feb 20th 2020

Not sure on Redactor, but sometimes the `html` attribute works for me!

SimonClay · Feb 20th 2020

Thanks ryan how do you apply that?

ryan · Feb 20th 2020

Code

<perch:content id="text" type="textarea" label="Text" editor="redactor" html>

SimonClay · Feb 20th 2020

Ah, yes, I use that already.

But I cannot stop Redactor stripping out HTML tags like <span>

I've spent hours on it now, but cannot make it work.

This was much simpler when Redactor wasn't part of Perch Core.

hus_hmd · Feb 20th 2020

Quote from SimonClay

This was much simpler when Redactor wasn't part of Perch Core.

Did the same version of Redactor behave differently on Perch v2?

SimonClay · Feb 20th 2020

What I mean is, that, with Perch 2, you could follow the Redactor documentation and implement the code more easily, but now you have to translate it into the Perch 3 config way of things.

hus_hmd · Feb 21st 2020

They're both Javascript. We can help if you're not 100% sure.

If you're following the Redactor docs, you'll see this:

JavaScript

$R('#redactor', {
settingName: parameter
});

The above is the same as this:

JavaScript

let config = {};
config.settingName = parameter;
$R('#redactor', config);

Perch takes care of initiating the editor for you and lets you customise the configuration config. You can refer to this blog post for more info: Understanding Custom Editors Config

JavaScript

Perch.UserConfig.redactor = function(){
var get = function (profile, config, field) {
// customise config
return config;
};
var load = function (cb) {
// load any JS/CSS files you need for your plugins (if any)
cb();
};
return {
'get': get,
'load': load
}
}();

Display More

SimonClay · Feb 21st 2020

Thanks hus_hmd that is helpful and much appreciated.