When editing item somtimes a <br /> is inserted into content

Topics: General, Troubleshooting
Jan 21, 2012 at 2:59 PM
Edited Jan 21, 2012 at 3:00 PM

Not sure if anyone has had this wierd behavior. Click "Edit" on content or widget and any actual edit while in normal view adds an extra <br /> to bottom of the content. I generally use "Source" view, and if I click "Source" first and edit I don't get the <br />. Editing in normal view generally always inserts a <br />. What's weird is that if I just simply place the cursor inside the normal view and make no edits the <br /> is still inserted.

Using CKEditor, but I believe I saw this behavior before with the stock editor.

Any clues?

Jan 21, 2012 at 3:17 PM

In an old version of the module, there was a default configuration of ENTER_BR behaviour. I started maintaining the CKEditor project after the original author was unable to continue, and I removed that default setting after a couple of versions, because <p> is usually what you want. So you probably just need to upgrade the module.

Jan 21, 2012 at 4:59 PM

Actually, I was hoping that the behavior of inserting anything could be avoided. Out of curiousity, why insert either <br /> or <p>&nbsp;</p> (which is what the update does)?

For my part I have already fixed a margin-bottom on all the zones i created in the CSS. Seems more messy to insert actual HTML rather than handle it in the CSS.

Jan 21, 2012 at 6:28 PM

I don't understand. The Body editor is for editing bodies of text, i.e. paragraphs (whether it's CKEditor or TinyMCE). You want paragraphs of text wrapped in <p>. If you're using the body editor for something else then maybe you don't need a body editor at all, rather fields instead? If you explain exactly what you're trying to achieve, maybe I can point out a way that matches your scenario better...

Jan 21, 2012 at 6:29 PM

... Or, re-reading your post, maybe you just need to delete the blank lines from the end of your content?

Jan 21, 2012 at 10:40 PM

Ahh, I see. Yes I am using them for bodies of text. Except that generally I am inserting multiple <p> elements. Also, I insert <ul> elements, which if I am not mistaken are not allowed within <p></p>.

I currently do delete the extra tags. It's just that sometimes I accidently click in the content window, then click Source, and the tags show up. Which is expected I guess.

If I might make a suggestion (unless I missed the option, which is likely), maybe a "button" to turn off auto-insert tags, but I guess that's something for the authors of CKEditor.

Thanks for the help.

Jan 26, 2012 at 3:03 PM

Is it possible to point out the location of that default ENTER_BR that was changed to <p>. I notice that ENTER_BR is still sprinkled throughout the JavaScript code, and I couldn't determine where the change was made. 

For my part I just want to disable the insertion of <p>&nbsp;</p>.

Thanks.

Jan 26, 2012 at 4:06 PM

CKEditor usually produces perfectly correct HTML (e.g. it won't put a <ul> inside a <p>, but it'll insert a <p> for every normal paragraph, and so on) so it definitely sounds like you're having a configuration problem.

Have you upgraded to the latest version of CKEditor? That might just sort it out.

The configuration file is CKEditor.Config.cshtml (in ~/CKEditor/Views, unless you've copied it somewhere else to override with your own configuration).

But, sooner or later I'm releasing a new version which has a complete admin configuration, so this file will go away in any case.

Jan 26, 2012 at 4:33 PM
Edited Jan 26, 2012 at 4:34 PM

I did update to the current module of CKEditor for Orchard.

Many of my widgets are styled differently (even within the same layout or zone). So when I pop open a widget to add content I automatically go to source view and enter something similar to the following:

<div class="box1">

	<div class="class1">

		<h1>Some Heading</h1>

		<p>Some text</p>

		<p>Some other text</p>

		<ul>

			<li>item 1</li>

			<li>item 2</li>

		</ul>

	</div>

</div>

"box1" might be red with a border

"box2" might be yellow with no border

"class 1" will have the enclosed elements styled in one way

"class 2" will have the enclosed elements styled in a different way

These variations change from widget to widget.

The problem I was getting before I updated the CKEditor module was the insertion of:

<br />

at the end.

The problem I am getting with the updated CKEditor module is the insertion of:

<p>&nbsp;</p>

at the end.

In both instances, the behavior appeared when I would click to edit a widget and then if I clicked anywhere in the view or if I clicked "Expand View". However, if I did not click in the view and did not click "Expand View" first but rather just clicked "Source View" then these inserts would not happen.

What I am ending up with if I click in the view or if I click "Expand View" is 

<div class="box1">

	<div class="class1">

		<h1>Some Heading</h1>

		<p>Some text</p>

		<p>Some other text</p>

		<ul>

			<li>item 1</li>

			<li>item 2</li>

		</ul>

	</div>

</div>
<p>&nbsp;</p>

I was just hoping I could somehow "turn off" that behavior.

With hundreds of widgets it's easier to insert the HTML elements in the widget rather than fiddle with variations in the CSS simply because a lot of times I just CUT/PASTE the HTML and then change the content as needed. Plus, if the inserts are going to happen anyway I'd be loathe to change things around to be back in the same space again anyways.

And there are times I do just edit the view (not the source), which still inserts the unwanted <p>.

I'm hoping I made sense. Thanks for taking the time.

Jan 26, 2012 at 5:31 PM

I'd have to really test this behaviour to find out why it's happening and the best way around it.

I suspect CKEditor is just adding an empty line for you at the end in case you want to carry on typing in non-source view (the whole point of having a WYSIWYG editor after all!)

Have you tried just saving and see if it strips that blank line out again?

Jan 26, 2012 at 5:33 PM

(Otherwise, you should probably take the question to CKEditor's forums / bug tracker, they might know how to easily switch off this behaviour!)