viewHTML shows a blank editor

[neutronron]

Description

The editor appears to have loaded fine. All configured buttons/features appear work, except for the viewHTML button. When that is clicked, the other buttons grey out and the editor goes blank instead of displaying the HTML. Clicking it again re-enables the other buttons and the WYSIWYG view appears again (with the content showing). Have you seen this problem before?

Also, I don't see any errors in the browser console when I reproduce this issue.

Provide relevant details according to the context:

• OS: OSX
• Browser + version: Chrome 96.0.4664.55, Firefox 94.0.1 , Safari 14.1.2
• Screen resolution
• JQuery 3.6.0
• Using jQuery.noConflict()

How to reproduce?

Couldn't reproduce on fiddle so I've attached a Loom recording link.

https://www.loom.com/share/6c3fd166465f4fe297bd0040ce9352a0

Code snippet (Visualforce/Salesforce):

<apex:component >
    <apex:attribute name="value" description="The text to load into the editor" type="String" required="true"/>
    <apex:attribute name="width" description="width of the editor" type="String" required="false" default="100%"/>
    <apex:attribute name="height" description="height of the editor" type="String" required="false" default="200"/>
    <link rel="stylesheet" href="{!$Resource.evt__EventManagement}/Trumbowyg-main/dist/ui/trumbowyg.min.css"/>    
    <link rel="stylesheet" href="{!$Resource.evt__EventManagement}/Trumbowyg-main/dist/plugins/table/ui/trumbowyg.table.min.css"/>    

    <apex:inputTextArea styleClass="trumbowyg-editor" id="trumbowyg-editor" style="width:100%;height:{!height}px" value="{!value}"/>

    <script src="{!URLFOR($Resource.evt__JQuery, '/JQuery/jquery-3.6.0.min.js')}"></script>
    <script> $j = jQuery.noConflict();</script>
    <script type="text/javascript" src="{!$Resource.evt__EventManagement}/Trumbowyg-main/dist/trumbowyg.min.js"></script>
    <script type="text/javascript" src="{!$Resource.evt__EventManagement}/Trumbowyg-main/dist/plugins/indent/trumbowyg.indent.min.js"></script>
    <script type="text/javascript" src="{!$Resource.evt__EventManagement}/Trumbowyg-main/dist/plugins/colors/trumbowyg.colors.min.js"></script>
    <script type="text/javascript" src="{!$Resource.evt__EventManagement}/Trumbowyg-main/dist/plugins/fontsize/trumbowyg.fontsize.min.js"></script>
    <script type="text/javascript" src="{!$Resource.evt__EventManagement}/Trumbowyg-main/dist/plugins/table/trumbowyg.table.min.js"></script>
    <script type="text/javascript" src="{!$Resource.evt__EventManagement}/Trumbowyg-main/dist/plugins/preformatted/trumbowyg.preformatted.min.js"></script>
    <script type="text/javascript">
        $j('.trumbowyg-editor').trumbowyg( {
            btns: [
                ['undo','redo'],
                ['viewHTML'],
                ['strong','em','fontsize','foreColor','backColor'],
                ['formatting','table'],
                ['justifyLeft','justifyCenter','justifyRight','indent','outdent'],
                ['unorderedList','orderedList'],
                ['horizontalRule'],                
                ['insertImage','link'],
                ['removeformat'],
                ['fullscreen']
            ],
            tagsToRemove: ['script']

        });

    </script>
</apex:component>

[rzlnhd]

change your styleClass="trumbowyg-editor" to styleClass="trumbowyg-textarea". Also change the JS DOM selection from $j('.trumbowyg-editor') to $j('#trumbowyg-editor').

This happen to me too... And it fixed by changing the classid, hope it works on your issue too...

[Alex-D]

Please, do not use any trumbowyg-* classes, since they are used internally by Trumbowyg itself.

I think you can remove the styleClass attribute, and base your selector on the input ID as @rzlnhd said :).