Another set of text editor improvements, ready for tryout

[Evan]

There are few things nearer and dearer to Network Creators than the text editor, which you and your members use to post blogs, add comments or message each other on your Ning Network.

We've upgraded the text editor a few times, most significantly in December of 2010, when we rolled out a completely redesigned WYSIWYG editor available to just about all areas where you type text on your network. Since then, we've added a number of enhancements to the new editor to make it easier to use and make it fit your needs better. Over the past few months though, it became obvious that the most glaring need for improvement with the text editor was around paragraph spacing.

Using the new visual editor resulted in odd spacing between paragraphs. Essentially, spacing between paragraphs was not set to be a full one line — it was set at around 50% of a full line. This means that hitting return once generated a very small space between paragraphs. This also meant that many members (even here on Creators) ended up hitting return twice instead, generating a very large space:


To fix this, we've done a couple things.

Paragraph spacing is adjustable
Network Creators and administrators can now change their Ning Network's paragraph spacing with a knob in the "General" section of Design Studio, as well as using the old Appearance Editor.


Simply set paragraph spacing to 100% — our recommended setting — and you'll have a proper, full line between each paragraph when text is created in the editor's visual mode. Or, perhaps you prefer having to hit return twice (instead of once) to create a new paragraph? Just set the knob to 0%, and new paragraphs won't have any spacing automatically added to them. Each time you hit return, you'll get a full empty line.

Do note, though, that will affect existing content on your Ning Network. We've already made this change on Creators, and you might notice that hitting return now gives you a new paragraph with proper spacing: a full line above and below!

Better handling of line breaks in the text editor
Along with control over spacing, we've also updated some of the ways in which the text editor handles line breaks and how it creates the code around text you've added.

Earlier this summer, we added a new control over the text editor. These controls allowed you to have text added in HTML mode converted to <p> tags. The problem was that it was converting every single line to <p> tags, even for lines that were part of the same paragraph — which would add spacing around those lines, when it didn't exist originally.

That problem has been fixed, and now all blocks of text added in either Visual or HTML mode will be appropriately wrapped in <p> tags. Lines that have a "soft return" (similar to hitting Shift + Return in Microsoft Word) will get a <br /> tag, so they will still visually appear as part of the same paragraph.

HTML editor acts like an HTML editor
The HTML editor has always been somewhat of a hybrid. While it's supposed to be for HTML-proficient users, we've also tried to make it easy for anyone to use. Specifically, we've tried to preserve all line breaks added in HTML mode.

This actually caused more problems than it solved, and ended up creating a lot of bugginess with the editor. So, while you will still be able to type paragraphs into HTML mode, extraneous line breaks will be ignored. So if you are in HTML mode and actually want 5 lines of space between two paragraphs, you'll need to enter the HTML code to do that, or go to Visual mode — where it is actually supposed to be "What you see is what you get". So, to recap, a single line break separating paragraphs will look fine, but a bunch of extras spaces will be tossed out.

This is much more in line with how other editors work around the web.



Can I just leave my network alone?
With this release, one of our big goals was to not change anything on your Ning Network if you didn't want it to change. We want to get your feedback on these changes, and see if they improve the text editor and make it easier to use.

As a result, we've wrapped all these changes into a Ning Labs feature that you can enable and disable. But please, send us your feedback! These changes are aimed at making your life easier and making your Ning Network look better, and we want to hear your thoughts.

To enable it, head to the Ning Labs page in your dashboard.

[Jen]

Gotta get my mind around all the changes, before I activate. So far, it sounds great.

Thanks!

[Evan]

I know it's pretty complicated stuff :)

Would love to get your feedback and see it enabled on your network (and spacing set to 100%).

/Evan

[Jen]

I'll sure do it - - probably next week though.

=)

[Jen]

Evan,

I'm confused and frustrated. I haven't changed anything on JenSocial in regards to the editor updates, not yet. However, things are messed up. I have a lot of space above a <style> tag in a text box, critical to the look, and a lot riding on this code.  I can't seem to figure out how to eliminate this space. It's not in the HTML.

Also, when I edit a tip that has code (CSS in particular), I have all these hard coded DANG <br> tags in the HTML, that weren't there before. Any ideas how I can get back to normal? I'm on a really tight schedule this week, and this is bringing things to a screeching halt. I'd be happy to call or submit a support ticket. But thinking you're the only person who will probably know what I'm talking about.

Thanks in advance,

Jen

[Jen]

Hi Evan,

As soon as I wrote, finally found it. But would love to know why? I found 3 inserted <p> tags one after the other. I don't know why they are inserted. I'll report back if I figure it out.

I wish I could go back to good old-fashioned HTML, and would if my members wouldn't stroke out. =)

<p></p>

<p></p>

<p></p>

Thanks,

Jen

[Cherry]

Hi Jen,

I've been seeing that for a quite a while now 

[Jen]

OMG, how do I make it stop? LOL, seriously, just a nightmare.

[Jen]

Evan!

"Can I just leave my network alone?
With this release, one of our big goals was to not change anything on your Ning Network if you didn't want it to change."

NOT TRUE at all...

[Evan]

Jen,

We didn't touch the code for the text editor unless you enable the changes in Ning Labs. I'm pretty unclear about the problems you're seeing. From what I can tell:

• You're seeing <br /> tags in HTML mode, when they didn't appear previously
• You're seeing <p> tags inserted where they shouldn't be

It's hard to get a sense of these problems without reproducing them. Could you point me to an example I can look it?

/Evan

[Jen]

Evan,

I'm really having a hard time. I haven't even accessed the Ning Labs until just now to make darn sure it wasn't activated. And it's not. On your 2 bullets, that is correct. Here's a step-by-step of what I just experienced:

I pasted CSS to a tip discussion. The code was copied from Notepad Editor. When I paste into the discussion, whether in Visual or HTML, it adds <br> to each end of line, and gives me more than 1 line on the visual. Does that make sense?

Thanks, and sorry for my impatience. I'm sort of a slow burn, then when I reach my limit, get a little crazy. This has really caused me a lot of wasted time today. I know it's probably something I'm missing or "not getting". I just want it to work the way it did until I have more time to play with it.

Best,

Jen

 

[Jen]

Give me a minute and I'll pop you a link. I'm trying to decide if this latest tip will throw in the <br>s or not. If I click on the HTML, it throws them in. But if I re-copy/paste the code, seems it's okay before saving. But click on HTML, I get the extra spacing with the <br> tags.

[Jen]

Okay Evan,

Here's the discussion. I've been trying to add this discussion on/off since this AM. I finally saved it, and now I need to edit. If I go into edit have all these <br>s and extra line-spacing.

http://jensocial.com/group/ningnetworktips/forum/topics/ning-more-b...

Thanks, taking a break. LOL

Jen