Question

I’m using TinyMCE to allow my users to create their own web pages. My goal is to have what people type into the editor look exactly like the page it publishes. I’ve almost got it, except Tinymce adds a   if a user puts two spaces in between their sentences. Obviously, in the editor, it collapses that   if it’s at the beginning of a line so that every line is all the way against the left side of the editor. In the finished page though, this creates situations where there’s a space at the beginning of a line in a ‘p’ tag. I could just strip out the  , but then it would look differently in the editor than the final page.

Does anyone know of a way to collapse a   at the beginning of lines in a P tag? Or is there a way to format this differently in TinyMCE so that the editor and the final page would look the exact same? Thanks!

Answer 1

As Diodeus stated already you cannot collapse a single character and you will have to strip it out if you want to get rid of it.
Many browsers will ‘compress’ more than one entered space in a row to one single space. This means there will be one visible space only even if the user entered 15 spaces. That’s the reason why tinymce enters a protected space. Now, all spaces entered will be shown for the price of a different kind of space.

Update: Example code to insert a span and check for its position. The values summing up to “left” will be of interest for you

        var ed = this.editor, box = null;


        if ( $(ed.getBody()).find('p:first').css('line-height') != 'normal'){
            lineHeight = $(ed.getBody()).find('p:first').css('line-height') ;
        }
        else {
            lineHeight = $(ed.getBody()).find('p:first').css('min-height');
        }

        var lineHeight = lineHeight.substr(0, lineHeight.length -2 );//box.height;

        var rng = ed.selection.getRng();
        rng.collapse(true);

        bm = ed.selection.getBookmark();
        $marker = $(ed.getBody()).find('#'+bm.id);
        var elem = ed.getDoc().getElementById(bm.id+'_start');
        box = elem.getBoundingClientRect();


        var doc = ed.getDoc(),
            docElem = doc.documentElement,
            body = ed.getBody(),
            win = ed.getWin(),
            clientTop  = docElem.clientTop  || body.clientTop  || 0,
            clientLeft = docElem.clientLeft || body.clientLeft || 0,
            scrollTop  = win.pageYOffset || jQuery.support.boxModel && docElem.scrollTop  || body.scrollTop,
            scrollLeft = win.pageXOffset || jQuery.support.boxModel && docElem.scrollLeft || body.scrollLeft,
            top  = box.top  + scrollTop  - clientTop,
            left = box.left + scrollLeft - clientLeft;

        // set Bookmark
        ed.selection.moveToBookmark(bm);