Div replacing with p in editior of concrete5

Permalink 2 users found helpful
Hi, I am developing a site in concrete 5.7 version. In the editor of concrete5 if I write <div> html tag then it was replace by <p> html tag after save. Is there any solution for this?
Thanks

theneptune
 
theneptune replied on at Permalink Reply
theneptune
Can any one please assist?
andrewjaff replied on at Permalink Reply
andrewjaff
Hi,

This is because concrete5.7 use redactor js.

Create a js folder in application and override redactor js and change its settings .
theneptune replied on at Permalink Reply
theneptune
Thanks andrewjaff for reply.

What setting I have to change in redactor js to overcome the problem of div replacement?
andrewjaff replied on at Permalink Reply
andrewjaff
Hi ,

Change this setting
replaceDivs: false
mhawke replied on at Permalink Reply
mhawke
I couldn't find where to change this setting in the minimized redactor.js so here's how I solved this. It works but I have no idea if it has unintended consequences.

1) Create an /application/js folder
2) Copy /concrete/js/redactor.js into your new /application/js folder
3) Add this code to the end of your new copy of redactor.js
$(document).ready(function(){
$('#redactor').redactor({
   replaceDivs: false
});
});

If anyone knows of a more elegant way to override the settings in redactor, please chime in.
theneptune replied on at Permalink Reply
theneptune
Thanks for reply mhawke.

The convenient solution is to change convertDivs: false in redactor.js.
theneptune replied on at Permalink Reply
theneptune
Thanks for reply andrew

In redactor js I am not getting any where
replaceDivs: false

Where I will get it?
rge replied on at Permalink Best Answer Reply
This answer is update so other people can find the correct solution.

5.7.x - 5.7.3
replaceDivs does not exist in the Redactor file.
You should replace covertDivs.

convertDivs: true, // change this to false

Paths to the files:
/concrete/js/redactor.js
/concrete/js/build/vendor/redactor/redactor.js


--- update (comment Mhwake) ---

5.7.4 >

make copy of redactor.js and place it in /application/js make the adjustments in this file.

The 'convertDivs' solution will not work after you upgrade to 5.7.4 because it now uses Redactor 10 in which convertDivs has been changed to replaceDivs

replaceDivs: true, // change this to false


--- update (comment Hissy) ---
5.7.5+
Overriding RedactorEditor class to customize Redactor options
https://gist.github.com/hissy/8da3e9ffe9f3935d1be8...
theneptune replied on at Permalink Reply
theneptune
Thanks rge for your reply.

Yes it works perfectly after changing convertDivs to false in redactor.js.

Thanks agian for your help.
mhawke replied on at Permalink Reply
mhawke
Just a reminder that you need to make a copy of redactor.js and place it in /application/js and make your changes in the copy or else your change will be gone the next time you upgrade to a new version of concrete5.
Responsive replied on at Permalink Reply
Responsive
Hi
For 5.7.3.1 I copied concrete/js/build/vendor/redactor/redactor.js
to application/js/build/vendor/redactor/redactor.js and altered convertDivs to false.

This works in a way, if I input for example <div class="hero-unit"> ..... using the html button and then click the html button to revert back to normal , I still get the Div replaced by <P>.
However if i do above without clicking on html button to revert back and just click save button , it works. Not sure why ?

Thanks
mhawke replied on at Permalink Reply
mhawke
The 'convertDivs' solution will not work after you upgrade to 5.7.4 because it now uses Redactor 10 in which convertDivs has been changed to replaceDivs

http://imperavi.com/redactor/docs/whats-new-10/...

Newest code on Github:

https://github.com/concrete5/concrete5-5.7.0/blob/develop/web/concre...

My test site is on 5.7.4RC2 so that's why my 'replaceDivs' solution worked for me. Sorry for the confusion.
theneptune replied on at Permalink Reply
theneptune
Oh yes mhawke you are right. Thanks for reply.
theneptune replied on at Permalink Reply
theneptune
Thanks rge for your update for version greater than 5.7.4.
areej replied on at Permalink Reply
thanks alot it helped me.
mrjcgoodwin replied on at Permalink Reply
mrjcgoodwin
Following the steps above I can't get this Redactor override to take affect - to I need to do something to make it start working?

Currently inserting div tags to html view of content editor will work but they are stripped if you go back in to edit the block.
hissy replied on at Permalink Reply
hissy
5.7.5+

Overriding RedactorEditor class to customize Redactor options:
https://gist.github.com/hissy/8da3e9ffe9f3935d1be8...
mrjcgoodwin replied on at Permalink Reply
mrjcgoodwin
Thanks Hissy,

You can ignore my previous post, I was trying to follow the path listed further up this thread, but you can replace the file directly into application/js folder.

Also unlike the earlier poster you need to replace the concrete/js version of redactor.js not the deep nested path mentioned earlier. This file is minified, but if you search for 'replaceDivs' you can find the correct parameter to alter.

Thanks all.
mhawke replied on at Permalink Reply
mhawke
Am I the only one who thinks it's ridiculous to have to jump through these hoops to alter Redactor's basic settings? Is there some unintended consequences to having a page of check boxes where we could turn on/off Redator's basic behaviours?
mrjcgoodwin replied on at Permalink Reply
mrjcgoodwin
Agreed!
Shotster replied on at Permalink Reply
Shotster
Thanks, Hissy, that's great. I was doing it the hard way.

-Steve
MrKDilkington replied on at Permalink Reply
MrKDilkington
@hissy

Thank you hissy, that is very clever.
mrjcgoodwin replied on at Permalink Reply
mrjcgoodwin
computer went nuts - deleted!
mrjcgoodwin replied on at Permalink Reply
mrjcgoodwin
computer went nuts - deleted!
mrjcgoodwin replied on at Permalink Reply
mrjcgoodwin
computer went nuts - deleted!
JohntheFish replied on at Permalink Reply
JohntheFish
I have not tried this, but at a guess you need to clear the override cache.
felixb101 replied on at Permalink Reply
felixb101
This issue is really important and deserves attention from the core developpers. At the very least, it should have an entry in the docs, it took me 1.5 hours to find.
SmoothPixel replied on at Permalink Reply
SmoothPixel
Hi MrJC

I had problems getting this to work. As a deadline was looming I resorted to the following (horrible hack):

1) Copy concrete/js/redactor.js and save it to application/js/redactor.js
2) Open up your new redactor.js file in your code editor and do a "find and replace" for
replaceDivs:!0

3) Clear the cache (as JohnTheFish says)

and change it to:
replaceDivs:!1


Caveats:
- It's a quick and dirty hack which is likely to break Redactor every time it's updated in Concrete5. Therefore you will need to replicate the above steps after every update.
- This works for 5.7.4.2 but it may not work in later (or earlier versions)

Good luck!
SmoothPixel replied on at Permalink Reply
SmoothPixel
Update - I missed Hissy's post. That looks like the right way to do it ;-)
mrjcgoodwin replied on at Permalink Reply
mrjcgoodwin
@SmoothPixel that's what I did in the end - will study doing it properly when I get 5 lol!
SmoothPixel replied on at Permalink Reply
SmoothPixel
Yep - me too when I get 5 :-)

As @mhawke says, there's a lot of jumping through hoops to get Redactor working.
aruben replied on at Permalink Reply
aruben
Hi,
I wrote an answer to a similarly post
https://www.concrete5.org/community/forums/5-7-discussion/content-bl...

The problem is that if you use DIV in Redactor, you need to include all it content into a P tag (ie: DIV P ... /P /DIV), otherwise, Redactor breaks the DIV when we insert an element (text, image...). Look at the html view in Redactor...
Same issue with SECTION tag.
And if you use the linebreaks options (use BR instead of P), you no longer can use the P tag.

In many case, the DIV can be replaced with P or SPAN tags or moving it class to the child. And if not, there are the HTML block or it's possible to create a specific theme page.
We need to keep in mind that Redactor can't (currently) make complex design, it's for Redacting text. For the design, we have grid and theme page.

So, I think it's better to use a specific theme page to add SECTION tags, the grid system to add DIV, with Redactor inside to put the text, instead of using DIV inside Redactor.

Do you agree with me?

Thanks,
ARuben