CKeditor Line Breaks & Indent Issues

[ChompDigital]

After playing around with CKeditor I noticed the formatting in HTML source view is not right.

I reformatted the CKeditor to produce code the proper way if anyone is interested.
Download the provided ckeditor.js file and upload it to template/js/ckeditor to overwrite the existing ckeditor config file.

Example

From this:

Code:

<p>Mytext
                </p>

To this:

Code:

<p>My text</p>

[Connie]

please, before you offer modifications of the original script and seduce users to install it, check out about the possibilities of CKEDITOR

it is a configuration whether there are linebreaks in the generated code or not

"After playing around with CKeditor I noticed the formatting in HTML source view is not right."

where do you know from what is right and what is wrong????

see here:
http://help.pixelandtonic.com/brandonkel..._gsfn=true

an example might be:

Code:

CKEDITOR.on( 'instanceReady', function( ev ) {

var blockTags = ['div','h1','h2','h3','h4','h5','h6','p','pre','ul','li','table','td','tr','blockquote'];
var rules = {
indent : false,
breakBeforeOpen : true,
breakAfterOpen : false,
breakBeforeClose : false,
breakAfterClose : false
};

we even have an example in the WIKI:
http://get-simple.info/wiki/how_to:edito...ation_file

so, please do configure and not modify!!!!!!

[ChompDigital]

That helps, thank you!
Also I did not see anything about this in the wiki, I only saw the option to change P to BR. I'm curious though as to why this isn't defaulted in GS? The code formatting was driving my nuts lol.

please, before you offer modifications of the original script and seduce users to install it, check out about the possibilities of CKEDITOR

it is a configuration whether there are linebreaks in the generated code or not

"After playing around with CKeditor I noticed the formatting in HTML source view is not right."

where do you know from what is right and what is wrong????

see here:
http://help.pixelandtonic.com/brandonkel..._gsfn=true

an example might be:

Code:

CKEDITOR.on( 'instanceReady', function( ev ) {

var blockTags = ['div','h1','h2','h3','h4','h5','h6','p','pre','ul','li','table','td','tr','blockquote'];
var rules = {
indent : false,
breakBeforeOpen : true,
breakAfterOpen : false,
breakBeforeClose : false,
breakAfterClose : false
};

we even have an example in the WIKI:
http://get-simple.info/wiki/how_to:edito...ation_file

so, please do configure and not modify!!!!!!

[Connie]

Also I did not see anything about this in the wiki, I only saw the option to change P to BR. I'm curious though as to why this isn't defaulted in GS? The code formatting was driving my nuts lol.

well, please be aware that CKEDITOR is NOT GetSimple!

And which default configuration is the perfect one, who decides?

I think we offer as much information as necessary, because:

we describe in the WIKI how to define personal, special config-files incase you are not satisfied with "advanced" and "options" in the gsconfig.php

but to learn about the CKEDITOR you have to go to the CKEDITOR docs and find out what is possible before you condemn it ;=)

I aplogize for not delivering a 150%-documentation of the editor, I stick with the proverb: give the man a net and he can catch fish himself ;=)

Cheers, Connie

[ChompDigital]

Also I did not see anything about this in the wiki, I only saw the option to change P to BR. I'm curious though as to why this isn't defaulted in GS? The code formatting was driving my nuts lol.

well, please be aware that CKEDITOR is NOT GetSimple!

And which default configuration is the perfect one, who decides?

I think we offer as much information as necessary, because:

we describe in the WIKI how to define personal, special config-files incase you are not satisfied with "advanced" and "options" in the gsconfig.php

but to learn about the CKEDITOR you have to go to the CKEDITOR docs and find out what is possible before you condemn it ;=)

I aplogize for not delivering a 150%-documentation of the editor, I stick with the proverb: give the man a net and he can catch fish himself ;=)

Cheers, Connie

Thanks, I know that CKEDITOR isn't GS. I love the design of the editor and I've managed to add everything needed.

[shawn_a]

yeah I think we should add a better default option for this to core, that damn wrapping is idiotic.

I have never seen that syntax in my life, I don't know who came up with the idea that that was legible, i guess it is their excuse for not having real syntax highlighting or formatting. It does not help at all however.

It also likes removing empty lines and newlines for no apparent reason. Removed empty tags, and other annoyances.

I would like to see these all fixed and consider them a nuisance.

I also have a asset update discussion in issues to get it updated to a newer version,

[ChompDigital]

yeah I think we should add a better default option for this to core, that damn wrapping is idiotic.

I have never seen that syntax in my life, I don't know who came up with the idea that that was legible, i guess it is their excuse for not having real syntax highlighting or formatting. It does not help at all however.

It also likes removing empty lines and newlines for no apparent reason. Removed empty tags, and other annoyances.

I would like to see these all fixed and consider them a nuisance.

I also have a asset update discussion in issues to get it updated to a newer version,

Glad I wasn't the only one, lol.
I too think it should be addressed at least for those that are unaware or that don't have the ability to correct the issue themselves.

Awesome job on your plugin developments btw, I dropped in today to check out your work.
I've been a WP developer for too long and figured I'd dip into something different. Keep up the good work!

[Connie]

so, let's do like this:

I suggest to collect whishes for the editor-configuration in a special thread in "feature request"-forum and when we have collected a reasonable list, let us push the developers to create a new default configuration.

I will start that thread,

Cheers, Connie

[reticent]

The function for me looks like this:

Code:

CKEDITOR.on( 'dialogDefinition', function( ev )    {
        var dialogName = ev.data.name;
        var dialogDefinition = ev.data.definition;
        ev.data.definition.resizable = CKEDITOR.DIALOG_RESIZE_NONE;

        if ( dialogName == 'link' ) {
            var infoTab = dialogDefinition.getContents( 'info' );
            //dialogDefinition.removeContents( 'target' );
            var advTab = dialogDefinition.getContents( 'advanced' );
            advTab.remove( 'advLangDir' );
            advTab.remove( 'advLangCode' );
            advTab.remove( 'advContentType' );
            advTab.remove( 'advTitle' );
            advTab.remove( 'advCharset' );
        }

        if ( dialogName == 'image' ) {
            var infoTab = dialogDefinition.getContents( 'info' );
            infoTab.remove( 'txtBorder' );
            infoTab.remove( 'txtHSpace' );
            infoTab.remove( 'txtVSpace' );
            infoTab.remove( 'btnResetSize' );
            dialogDefinition.removeContents( 'Link' );
            var advTab = dialogDefinition.getContents( 'advanced' );
            advTab.remove( 'cmbLangDir' );
            advTab.remove( 'txtLangCode' );
            advTab.remove( 'txtGenLongDescr' );
            advTab.remove( 'txtGenTitle' );
        }
});

How do I have the same function encompass the extra code as previously quoted?

[Connie]

How do I have the same function encompass the extra code as previously quoted?

sorry, what is "encompass"? I do not know that word.

you show us a code excerpt which defines the dialogue-functionality.

What was discussed here is the formatting of the HTML-output, quite a different topic.


There is an example in the wiki:
http://get-simple.info/wiki/how_to:editor_configuration_custom_files

and this example file has this part:

PHP Code:

// from  http://help.pixelandtonic.com/brandonkelly/topics/how_do_i_set_output_formatting_writer_rules?from_gsfn=true 
CKEDITOR.on( 'instanceReady', function( ev ) {

var blockTags = ['div','h1','h2','h3','h4','h5','h6','p','pre','ul','li'];
var rules = {
indent : false,
breakBeforeOpen : false,
breakAfterOpen : false,
breakBeforeClose : false,
breakAfterClose : true
};

for (var i=0; i<blockTags.length; i++) {
ev.editor.dataProcessor.writer.setRules( blockTags[i], rules );
}

}); 


and it is exactly described how to use and configure a custom configuration file for the editor

so I think you can start with that. If you have problems, ask!

[reticent]

How do I have the same function encompass the extra code as previously quoted?

sorry, what is "encompass"? I do not know that word.

you show us a code excerpt which defines the dialogue-functionality.

What was discussed here is the formatting of the HTML-output, quite a different topic.


There is an example in the wiki:
http://get-simple.info/wiki/how_to:editor_configuration_custom_files

and this example file has this part:

PHP Code:

// from  http://help.pixelandtonic.com/brandonkelly/topics/how_do_i_set_output_formatting_writer_rules?from_gsfn=true 
CKEDITOR.on( 'instanceReady', function( ev ) {

var blockTags = ['div','h1','h2','h3','h4','h5','h6','p','pre','ul','li'];
var rules = {
indent : false,
breakBeforeOpen : false,
breakAfterOpen : false,
breakBeforeClose : false,
breakAfterClose : true
};

for (var i=0; i<blockTags.length; i++) {
ev.editor.dataProcessor.writer.setRules( blockTags[i], rules );
}

}); 


and it is exactly described how to use and configure a custom configuration file for the editor

so I think you can start with that. If you have problems, ask!

The code suggested has the same function name as already existing code...

[Connie]

The code suggested has the same function name as already existing code...

why not? CKEditor uses THAT function to generate the HTML from the textareas

so you have to define what you want to define in this function.

[reticent]

The code suggested has the same function name as already existing code...

why not? CKEditor uses THAT function to generate the HTML from the textareas

so you have to define what you want to define in this function.

My understanding of the function would be to determine behavior around user actions such as opening the editor, closing etc unless my reading of it is totally wrong in which case the issue is then, why automatically generate anything at all when arguably it should be "opt in" and not the other way round.

[shawn_a]

Surely there is another way to set these options in config.

[shawn_a]

I propose adding this to 3.2.2 config.js

PHP Code:

CKEDITOR.on( 'instanceReady', function( ev ) {
    var blockTags = ['div','h1','h2','h3','h4','h5','h6','p','pre','li','blockquote','ul','ol','table','thead','tbody','tfoot','td','th',];
    var rules = {
        indent : true,
        breakBeforeOpen : true,
        breakAfterOpen : false,
        breakBeforeClose : false,
        breakAfterClose : true
    };

    for (var i=0; i<blockTags.length; i++) {
        ev.editor.dataProcessor.writer.setRules( blockTags[i], rules );
    }
}); 


[influxweb]

@Shawn - Sounds like a good idea to me.

[yojoe]

I propose adding this to 3.2.2 config.js

This one may prevent from tearing own hair out:

PHP Code:

config.allowedContent = true; 


especially for a bit advanced users

[Connie]

I propose adding this to 3.2.2 config.js
...

as I said and suggested ;=)

[shawn_a]

I mean actual proposal for 3.2.2, thats not the same code just re-pasted, thats the actual code I am adding.

And I bothered testing so it doesn't conflict with existing on ready functions we already have in edit.php and added all the missing block elements.

Does allowed content work in ck3?

[yojoe]

Does allowed content work in ck3?

Noez, ACF appeared in v4.1, and I have mixed feelings.
From one hand it's a nice solution for all copy<->pasters, as it cleans the code, but without exceptions, adding f.e. classes to elements won't be possible.

btw. afair there was a discussion about using entities in .xml files now a days, when UTF8 seems to became a wide standard. Having this on mind, CKE would also have to get entities disabled.

[shawn_a]

Well, this is about ck3, soooo, its irrelevant.

I read something about ckeditor entities, do you have more information ?

[yojoe]

hmm...I thought 3.2.2 is going to get CKE 4, as I haven't found problems in GS version you have prepared.

As it goes to entities, below parameters disable conversion among the others of extended latin.

PHP Code:

    //disable entities
config.htmlEncodeOutput = false; 
config.entities = false; 


I have tested only with polish and german special chars. Didn't lay my hands on .xml files containing cyrilic or oriental alphabets. I'll try to make a small tests with some chineese like texts to be sure.

[shawn_a]

No it is not.

So explain what this does, and what problem it fixes, or is it a move towards more standardized data, we use cdata in xml now, so stripslashes is no longer required either. Does this mean we would have to do some encoding on output that we might not be already? Or perhaps decoding we are already doing might have to be removed ?

[millroly]

In the UK we use the word 'numbwit' to describe someone who cannot see the obvious - I sometimes feel that's me!

I have installed the latest version of GS and 'heyho' when it comes to editing a page I am fighting with the paragraph break and adding colour to text - (editor set to advanced). I am now getting spurious code when I check the source code. Also, the color block is moving to the left and refuses to colour any text. I've used a 'virgin' install extracted from GS 3.2.1 zip with the only alteration being the one line to the gsconfig.php defining it as advanced.

The spurious code is:

<span id="cke_bm_44S" style="display: none;">&nbsp;</span><span style="display: none;">&nbsp;</span><span id="cke_bm_44S" style="display: none;">&nbsp;</span><span style="display: none;">&nbsp;</span>Lorem ipsum dolor sit amet, consectetuer<span style="display: none;">&nbsp;</span><span id="cke_bm_44E" style="display: none;">&nbsp;</span> adipiscing elit.<span style="display: none;">&nbsp;</span><span id="cke_bm_44E" style="display: none;">&nbsp;</span>

Would this be one of the problems expressed by other contributors here?

Roly

[yojoe]

No it is not.

So explain what this does, and what problem it fixes, or is it a move towards more standardized data, we use cdata in xml now, so stripslashes is no longer required either. Does this mean we would have to do some encoding on output that we might not be already? Or perhaps decoding we are already doing might have to be removed ?

There's no crushing argument for that.
Some advanced users propounded to store special chars without encoding into entities. Mostly for SEO purposes. But yeah, there were problems with stripslashes afair until GS3.0.
If anyone wants to get some xml data from page files, decoding entities is of course a must, as chars like "< in html tags are encoded anyway (I'm not sure if it's a GS or simplexml lib manner). Thus I assume that language specific chars are also processed with or without converting them by CKE.

I can say that I did not focus on what is being saved in .xml files for long time, as I'm adding some options to CKE's config right after installing GS. It's about CKE 4.1 that got a huge update, and I had to look a bit deeper into it to get rid of some of its irritating behaviours at last. Those which should be default, like line breaks you pointed earlier. But tbh. if one wants to get a beatifuly formatted code, one condition is not enough, and final result depends on many factors, on which most people don't give a single buck.
I think I'm somewhat a html purist.