Wednesday, 9 December 2020

jquery.min.js:2 Uncaught TypeError: Cannot read property 'replace' of undefined (javascript)(laravel)

I'm trying to import a drag and drop editor using this library

But I get these errors

    jquery.min.js:2 Uncaught TypeError: Cannot read property 'replace' of undefined
    at initModalSource (examples.js:96)
    at HTMLDocument.<anonymous> (examples.js:3)
    at e (jquery.min.js:2)
    at t (jquery.min.js:2)
    initModalSource @ examples.js:96 
    (anonymous) @ examples.js:3 
    e @ jquery.min.js:2 
    t @ jquery.min.js:2 
    setTimeout (async) 
    S.readyException @ jquery.min.js:2 
    (anonymous) @ jquery.min.js:2 
    e @ jquery.min.js:2 
    t @ jquery.min.js:2 
    setTimeout (async) 
    (anonymous) @ jquery.min.js:2 
    c @ jquery.min.js:2 
    fireWith @ jquery.min.js:2 
    fire @ jquery.min.js:2 
    c @ jquery.min.js:2 
    fireWith @ jquery.min.js:2 
    t @ jquery.min.js:2 
    setTimeout (async) 
    (anonymous) @ jquery.min.js:2 
    c @ jquery.min.js:2 
    fireWith @ jquery.min.js:2 
    fire @ jquery.min.js:2 
    c @ jquery.min.js:2 
    fireWith @ jquery.min.js:2 
    ready @ jquery.min.js:2 
    B @ jquery.min.js:2

this is the code of examples.js

(function ($) {
    $(function () {
        initModalSource();
        initModalContent();
        initToolbar();
    });

    function initToolbar() {
        var toolbar = $('<div class="toolbar"></div>');
        var btnViewSource = $('<button type="button" class="view-source"><i class="fa fa-code"></i> View source</button>');
        var btnViewContent = $('<button type="button" class="view-content"><i class="fa fa-file-text-o"></i> Get content</button>');
        var btnBackToList = $('<a href="./" class="view-content"><i class="fa fa-list"></i> Examples list</a>');

        toolbar.appendTo(document.body);
        toolbar.append(btnViewSource);
        toolbar.append(btnViewContent);
        toolbar.append(btnBackToList);

        btnViewSource.on('click', function () {
            $('#modal-source').modal('show');
        });

        btnViewContent.on('click', function () {
            var modal = $('#modal-content');
            modal.find('.content-html').html(
                beautifyHtml(
                    $('#content-area').keditor('getContent')
                )
            );

            modal.modal('show');
        });
    }

    function initModalContent() {
        var modal = $(
            '<div id="modal-content" class="modal fade" tabindex="-1">' +
            '    <div class="modal-dialog modal-lg">' +
            '        <div class="modal-content">' +
            '            <div class="modal-header">' +
            '                <button type="button" class="close" data-dismiss="modal">&times;</button>' +
            '                <h4 class="modal-title">Content</h4>' +
            '            </div>' +
            '            <div class="modal-body">' +
            '                <pre class="prettyprint lang-html content-html"></pre>' +
            '            </div>' +
            '            <div class="modal-footer">' +
            '                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>' +
            '            </div>' +
            '        </div>' +
            '    </div>' +
            '</div>'
        );

        modal.appendTo(document.body);
    }

    function initModalSource() {
        var modal = $(
            '<div id="modal-source" class="modal fade" tabindex="-1">' +
            '    <div class="modal-dialog modal-lg">' +
            '        <div class="modal-content">' +
            '            <div class="modal-header">' +
            '                <button type="button" class="close" data-dismiss="modal">&times;</button>' +
            '                <h4 class="modal-title">Source</h4>' +
            '            </div>' +
            '            <div class="modal-body">' +
            '                <ul class="nav nav-tabs">' +
            '                    <li class="active"><a href="#source-html" data-toggle="tab"><i class="fa fa-html5"></i> HTML</a></li>' +
            '                    <li ><a href="#source-js" data-toggle="tab"><i class="fa fa-code"></i> JavaScript</a></li>' +
            '                </ul>' +
            '                <div class="tab-content">' +
            '                    <div class="tab-pane active" id="source-html">' +
            '                        <pre class="prettyprint lang-html source-html"></pre>' +
            '                    </div>' +
            '                    <div class="tab-pane" id="source-js">' +
            '                        <pre class="prettyprint lang-js source-js"></pre>' +
            '                    </div>' +
            '                </div>' +
            '            </div>' +
            '            <div class="modal-footer">' +
            '                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>' +
            '            </div>' +
            '        </div>' +
            '    </div>' +
            '</div>'
        );

        var htmlCode = $('[data-keditor="html"]').html();
        var htmlInclude = $('<div />').html($('[data-keditor="html-include"]').clone()).html();
        htmlInclude = htmlInclude.replace('data-keditor="html-include"', '');
        htmlInclude = htmlInclude.replace(/\</g, '&lt;').replace(/\>/g, '&gt;');
        modal.find('.source-html').html(beautifyHtml(htmlCode + htmlInclude));

        var jsCode = $('[data-keditor="script"]').html();
        jsCode =  jsCode.replace(/\</g, '&lt;').replace(/\>/g, '&gt;');
        modal.find('.source-js').html(beautifyJs(jsCode));

        modal.appendTo(document.body);
    }

    function beautifyHtml(htmlCode) {
        htmlCode = html_beautify(htmlCode, {
            'indent_size': '4',
            'indent_char': ' ',
            'space_after_anon_function': true,
            'end_with_newline': true
        });
        htmlCode = htmlCode.replace(/</g, '&lt;').replace(/>/g, '&gt;');

        return PR.prettyPrintOne(htmlCode, 'lang-html');
    }

    function beautifyJs(jsCode) {
        jsCode = js_beautify(jsCode, {
            'indent_size': '4',
            'indent_char': ' ',
            'space_after_anon_function': true,
            'end_with_newline': true
        });

        return PR.prettyPrintOne(jsCode, 'lang-js');
    }

})(jQuery);

On my view, I just have this

    <div id="content-area"></div>

    <script>
        $(function () {
            $('#content-area').keditor();
        });
    </script>

I'm using

css:

  • font-awesome
  • editor
  • keditor-components
  • prettify
  • keditor-examples

javascript:

  • jquery min 3.5.1
  • jquery UI 1.12.1
  • ckeditor
  • formBuilder 2.5.3 min
  • fromRender 2.5.3 min
  • keditor
  • keditor-components
  • prettify
  • beautify
  • beauutify-html
  • examples

This is the final result enter image description here

The problem is that the button "+" is missing

enter image description here

This is a functional example

How can I solve this? Thanks :)



from jquery.min.js:2 Uncaught TypeError: Cannot read property 'replace' of undefined (javascript)(laravel)

No comments:

Post a Comment