Search code examples
javascriptjqueryhtmltinymcewysiwyg

TinyMCE generating random <g> tags?


After saving some page content in the TinyMCE WYSIWYG editor, I've found that the following HTML tag is peppered throughout the content:

<g class="gr_ gr_283 gr-alert gr_spell gr_run_anim gr_inline_cards ContextualSpelling ins-del multiReplace" id="283" data-gr-id="283"></g>

It will often wrap itself around words or sentences. It doesn't change the appearance of the content as the classes are not referenced in any stylesheets, however it has interfered with the occasional wildcards that are meant to be auto-replaced with content.

I couldn't find any answers online, however googling the class names has returned a number of results where similar tags are generated into the plain text of a page's content.

Anybody know why this occurs and if there is a way to prevent it?


Solution

  • I submitted this as a bug to the developers of Tinymce, they responded saying that the bug is caused with the Goolge Chrome extension Grammarly. After installing this extension I was able to replicate the bug and can confirm the problem is with Grammarly. Grammarly is injecting the elements around content that has incorrect spelling/grammar.

    I have implemented my own fix for this using a javascript replace function to remove the elements.

    function getWysiwygValue(id) {
        var value = tinyMCE.get(id).getContent();
        value = value.replace(/<\/?g[^>]*>/g, "");
        return value;
    }
    

    I have also contacted Grammarly to notify them of this bug, hopefully they will respond and fix the problem on their end.