Posting Issues with Editor

[Koby]

For whatever reason the editor seems to think that each new line needs to end and reopen a new div. On 3.4.8 we had custom bb code for a box that was used for a template in one section of our community. In 4.1.x we've not figured out how to make this an option in the editor except to copy from an old post and paste it into the new thread. The issue is when we go make a new line by hitting the enter button, instead of going to a new line inside the box, it instead closes that box and creates a new one.

It's also impossible to click under the box to type anything outside of it, and each new 'enter' just creates a new box...

How do I work around this?

 

Here is an example:

blah

this should still be in the first box, but hitting enter created this box instead of a new line inside the first.

this should still be in the first box, but hitting enter created this box instead of a new line inside the first.

this should still be in the first box, but hitting enter created this box instead of a new line inside the first.

ugh can't get out of these boxes to type anything outside them under... enter just makes new box...

[Lindy]

First things first -- have you reviewed this guide to see how to add an editor button? You should be able to do essentially the same thing as you did with your BBCode. 

Secondly, you can do shift+enter to stay within the box.

[Koby]

1 minute ago, Lindy said:

First things first -- have you reviewed this guide to see how to add an editor button? You should be able to do essentially the same thing as you did with your BBCode. 

Secondly, you can do shift+enter to stay within the box.

Thanks shift+enter works. It seems kind of odd though and isn't something people would just know off-hand. So I suppose I'll have to include it in a guide or our FAQ. How about the issue of not being able to leave the box if there isn't any line under it to click?

I'll take a look into the custom button making, thanks for pointing it to me.

 

Another issue we've had, is when people copy these templates, it sometimes copies the background color and there is no way of removing that. If you click the 'remove format' it just removes every bit of format of the copied text which defeats the point of copying the template. I'm not even sure why it's randomly copying the background of posts with copied text in the forum anyhow, but we have the background color option button removed from our editor. As a result, I've had to edit users posts as an admin who can use the 'view source' button and manually remove the background color code from their posts since we haven't discovered any other method of doing so.

[Lindy]

If it's formatted as such, it will copy accordingly. There's really no way for the editor, by default, to know what you really intended to be copied and what you didn't. 

I'd probably encourage you to take a look at the CKEditor demo: http://ckeditor.com/demo and see if you can replicate your concerns there. If so, there won't be anything we can do on our end. If not, let us know via the bug tracker and we'll take a look. Also note, there's a wealth of plugins and information there that should be applicable to your community. 

Since you're copying/pasting the boxes, my guess is something in the formatting isn't being fully translated. Take a look at the original bbcode HTML and apply it to the custom editor button, then see what happens. 

[Koby]

16 minutes ago, Lindy said:

If it's formatted as such, it will copy accordingly. There's really no way for the editor, by default, to know what you really intended to be copied and what you didn't. 

I'd probably encourage you to take a look at the CKEditor demo: http://ckeditor.com/demo and see if you can replicate your concerns there. If so, there won't be anything we can do on our end. If not, let us know via the bug tracker and we'll take a look. Also note, there's a wealth of plugins and information there that should be applicable to your community. 

Since you're copying/pasting the boxes, my guess is something in the formatting isn't being fully translated. Take a look at the original bbcode HTML and apply it to the custom editor button, then see what happens. 

I understand that there is no way for it to know what I want and what I don't. The thing is the copied text had no background color defined, yet somehow copied the background color of the forums 'ipsBox' css background color of whatever theme the user was using when they copied it. Considering this is part of the theme and not part of the actual copied text format I just found it odd that it was only occasionally (not every instance) being copied over.

As for the 'custom button', I just tested it using

<div style='padding:8px;border:1px solid rgb(59,59,59);'>
{content}
</div>

I'd use a class and add it to the custom css of the theme for final production... but this was just a test.

-> However this still ends up with the issue of not being able to leave the box. Enter as well as the shift+enter you suggested before both only create a new line in the box and there is no way of clicking below it to continue on with the rest of the post outside of said box. Also if you're on a line with text when you click the button for the box, it inserts everything on that line inside the box rather than placing the box on the line below.

[Lindy]

You're probably going to want to get assistance from someone with more CSS knowledge. If it were me, I'd put a <br /> before and after the <div></div> which should solve both of your issues (should allow you to down arrow out of the box) - whether there's a better way, I don't know - that's not my expertise.

[Koby]

8 minutes ago, Lindy said:

You're probably going to want to get assistance from someone with more CSS knowledge. If it were me, I'd put a <br /> before and after the <div></div> which should solve both of your issues (should allow you to down arrow out of the box) - whether there's a better way, I don't know - that's not my expertise.

Thanks. Adding <br /> at the end worked to be able to click after it. However adding it before as well didn't stop everything from the line being added inside the box.

Also seems there is some kind of error.

I have this:

<br /><div style='padding:8px;border:1px solid rgb(59,59,59);'>
{content}
</div><br />

However when I click save and go back to it to look, it's changed it to this:

<div><br /><div style='padding:8px;border:1px solid rgb(59,59,59);'>
{content}
</div><br /></div>

I don't know why it's adding a new div around all that like that.

[Lindy]

It will do the same thing for bulleted and numbered lists. I might suggest taking a look at the quote and code box behavior and try to mimic that in your custom element. 

[Koby]

1 minute ago, Lindy said:

It will do the same thing for bulleted and numbered lists. I might suggest taking a look at the quote and code box behavior and try to mimic that in your custom element. 

Alright so it's normal function for it to add an extra div to the custom html box.

 

One final thing. Creating these custom buttons requires that you upload an icon for it to use. The issue is that it's one single icon that is used globally across all themes. Different themes on my community use different editor skins. The themes I've created myself mostly use moono, which the icon I used looks fine on; however other themes such as Ehren's from IPSFocus use his own color coordinated style based on the original editor skin, as such while moono uses dark color icons, Ehrens dark themes use white colored icons and thus it looks out of place on them. Maybe this is something I should be referring to him since it's theme related, but is there any actual way to use a different icon or something based per theme or some other method other than simply leaving it as is?

[Lindy]

No, it's normal for it to put it on the same line. Hopefully someone else can help you with your editor tweaks - it's a bit out of my wheelhouse, sorry - I tried.