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

Description

System information

OS: Windows 10 Browser: Opera Trumbowyg Version: v2.18.0

Expected behavior

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

The following code is defined to achieve this goal:

$(document).ready(function(){
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': "{{ csrf_token() }}"
                }
            });

            $(document).on('click', '#save', function(){
                var htmlDoc = $('#editor').trumbowyg('html');
                $.ajax({
                    method: 'POST',
                    url: '/user/documents/{{$document->id}}/edit',
                    data: {
                        created_doc : htmlDoc,
                    },
                    success: function(response){ 
                        console.log(response);
                    },
                    error: function(jqXHR, textStatus, errorThrown){ 
                        console.log(JSON.stringify(jqXHR));
                        console.log("AJAX error: " + textStatus + + ' : ' + errorThrown);
                    }
                });
            });
        });

Error which occurs

When firing the event up the following error is shown in the console:

Uncaught TypeError: $(...).trumbowyg is not a function
    at HTMLAnchorElement.<anonymous> (edit:345)
    at HTMLDocument.dispatch (jquery.min.js:3)
    at HTMLDocument.q.handle (jquery.min.js:3)

How to reproduce?

Unfortunately it is not possible to provide a live-link to this project, but you should be able to represent the behavior with the provided code above.

[rwolfdev]

Solution was adding $.noConflict(); to the first line after the definition of the function inside document ready.

[rwolfdev]

I initialized the editor outside of the document ready function, cause inside of the function I am getting the error that trumbowyg is not a function.

An editor element is defined, cause it shows me trumbowyg, just the event do not work!

I´ve defined it in the way you explained above, here is my code-snippet (which does not work!!!)

 $(document).ready(function(){
            $('#editor').trumbowyg({
                lang: 'de',
                autogrow: true,
                changeActiveDropdownIcon: true,
                disabled: false,
                btns: [
                    ['template'],
                    ['formatting'],
                    ['fontfamily'],
                    ['fontsize'],
                    ['strong', 'em', 'del'],
                    ['table'],
                    ['superscript', 'subscript'],
                    ['base64'],
                    ['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull'],
                    ['unorderedList', 'orderedList'],
                    ['undo', 'redo'], // Only supported in Blink browsers
                    ['removeformat'],
                    ['viewHTML'],
                    ['fullscreen'],
                ],
                plugins: {
                    resizimg: {
                        minSize: 64,
                        step: 16,
                    },
                    table:{
                        rows: 10,
                        columns: 10
                    },
                    fontfamily: {
                        fontList: [
                            {name: 'Arial', family: 'Arial, Helvetica, sans-serif'},
                            {name: 'Open Sans', family: '\'Open Sans\', sans-serif'}
                        ]
                    },
                    templates: [
                            {
                                name: 'blabla',
                                html: 'test1'
                            },
                            {
                                name: 'Template 2',
                                html: 'Test2',
                            }
                    ]
                }
            });

            $('#editor').trumbowyg('html', '{!! $document->delivered_doc !!}');

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': "{{ csrf_token() }}"
                }
            });

            $(document).on('click', '#save', function(){
                var htmlDoc = $('#editor').trumbowyg('html');
                $.ajax({
                    method: 'POST',
                    url: '/user/documents/{{$document->id}}/edit',
                    data: {
                        created_doc : htmlDoc,
                    },
                    success: function(response){
                        console.log(response);
                    },
                    error: function(jqXHR, textStatus, errorThrown){ 
                        console.log(JSON.stringify(jqXHR));
                        console.log("AJAX error: " + textStatus + + ' : ' + errorThrown);
                    }
                });
            });
        });