Getting html from editor does not work | trumbowyg is not a function

[TCAby]

Really I read closed issue #995 but my case doesn't be solved by given advices.

Description

System information (is it necessary):

• OS Windows 10 64
• Google Chrome 64bit 108.0.5359.125
• 5.6" 1920 x 1080
• WordPress 6.1

Expected behavior

I want to get html from editor and POST the result with an AJAX request if onClick event occurs.

$ = jQuery.noConflict();
//trumbowyg
$.trumbowyg.svgPath = trumbowyg_svg;
$('#request_body').trumbowyg({
    lang: 'he',
    changeActiveDropdownIcon: true,
    tagsToRemove: ['script', 'embed', 'iframe', 'input'],
    urlProtocol: true,
    btnsDef: {
        mention: {
            title: 'Shortcodes',
            title: 'Select & Insert shortcode from the list that will be replaced',
            ico: 'insert-shortcode',
            hasIcon: true
        },
    },
    btns: [
        ['undo', 'redo'], // Only supported in Blink browsers
        ['formatting'],
        ['strong', 'em', 'del'],
        ['superscript', 'subscript'],
        ['link'],
        ['insertImage'],
        ['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull'],
        ['unorderedList', 'orderedList'],
        ['horizontalRule'],
        ['mention'],
    ],
    plugins: {
        mention: {
            source: [
                {code: 'reviewer_name', name: 'Reviewer name'},
                {code: 'project_name', name: 'Name of the Project'},
                {code: 'originator_name', name: 'Name of the Originator'},
                {code: 'reviewform_url', name: 'URL of Review Form'},
            ],
            formatDropdownItem: function (item) {
                return item.name
            },
            formatResult: function (item) {
                return ' [[' + item.code + ']] '
            }
        }
    }
})

$('#request_body').trumbowyg('html', body_feedback_request)
//end of trumbowyg

then on onclick event I want to read the value in the editor - and I'm getting an error "Uncaught TypeError: $(...).trumbowyg is not a function":

$('#btnSubmitDesigner').on('click', function(e) {
    //getEditorValue('#request_body')
    let feedback_request_title = $('#feedback_request_title').val()
    let request_body = $('#request_body').trumbowyg('html')

})

My attempts to solve it:

Both of my ideas based on that initial part $('#request_body').trumbowyg('html', body_feedback_request) is Ok.

1) tried to call function (//getEditorValue('#request_body')) instead of direct call inside the event 2) tried to use inline function like

3) After I read case995, I tried move initialithation inside the $(document).ready(function(){ }) - nothing. More than: errors started fro the first line of 'trumbowyg' block: $.trumbowyg.svgPath = trumbowyg_svg; - error. Move ot outside the $(document).ready(function(){ - next error on $('#request_body').trumbowyg({ ... and so on.

But when I tried read value like console.log($('#request_body').trumbowyg('html')) directly after $('#request_body').trumbowyg('html', body_feedback_request) all is OK!

Errors which occurs

Uncaught TypeError: $(...).trumbowyg is not a function at HTMLButtonElement. (tca-pcab-superadmin-cabinet-editdesigner.js:889:43) at HTMLButtonElement.dispatch (jquery.min.js?ver=3.6.1:2:43064) at y.handle (jquery.min.js?ver=3.6.1:2:41048)

[TCAby]

Okay, I got out of it, I found a workaround through a direct property request: let request_body = $('#request_body')[0].innerHTML

But I'd still like to solve this problem properly, through library methods.

[Alex-D]

To be honest, I did not understand the bug ; and I the mentioned error is due to not having Trumbowyg loaded at all, so I cannot really help :/

[TCAby]

stop-stop, @Alex-D ! Trumbowyg loaded! Loaded, working, uses its top-panel (and I added some custom buttons there also)! But I can't get values from it. How can I show you details? By Zoom (sharing the screen) for example..