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">×</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">×</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, '<').replace(/\>/g, '>');
modal.find('.source-html').html(beautifyHtml(htmlCode + htmlInclude));
var jsCode = $('[data-keditor="script"]').html();
jsCode = jsCode.replace(/\</g, '<').replace(/\>/g, '>');
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, '<').replace(/>/g, '>');
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
The problem is that the button "+" is missing
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