October: October Rich Editor Issue

[Benpxpx]

When using the Rich editor, if I put custom HTML into the code view, switch to design view then save it goes from this

<pre><code class="hljs css">@font-face {
    font-family: Chunkfive; src: url('Chunkfive.otf');
}
body, .usertext {
    color: #F0F0F0; background: #600;
    font-family: Chunkfive, sans;
}
@import url(print.css);
@media print {
    a[href^=http]::after {
        content: attr(href)
    }
}</code></pre>

to this

<pre class="code-container">&lt;code class="hljs css"&gt;@font-face {
    font-family: Chunkfive; src: url('Chunkfive.otf');
}
body, .usertext {
    color: #F0F0F0; background: #600;
    font-family: Chunkfive, sans;
}
@import url(print.css);
@media print {
    a[href^=http]::after {
        content: attr(href)
    }
}&lt;/code&gt;
</pre>

Is there any way to stop this behaviour in particular?

I also noticed that it doesn't play well with the HTML5 Address tag, below is an example of what happens to the code

<address>
test
</address>

to

<p><br>
</p><address>
test
</address>

@jonpxpx
Many thanks

[wilsonglasser]

I'm having problems with richeditor too, I want to use divs + p, but the redactor default settings for convertDivs is current true. With this true, the editor is converting all divs to p.

For me the only way to fix this is to change the core: richeditor.js and build all assets again... but with every core update I need to change again.

I want the possibility to use divs in my code, an editor changing my code is not what I want.

[tobias-kuendig]

Same here. Futhermore, it would be useful to enter html containing classes too. But IIRC classes are remove as well.

[artras]

+1

[jonpxpx]

Any thoughts on this @daftspunk? We're trying to use highlightjs on the site but due to redactor only allowing a limited set of tags, the tags required are removed.

[daftspunk]

There is some general confusion around the RichEditor in October. The plugin is currently configured to only allow tags that it can generate itself via the WYSIWYG mode (design view) -- this is only a handful of tags (h1,h2,h3,p,strong,em,figure,etc.). So if you are adding "non-standard" tags via the code view, they will be stripped out or encoded like this. Simply because a non-technical user will likely strip them out through the course of normal use.

If you want to add tags like <address /> and so on, consider creating a Redactor plugin for it, along with the accompanying user interface.

[wilsonglasser]

@daftspunk We know that the RichEditor is configured to only allow tags used in the WYSIWYG, it is why we are complaining, we want possibilities!

For my case,
I want to add more tags with plugins or just changing the config. But I need to change the RichEditor core .js to allow new tags or add plugins. Is possible to change the config without change the core? (For my case I need the change to apply to ALL RichEditor instances)

[amdad]

So use this plugin.

[jonpxpx]

I am afraid @amdad that this wouldn't allow us to extend redactor. We will write something no doubt in the future. Many thanks.

[daftspunk]

This was retested using the implementation in #2005 and could no longer be replicated. If the issue still exists, please log a new issue for it.