Text editor really lets the software down

[gbstn10]

When you're writing articles you want things to be simple, like WordPress. For me, the experience of writing on IPS right now is very frustrating and very time-consuming.

1. The RTE should look exactly like the post. There's no point having a preview if it looks nothing like the final entry.
2. Every time I skip a line I get a paragraph with a margin on it. It should really give me a standard line-break; the spacing is too vast right now.
3. There should be no margin on the paragraphs, line-break or not. The way it is now is presumes you want to write large blocks of text; which is not always the case when you are writing in a forum post.

Hopefully this can be addressed. it's a flaw in an otherwise excellent experience. Right now I'm trying to edit the custom.css file to do this myself, but it should be standard.

[opentype]

 

1. The RTE should look exactly like the post. There's no point having a preview if it looks nothing like the final entry.

Can you be more specific? What exactly does look nothing like the final output? 

1. There should be no margin on the paragraphs, line-break or not.

Well, I strongly disagree. And there we have it: it’s a matter of taste. 
If you want to change it, I wrote down code examples here:

 

[gbstn10]

Can you be more specific? What exactly does look nothing like the final output? 

Well, I strongly disagree. And there we have it: it’s a matter of taste. 
If you want to change it, it wrote down code examples here:

 

​1. The RTE is smaller in font-size, for a start. But, when you edit the margins on the text in the .css, it doesn't update in the editor. I think the RTE should follow the text settings for each specific area it's located in.

2. It's not a matter of taste, it's a matter of cohesion. Software like Microsoft Word won't add margins to the text unless you set it to do so. I'm aware the text formatting looks very nice as it is now. However, that could be achieved using standard editing practices. The margin right now is something like 13-14px. It should be half of that, at most. With a smaller or non existent margin on the paragraphs, you can simply press the enter button to add spacing. The line-height couple be adjusted from there to make the text look as it does now – without the presumption that you'll only ever be writing big paragraphs.

 

My settings now are;

margin: 0px

line-height: 1.8

 

The default settings are;

margin: 14px

line-height: 1.6

 

^ This list above proves that the spacing is crazy. Why would I want a whole line to separate each item on a list?

[opentype]

​1. The RTE is smaller in font-size, for a start. But, when you edit the margins on the text in the .css, it doesn't update in the editor. I think the RTE should follow the text settings for each specific area it's located in.

True. The CKeditor is an embedded piece of software with its own CSS. If you make changes to the custom.css you might want to duplicate that in the CKeditor CSS. 

 Software like Microsoft Word won't add margins to the text unless you set it to do so.

Ha! That was a poor comparison. With Word 2007, Microsoft did in fact got rid of the old “typewriter” styling of it’s early days and added an optical “blank line” between the paragraphs—just as here. 

 

[BomAleold]

 

2003-2007 periods is not equal to 2012-2015... but this concern is same ()not a good evolve with ckeditor.

 

 

[gbstn10]

True. The CKeditor is an embedded piece of software with its own CSS. If you make changes to the custom.css you might want to duplicate that in the CKeditor CSS. 

Ha! That was a poor comparison. With Word 2007, Microsoft did in fact got rid of the old “typewriter” styling of it’s early days and added an optical “blank line” between the paragraphs—just as here. 

 

​I don't use Word, I have a Mac. It was just the easiest way to say that – as far as I'm aware – most text editors do not have margins acting as line-breaks.

Irrespective, the code can be improved to give it the right look on the frontend, without the forced spaces in the editor.

[opentype]

… most text editors do not have margins acting as line-breaks.

​It depends. Text editors are a big field, which might include use cases of coding an app to layouting a book. The way to treat paragraphs depends on the use. 

But why reach so far. Just write a simple web page without any styling whatsoever, which contains nothing but two paragraphs and open it in any browser of your choice. You will see a paragraph spacing that looks just like here—roughly one empty line. It’s the default of the whole web and it’s there for a reason. 

[gbstn10]

​It depends. Text editors are a big field, which might include use cases of coding an app to layouting a book. The way to treat paragraphs depends on the use. 

But why reach so far. Just write a simple web page without any styling whatsoever, which contains nothing but two paragraphs and open it in any browser of your choice. You will see a paragraph spacing that looks just like here—roughly one empty line. It’s the default of the whole web and it’s there for a reason. 

​Like you say, it depends on use. Right now, if you're using IPS for paragraphs – not a problem. If you want to do a quick list with one item under the other, it's a mess because it's giving you a paragraph spacing rather than a simple line break.

 

Example of a list of people…

Terry

Mike

Dave

 

^ The spacing there is too big. That's the point I'm making. It's okay for big blocks of text, but on posts you won't always get away with it – and it's a needless compromise.

[opentype]

^ The spacing there is too big. 

​So do this instead …

Soft line-break list:
Terry
Mike
Dave

Real HTML list:

• Terry
• Mike
• Dave

[GrooveOnBeat]

There's quite a few threads about this matter and there are opinions favoring both sides, double-space vs single-space.  CSS edit can resolve it.  However, since it is a matter of user preference, I'm all for implementing a setting in the editor (if it exists) that enables the users to choose whether they want double or single spacing as a default.  There is a "Preference" option on the toolbar after all.

 

[gbstn10]

​So do this instead …

Soft line-break list:
Terry
Mike
Dave

Real HTML list:

• Terry
• Mike
• Dave

​I wanted to ask, since you mentioned it before… do you know how to edit the ckeditor .css? I've edited it myself but it appears to be cached and won't update. I have no idea how to get around that.

[gbstn10]

Nevermind, I got it to work.

[genrobgen]

Agreed. A linebreak should be a linebreak, not a new paragraph.

If I want a new paragraph, I enter two linebreaks.

This is the #2 complaint among my users (#1 being that everything is slow).

[genrobgen]

@GabrielS, would you mind sharing how to edit the CKEditor CSS and refresh the cache?

For the benefit of me and anyone else who might search this subject and find this thread.

[genrobgen]

Sorry, one more comment...

I think I read an IPS staff member saying somewhere that the text editor is WYSIWYG, like Gmail.

Well, in Gmail a linebreak is a linebreak. Same in Google Docs.

Many people are accustomed to using these Google editors, so I think forum software should follow that standard.

[Lindy]

Agreed. A linebreak should be a linebreak, not a new paragraph.

If I want a new paragraph, I enter two linebreaks.

This is the #2 complaint among my users (#1 being that everything is slow).

​To be honest, my initial knee jerk reaction was the same. Unfortunately, that's not the proper method and is not the default in any modern editor that I'm aware of... not CKEditor, Redactor, or TinyMCE. All use paragraphs by default as it produces proper HTML. You can hack it to do newlines (which is what we did in the past) but it produces messy results... it's recommended to simply shift-enter to create a newline. 

As for the slowness - we're very aware of that issue. Currently, the editor loads in an iframe with a delay. Upon upgrade of CKEditor, we're switching that to a div which should drastically improve response time. 

[genrobgen]

​ not the default in any modern editor that I'm aware of

​Thanks for the response.

Linebreak = linebreak is default in Gmail and Google Docs, as mentioned.

Those are pretty modern editors. In fact, I'd say they're close to industry standard.

[gbstn10]

@GabrielS, would you mind sharing how to edit the CKEditor CSS and refresh the cache?

For the benefit of me and anyone else who might search this subject and find this thread.

​First you will need to find the .css file on the server –> /applications/core/interface/ckeditor/ckeditor/skins/ips/contents.css

You then need to add/change the following in the .css file.…

 

body
{
    /* Font */
    font-family: sans-serif, Arial, Verdana, "Trebuchet MS";
    font-size: 14px;
    
    /* Text color */
    color: #323f44;
    
    /* Remove the background color to make it transparent */
    background-color: #fff;
    
    margin: 20px;
}

.cke_editable
{
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: #323f44;
}

.cke_editable p {
    margin: 7px 0 !important;
}

.cke_editable a {
    color: #255b79 !important;
}

^ Adjust the values based on what you want yourself.

 

Once you've saved the file, go to your ACP and edit the skin settings. You can pick the CKEditor theme you're using. Change the CKeditor theme associated with your skin and save the settings.

After that, go to a forum topic and view the editor (this should refresh the cache). You don't need to do anything with the editor, so go back to your ACP and set the skin's CKEditor theme to 'Standard' (the custom ones don't work with the changes). Save the settings and when you go back to view the editor, the changes should have updated.

That's how I did it eventually.

 

[genrobgen]

Great, thanks very much.

[gbstn10]

​To be honest, my initial knee jerk reaction was the same. Unfortunately, that's not the proper method and is not the default in any modern editor that I'm aware of... not CKEditor, Redactor, or TinyMCE. All use paragraphs by default as it produces proper HTML. You can hack it to do newlines (which is what we did in the past) but it produces messy results... it's recommended to simply shift-enter to create a newline. 

As for the slowness - we're very aware of that issue. Currently, the editor loads in an iframe with a delay. Upon upgrade of CKEditor, we're switching that to a div which should drastically improve response time. 

​I started the topic, and to be honest, once I found out about the shift+enter option, things improved.

I have still adjusted the paragraph margin to 7px and the line-height to 1.5, but I have no complaints with the editor now that I have also managed to adjust the CKEditor .css to reflect the post style. That was a big issue for me, as I'd edit something in the RTE and then it'd look different (spacing-wise) in the post or article.

[opentype]

If I want a new paragraph, I enter two linebreaks.

That’s what you have to do on a typewriter. But digital typesetting can be much more advanced. You can and you should separate content/structure and styling. A paragraph is a structural unit. The space between paragraphs is styling and can and should be globally applied to the whole site, book or whatever. If you hit enter twice to create a new paragraph “optically”, you break this principle of separating content/structure and styling. You hard-code a line in the content, that should be left to styling. It’s just bad practise. Like hitting the space bar 5 times to simulate a tabulator or line indent. I’m a typographer. I set type for a living and whenever I get text from others I have to get rid of the results of such bad practises. It’s 2015 now. We can do better than the typewriter—and we should. 

[GrooveOnBeat]

Interesting discussion we got going here. I'm surprised that I haven't seen the single vs double space after the period debate. 

 

[gbstn10]

That’s what you have to do on a typewriter. But digital typesetting can be much more advanced. You can and you should separate content/structure and styling. A paragraph is a structural unit. The space between paragraphs is styling and can and should be globally applied to the whole site, book or whatever. If you hit enter twice to create a new paragraph “optically”, you break this principle of separating content/structure and styling. You hard-code a line in the content, that should be left to styling. It’s just bad practise. Like hitting the space bar 5 times to simulate a tabulator or line indent. I’m a typographer. I set type for a living and whenever I get text from others I have to get rid of the results of such bad practises. It’s 2015 now. We can do better than the typewriter—and we should. 

I was going to reply to this citing functionality being more important than aesthetics, but in making my argument, I realised that the editor is actually very good.

I didn't know about the shift+enter option, so having discovered that, and having edited the CKE .css to match what's on the front-end better, I'm very happy with everything.

I do think we could do with some more default plugins (tables, etc,) but that's my only issue now.

[BomAleold]

how shift+enter on mobile keyword? 

...testtesttesttest testtesttest testtestte strestest testtest testtest testtest test

...new line, testtestt esttestteztt esttesttest testte testtest testtestt esttest(is not linebreak but new paragraph... with mobile keyword how i could make a linebreak?)

...new paragraph..

[opentype]

how shift+enter on mobile keyword? 

​Yeah, mobile keyboards are lacking many things. :-(