Current status of the Ning Platform is always available on the Ning Status Blog.

Another set of text editor improvements, ready for tryout

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.

You need to be a member of Ning Creators Social Network to add comments!

Join Ning Creators Social Network

Votes: 0
Email me when people reply –

Replies

  • Hello there,

     

    Since you guys have enforced this feature I'm having a problem in lot of text module built on HTML...

    I can't even make your suggested slider working anymore because the editor rubs off <p> tags automaticly...

    I thought HTML was to override Text editor not to be tainted by the editor?

    Could someone help me find a way to make these sliders work or deactivate that feature. 

    I don't even dare touch any of my custom page now and I have so many...

     

    First time ever I witness a clumsy move like this with ning team, you guys always roll out changes so smoothly before...

  • The only thing that I need is very simple: a justify paragraph option in the text editor.

  • Perhaps it should be mentioned that a new LESS variable is created when the feature is enabled:

    @ning-p-margin-bottom

    And that the theme's CSS code is modified. I was surprised to find this at the begining of the styles sheet:

    .xg_theme .xg_user_generated p,
    .xg_theme .xg_user_generated ol,
    .xg_theme .xg_user_generated ul,
    .xg_theme .xg_user_generated dl,
    .xg_theme .xg_user_generated blockquote,
    .xg_theme .xg_user_generated table,
    .xg_theme .xg_user_generated h1,
    .xg_theme .xg_user_generated h2,
    .xg_theme .xg_user_generated h3,
    .xg_theme .xg_user_generated h4,
    .xg_theme .xg_user_generated h5,
    .xg_theme .xg_user_generated h6 {
           margin-bottom:@ning-p-margin-bottom;
    }

    We don't use the Easy DS knobs as they overwrite some of the variables we have set by hand. So once the feature is enabled, new LESS variables and CSS styles back-ups need to be made.

  • I enabled this a few days ago, but I had some big problems with it this morning. I was editing a page that had an iframe. It removed the code from the iframe. I tried it several times and then was foolish enough to try it on a different page. It messed up that page too. I changed to a different browser and had the same problem. Then I remembered that I had enabled this beta text editor. I disabled it and was able to repair my pages. 

    • This reply was deleted.
      • I don't know, Eric. I didn't enable it again. Let me try it to see what happens. I'll let you know. 

        • It isn't working yet. This is the code I put in:

           

          <script src="http://tinychat.com/embed/frame.js"></script><div id="client"><script type="text/javascript">tinychat({ room: "nosayudamos1"}, { width: "600", width: "600" });</script><a href="http://tinychat.com">video chat</a> provided by Tinychat</div>

          and this is what was there after I saved it. 

           

          <div>
          <script src="http://tinychat.com/embed/frame.js" type="text/javascript"> </script>
          <div id="client">
          <script type="text/javascript">// <![CDATA[
          tinychat({ room: "nosayudamos1"}, { width: "600", width: "600" });
          // ]]></script>
          <a href="http://tinychat.com">video chat</a> provided by Tinychat</div>
          </div>

          It was ok at first but then after I opened it again to edit it, it wouldn't work. 

          • Hey Cherry!

            So it looks like this page doesn't actually have an iframe embedded, it has a <script> tag. With this new improvement to the text editor, we found an issue with <script> tags that we're hoping to fix by tomorrow. Thanks for your patience.

            /Evan

            • Hi Evan,

              No problem, there are always little kinks to work out.

               

  • Would like to see the font size and font color feature added to the text editor on members pages.There are many members on many sites that have a hard time tiring to see what they are writing because the font size is sooooooo darn small.When you added this new editor over top of the old one you took our ability away from us to change the font size  and color with the css code.We have been able to crack the new editor for some things but this is the only thing we can not seen to change and many people don't like it one bit.

    Many don't really care about paragraph spacing, they care about seeing what they are typing on a members page.

  • the main problem with the html in forum discussions, blogs, & pages is that it never displayed apps or polls how they were suppose to. It either didn't show up, only the text showed up, discombobulation (if you will), among other things.

     

    i cant even use polldaddy without something happening that reminds me of why I'm not using polldaddy. I should be able to embed a html poll anywhere and get the proper display & fucntionality.

This reply was deleted.

Meanwhile, you can check our social media channels