title: jquery.min.js:2 Uncaught TypeError: Cannot read property 'replace' of undefined (javascript)(laravel)
body: <p>I'm trying to import a drag and drop editor <a href="https://github.com/Kademi/keditor/" rel="nofollow noreferrer">using this library</a></p>
  <p>But I get these errors</p>
  <pre><code>    jquery.min.js:2 Uncaught TypeError: Cannot read property 'replace' of undefined
      at initModalSource (examples.js:96)
      at HTMLDocument.&lt;anonymous&gt; (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
  </code></pre>
  <p>this is the code of examples.js</p>
  <pre><code>(function ($) {
      $(function () {
          initModalSource();
          initModalContent();
          initToolbar();
      });
  
      function initToolbar() {
          var toolbar = $('&lt;div class=&quot;toolbar&quot;&gt;&lt;/div&gt;');
          var btnViewSource = $('&lt;button type=&quot;button&quot; class=&quot;view-source&quot;&gt;&lt;i class=&quot;fa fa-code&quot;&gt;&lt;/i&gt; View source&lt;/button&gt;');
          var btnViewContent = $('&lt;button type=&quot;button&quot; class=&quot;view-content&quot;&gt;&lt;i class=&quot;fa fa-file-text-o&quot;&gt;&lt;/i&gt; Get content&lt;/button&gt;');
          var btnBackToList = $('&lt;a href=&quot;./&quot; class=&quot;view-content&quot;&gt;&lt;i class=&quot;fa fa-list&quot;&gt;&lt;/i&gt; Examples list&lt;/a&gt;');
  
          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 = $(
              '&lt;div id=&quot;modal-content&quot; class=&quot;modal fade&quot; tabindex=&quot;-1&quot;&gt;' +
              '    &lt;div class=&quot;modal-dialog modal-lg&quot;&gt;' +
              '        &lt;div class=&quot;modal-content&quot;&gt;' +
              '            &lt;div class=&quot;modal-header&quot;&gt;' +
              '                &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot;&gt;&amp;times;&lt;/button&gt;' +
              '                &lt;h4 class=&quot;modal-title&quot;&gt;Content&lt;/h4&gt;' +
              '            &lt;/div&gt;' +
              '            &lt;div class=&quot;modal-body&quot;&gt;' +
              '                &lt;pre class=&quot;prettyprint lang-html content-html&quot;&gt;&lt;/pre&gt;' +
              '            &lt;/div&gt;' +
              '            &lt;div class=&quot;modal-footer&quot;&gt;' +
              '                &lt;button type=&quot;button&quot; class=&quot;btn btn-default&quot; data-dismiss=&quot;modal&quot;&gt;Close&lt;/button&gt;' +
              '            &lt;/div&gt;' +
              '        &lt;/div&gt;' +
              '    &lt;/div&gt;' +
              '&lt;/div&gt;'
          );
  
          modal.appendTo(document.body);
      }
  
      function initModalSource() {
          var modal = $(
              '&lt;div id=&quot;modal-source&quot; class=&quot;modal fade&quot; tabindex=&quot;-1&quot;&gt;' +
              '    &lt;div class=&quot;modal-dialog modal-lg&quot;&gt;' +
              '        &lt;div class=&quot;modal-content&quot;&gt;' +
              '            &lt;div class=&quot;modal-header&quot;&gt;' +
              '                &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot;&gt;&amp;times;&lt;/button&gt;' +
              '                &lt;h4 class=&quot;modal-title&quot;&gt;Source&lt;/h4&gt;' +
              '            &lt;/div&gt;' +
              '            &lt;div class=&quot;modal-body&quot;&gt;' +
              '                &lt;ul class=&quot;nav nav-tabs&quot;&gt;' +
              '                    &lt;li class=&quot;active&quot;&gt;&lt;a href=&quot;#source-html&quot; data-toggle=&quot;tab&quot;&gt;&lt;i class=&quot;fa fa-html5&quot;&gt;&lt;/i&gt; HTML&lt;/a&gt;&lt;/li&gt;' +
              '                    &lt;li &gt;&lt;a href=&quot;#source-js&quot; data-toggle=&quot;tab&quot;&gt;&lt;i class=&quot;fa fa-code&quot;&gt;&lt;/i&gt; JavaScript&lt;/a&gt;&lt;/li&gt;' +
              '                &lt;/ul&gt;' +
              '                &lt;div class=&quot;tab-content&quot;&gt;' +
              '                    &lt;div class=&quot;tab-pane active&quot; id=&quot;source-html&quot;&gt;' +
              '                        &lt;pre class=&quot;prettyprint lang-html source-html&quot;&gt;&lt;/pre&gt;' +
              '                    &lt;/div&gt;' +
              '                    &lt;div class=&quot;tab-pane&quot; id=&quot;source-js&quot;&gt;' +
              '                        &lt;pre class=&quot;prettyprint lang-js source-js&quot;&gt;&lt;/pre&gt;' +
              '                    &lt;/div&gt;' +
              '                &lt;/div&gt;' +
              '            &lt;/div&gt;' +
              '            &lt;div class=&quot;modal-footer&quot;&gt;' +
              '                &lt;button type=&quot;button&quot; class=&quot;btn btn-default&quot; data-dismiss=&quot;modal&quot;&gt;Close&lt;/button&gt;' +
              '            &lt;/div&gt;' +
              '        &lt;/div&gt;' +
              '    &lt;/div&gt;' +
              '&lt;/div&gt;'
          );
  
          var htmlCode = $('[data-keditor=&quot;html&quot;]').html();
          var htmlInclude = $('&lt;div /&gt;').html($('[data-keditor=&quot;html-include&quot;]').clone()).html();
          htmlInclude = htmlInclude.replace('data-keditor=&quot;html-include&quot;', '');
          htmlInclude = htmlInclude.replace(/\&lt;/g, '&amp;lt;').replace(/\&gt;/g, '&amp;gt;');
          modal.find('.source-html').html(beautifyHtml(htmlCode + htmlInclude));
  
          var jsCode = $('[data-keditor=&quot;script&quot;]').html();
          jsCode =  jsCode.replace(/\&lt;/g, '&amp;lt;').replace(/\&gt;/g, '&amp;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(/&lt;/g, '&amp;lt;').replace(/&gt;/g, '&amp;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);
  </code></pre>
  <p>On my view, I just have this</p>
  <pre><code>    &lt;div id=&quot;content-area&quot;&gt;&lt;/div&gt;
  
      &lt;script&gt;
          $(function () {
              $('#content-area').keditor();
          });
      &lt;/script&gt;
  </code></pre>
  <p>I'm using</p>
  <p>css:</p>
  <ul>
  <li>font-awesome</li>
  <li>editor</li>
  <li>keditor-components</li>
  <li>prettify</li>
  <li>keditor-examples</li>
  </ul>
  <p>javascript:</p>
  <ul>
  <li>jquery min 3.5.1</li>
  <li>jquery UI 1.12.1</li>
  <li>ckeditor</li>
  <li>formBuilder 2.5.3 min</li>
  <li>fromRender 2.5.3 min</li>
  <li>keditor</li>
  <li>keditor-components</li>
  <li>prettify</li>
  <li>beautify</li>
  <li>beauutify-html</li>
  <li>examples</li>
  </ul>
  <p>This is the final result
  <a href="https://i.stack.imgur.com/fzh64.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fzh64.png" alt="enter image description here" /></a></p>
  <p>The problem is that the button &quot;+&quot; is missing</p>
  <p><a href="https://i.stack.imgur.com/dtfFF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dtfFF.png" alt="enter image description here" /></a></p>
  <p><a href="http://kademi.github.io/keditor/examples/" rel="nofollow noreferrer">This is a functional example</a></p>
  <p>How can I solve this? Thanks :)</p>