How to indent the first line of a paragraph in CKE

Question

I'm using CKEditor and I want to indent just the first line of the paragraph. What I've done before is click "Source" and edit the <p> style to include text-indent:12.7mm;, but when I click "Source" again to go back to the normal editor, my changes are gone and I have no idea why.

My preference would be to create a custom toolbar button, but I'm not sure how to do so or where to edit so that clicking a custom button would edit the <p> with the style attribute I want it to have.

Answer 1

Depending on which version of CKE you use, your changes most likely disappear because ether the style attribute or the text-indent style is not allowed in the content. This is due to the Allowed Content Filter feature of CKEditor, read more here: http://docs.ckeditor.com/#!/guide/dev_advanced_content_filter

Like Ervald said in the comments, you can also use CSS to do this without adding the code manually - however, your targeting options are limited. Either you have to target all paragraphs or add an id or class property to your paragraph(s) and target that. Or if you use a selector like :first-child you are restricted to always having the first element indented only (which might be what you want, I don't know :D).

To use CSS like that, you have to add the relevant code to contents.css, which is the CSS file used in the Editor contents and also you have to include it wherever you output the Editor contents.

---

In my opinion the best solution would indeed be making a plugin that places an icon on the toolbar and that button, when clicked, would add or remove a class like "indentMePlease" to the currently active paragraph. Developing said plugin is quite simple and well documented, see the excellent example at http://docs.ckeditor.com/#!/guide/plugin_sdk_sample_1 - if you need more info or have questions about that, ask in the comments :)

If you do do that, you again need to add the "indentMePlease" style implementation in contents.css and the output page.

Answer 2

I've got a way to indent the first line without using style, because I'm using iReport to generate automatic reports. Jasper does not understand styles. So I assign by jQuery an onkeydown method to the main iframe of CKEditor 4.6 and I check the TAB and Shift key to do and undo the first line indentation.

// TAB
    $(document).ready(function(){
        startTab();
    });

    function startTab() {
        setTimeout(function(){
            var $iframe_document;
            var $iframe;
            $iframe_document = $('.cke_wysiwyg_frame').contents();
            $iframe = $iframe_document.find('body');

            $iframe.keydown(function(e){
                event_onkeydown(e);
            });

        },300); 
    }

    function event_onkeydown(event){
        if(event.keyCode===9) { // key tab
            event.preventDefault();
            setTimeout(function(){
                var editor = CKEDITOR.instances['editor1'], //get your CKEDITOR instance here
                    range = editor.getSelection().getRanges()[0],
                    startNode = range.startContainer,
                    element = startNode.$,
                    parent;

                if(element.parentNode.tagName != 'BODY') // If you take an inner element of the paragraph, get the parentNode (P)
                    parent = element.parentNode;
                else // If it takes BODY as parentNode, it updates the inner element
                    parent = element;

                if(event.shiftKey) { // reverse tab
                    var res = parent.innerHTML.toString().split(' ');
                    var aux = [];
                    var count_space = 0;

                    for(var i=0;i<res.length;i++) {
                        // console.log(res[i]);
                        if(res[i] == "")
                            count_space++;
                        if(count_space > 8 || res[i] != "") {
                            if(!count_space > 8)
                                count_space = 9;
                            aux.push(res[i]);
                        }
                    }
                    parent.innerHTML = aux.join('&nbsp;');
                }
                else { // tab
                    var spaces = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
                    parent.innerHTML = spaces + parent.innerHTML;
                }
            },200);
        }
    }