Support » Plugin: Ultimate TinyMCE » HTML editor adds white-space which alters original HTML (semantically&visually)

  • Resolved bsy-web


    codemagic/js/beautify-html.js is putting “\n” after html tags which should not be broken up due to HTML white-space behavior.

    HTML Input:


    HTML Output:


    Browser output:
    super- duper -friendly
    *note the spaces before and after “duper”

    This is occurring for all white-space sensitive tags such as:


    I looked at the beautify.js online demo, HTML Tidy online demo, and FireBug add-on and none of those code formatting split <p> or the other tags listed above (they are all on one line).

    I submitted an issue to the GitHub maintainer for CodeMagic and he acknowledged it as a bug. Are you aware of this issue or is there a work around for it?

    I’ve searched for a long time, and no one who uses the plugin with this feature is reporting the issue. Great plug-in.

    A more involved test-case with output from the plug-in’s HTML editor (note how carriage returns will always add space when rendered by the browser):

        A test of nested paragraph tags...
        This is the nested content. And nest
        This is a
        -format test.
        This is
        . There should not be a space between the format and the ending punctuation.
        How about super
        ? Were any
        <a href="">extraneous</a>
        spaces added before and/or after the
        <a href="">superscript</a>
        ? Verify that the question marks in this paragraph also have no preceeding spaces.

Viewing 15 replies - 1 through 15 (of 18 total)
  • Plugin Author Marventus


    Hello bsy-web. Yes, we were aware of the issue. However, as you well pointed out, codemagic is still actively maintained, so until they don’t come up with a solution, there’s nothing we can do on our end.
    Between you and me, I don’t really understand their reply to you, and I find it odd they would even point in our direction when this is clearly a bug on their end.
    So, bottom-line, if they fix it on their end we will be happy to do so in ours.
    Thank you for letting us know anyway and don’t hesitate to stop by again and remind us if an update is released.

    Plugin Author Josh


    Moderator and Editor Customizer

    Hello bys-web.

    Thanks for doing some pretty detailed research there!! I really appreciate that!

    To be honest, I haven’t looked inside the CodeMagic code to see exactly what he is doing in there… but I’m certainly open to the possibility of trying to find this “bug” and working around it.

    I do remember a few other Ultimate Tinymce users reporting this behavior.. but I wasn’t able to take the time to isolate the cause. AND, since it resides in an addon I didn’t code myself… it might be a little tedious.

    However, after reading your comment… it does make me want to get in there and see if we can find a solution to this.

    Have you looked at any of the CodeMagic files individually?

    Hi Josh.

    I have been looking at the CodeMagic files, specifically beautify-html.js. It handles the tag parsing and indentation formatting logic.

    I uncommented an else block in the original code of that file which actually keeps inline tags on the same line. I think it was commented out to make the code indent more like standard programming source, but the programmer may have overlooked how white-space is interpreted by browsers for inline tags.

    beautify-html.js: lines 219-223: Uncomment the following:

    /*else if (tag_check === 'a') { // do not reformat the <a> links
            var comment = this.get_unformatted('</a>', tag_complete); //...delegate to get_unformatted function
            this.tag_type = 'SINGLE';

    Uncommenting the above will keep the a-tag on one line. The same code can be duplicated for all inline tags (e.g. em, strong, i, sup, sub, …), which is what I am doing for now.

    I will implement a fix so that any tag which is in an “inline” array, will remain on one line. Then anyone can add or remove elements from the array as required (e.g. as HTML specifications change).

    The next issue, once the above fix is implemented, is when a character is adjacent to an inline tag (pre or proceeding it). The parsing logic immediately puts it on a new line and a browser will render the newline as white-space.

    <p>This plug-in is <em>super</em>-<strong>helpful<strong>!</p>

    will show as

         This plug-in is

    which outputs as: This plug-in is superhelpful !

    I am about 75% through wrapping my mind around the tag parsing logic and intend to submit a fix by the end of the week which addresses the above issues. It’s starting to become a major drawback as our site grows to manually correct spacing in the visual editor after editing in the CodeMagic HTML editor.

    Again, just for my own sanity, how have others been dealing with the introduction of white-space when using the CodeMagic HTML editor?


    Hi Marventus.

    I interpreted their reply as acknowledging the issue is on there end.

    I think they were clarifying for me that updating CodeMagic does not necessarily mean Ultimate TinyMCE will integrate those changes (the latest version, for example, (supposedly [I have not gotten it to wokr for me]) includes text wrapping as a new option but the current version included in UTMCE does not include it.

    If y’all can come up with some more test cases, to ensure nothing has regressed, that would be awesome. Valid HTML, invalid HTML, nested cases, unclosed or unopened tag-pairs, etc. will help identify any other issues.


    Plugin Author Josh


    Moderator and Editor Customizer

    You Sir… are a Saint!!

    Again, just for my own sanity, how have others been dealing with the introduction of white-space when using the CodeMagic HTML editor?

    Honestly.. I think the exact same way you were. They would edit in the CodeMagic.. and then manually remove the added whitespace after updating the editor.

    Please feel free to use my personal contact form:

    And we can continue this via email, if you prefer.

    I’ll comment out the same area you suggested above.. and run it through a few tests of my own.

    Again… Thank you very much for your time with this!! I know quite a few people will be grateful if that “bug” gets squashed!

    Plugin Author Josh


    Moderator and Editor Customizer

    Hey… I’m ready to implement this… crashed my computer… and lost all my emails.

    So, I would love to connect with you again. If you happen to get this message, will you please contact me again via the contact link above.

    Thanks mate!!

    Plugin Author Josh


    Moderator and Editor Customizer


    Thank you VERY much for your involvement with this and with the git. I have tested your changes.. and it appears to be working much better with WP. I have not noticed any ‘regression’… so I think we are good.

    I have implemented your most recent changes to git. I don’t think the author has included these in the source yet… but I did implement your changes in “our” source.

    So, once again… thank you!!

    I am marking this thread as resolved… please feel free to change if you feel differently.

    The updated code will be available in version 4.6.


    I’m glad it’s working for you. I haven’t seen the pull request merged either.

    I only tested the code with UTMCE v4.0.8 as I’m dependent on WP 3.3.1 at moment, but am glad it is working in the latest version of your plug-in.

    There are some other CodeMagic enhancements in the pipeline contributed by others which I may try and merge in the next few months (local storage of settings, returning to same line after reformatting, line wrap, etc.)

    I’ll keep you posted if there is forward movement.


    Plugin Author Josh


    Moderator and Editor Customizer

    Yes, please do. And thank you again! Yes, it’s working in the latest version of my plugin (4.5) as well as the latest version of WP (3.5.1).

    Again… many many thanks!!

    Plugin Author Josh


    Moderator and Editor Customizer

    Hey, my friend.

    We apparently have another issue with the CodeMagic button.. and I’m wondering if it might be related to the super awesome changes you submitted to GitHub.

    Take a look at this thread here:

    Your thoughts on the issue would be greatly appreciated.


    Hi Josh,

    Thanks for bringing me in the loop. I never tested my changes against the latest version of CodeMagic of GitHub, only against the versino that was bundled with the UTMCE plugin I was running at the time. It’s possible the logic between the wrap-text feature (which I did not have) is colliding in some way.

    I browsed the thread you referenced. Last comment from Marventus has my attention: “We have determined there is an issue with the CodeMagic addon and the cursor position when the “Wrap Text” option is enabled (checked). We will definitely try to find a solution for this, but in the meantime, unchecking that option should get you going nicely.”

    I think wrap-text option was added by Yonus about 6 months ago (i.e. I didn’t implement it). I also recall submitting bug issue related to it not working. That said:
    – the version I developed on was the older version of CodeMagic without that option in place
    – did not touch any TinyMCE UI logic (only edited single .js file which addressed parsing logic)
    – only developed and tested on FireFox

    It’s a crunch week at moment, but early next week.
    – I’ll try and replicate what everyone is experiencing
    – test my changes on Chrome/Safari. Working on Mac and IE not easy option at moment.

    Haven’t experienced any issues with UTMCE v4.0.8 on WP 3.3.1 or v4.5 on WP 3.5 – but again on FireFox only.



    Did you check out the latest version of CodeMajic for inclusion in current version of UTMCE or just add the updated beautify-html.js file to version of CodeMagic you have been using so far?


    Plugin Author Josh


    Moderator and Editor Customizer

    Gosh, I really appreciate your responsiveness. No worries at all… I know it gets busy. Just knowing you know is good with me 🙂

    Ummm… If I recall correctly.. I think I implemented the whole codemagic again. But, I’ll take a double-look and verify. It’s late here, so it’ll be first thing in the morning when I check.

    Again.. Thank you. I’ll post back here with my results.

    You rock!!!

    Updated git-hub issue related to “Wrap Text” not functioning as expected:

    Simple work-around for having option as unchecked for default. Considering others have experienced it not working as well, makes sense to have it unchecked by default.

    To have the CM editor open with option unchecked by default, chance following line/code:
    /codemagic/js/codemajic.js, line 6: wraptext_active: true to wraptext_active: false

    I did a quick look to see if whole UI element could be greyed out, but it was not obvious to me.

Viewing 15 replies - 1 through 15 (of 18 total)
  • The topic ‘HTML editor adds white-space which alters original HTML (semantically&visually)’ is closed to new replies.