javascript - jquery.min.js:2 Uncaught TypeError: Cannot read property 'replace' of undefined (javascript)(laravel)
问题描述
我正在尝试使用此库导入拖放编辑器
但我得到这些错误
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
这是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);
在我看来,我只有这个
<div id="content-area"></div>
<script>
$(function () {
$('#content-area').keditor();
});
</script>
我在用着
CSS:
- 字体真棒
- 编辑
- keditor 组件
- 美化
- keditor 示例
javascript:
- jQuery 最小 3.5.1
- jQuery UI 1.12.1
- ckeditor
- formBuilder 2.5.3 分钟
- 从渲染 2.5.3 分钟
- 编辑器
- keditor 组件
- 美化
- 美化
- 美化-html
- 例子
问题是缺少按钮“+”
我该如何解决这个问题?谢谢 :)
解决方案
您忘记添加使代码失败的元素data-keditor="script"
。script
您还需要添加元素data-type="keditor-style"
。link rel="stylesheet"
这是您在正确元素上具有正确属性的代码。出于某种原因,它在这里不起作用,但您可以在JSFiddle中尝试
(function ($) {
// Mocked functions because not provided in the question
const noop = str => str;
const html_beautify = noop;
const js_beautify = noop;
const PR = {
prettyPrintOne: noop
}
$(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);
<link href="https://cdn.jsdelivr.net/npm/@kademi/keditor@2.0.1/dist/css/keditor.css" rel="stylesheet" data-type="keditor-style"/>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" data-type="keditor-style">
<div id="content-area"></div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@kademi/keditor@2.0.1/dist/js/keditor.js"></script>
<script type="text/javascript" data-keditor="script">
$(function () {
$('#content-area').keditor();
});
</script>