我阅读了很多关于这个How to use CKEditor in a Bootstrap Modal?的解决方案,但它们都不适用于我。我感到绝望...... js fiddle< - 我正在使用的代码:
我的html头:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdn.ckeditor.com/4.6.2/standard/ckeditor.js"></script>
我的模态:
<button type="button" data-toggle="modal" data-target="#modal">Launch modal</button>
<!-- Modal -->
<div class="modal fade" id="modal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<form enctype="multipart/form-data" action="" method="post" class="form-horizontal">
<div class="modal-body">
<div class="form-group">
<label for="text" class="col-lg-2 control-label">CKeditor:</label>
<div class="col-lg-10">
<textarea class="form-control" name="text" rows="8" maxlength="400" minlength="20" required></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<a class="btn btn-danger" data-dismiss="modal">Fermer</span></a>
<button class="btn btn-primary" type="submit">Envoyer</button>
</div>
</form>
</div>
</div>
</div>
我的ckeditor脚本:
window.onload = function() {
CKEDITOR.replace('text');
};
编辑器工作,但编辑器弹出窗口中的所有表单控件都被禁用,例如,如果您尝试添加链接或图像,则无法插入URL或任何描述,因为输入已禁用。如果我使用键盘快捷键,它可以工作,但这是导致问题的按钮。总是一样的错误:
Unable to get property 'specified' of undefined or null reference ckeditor.js (100,288)
此问题的解决方法是什么? image of the modal
答案 0 :(得分:1)
在TAG HEAD
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.ckeditor.com/4.6.2/standard/ckeditor.js"></script>
IN TAG BODY
<!-- HTML -->
<input type="button" id="btnModal" value="Open Modal" />
<!-- Modal -->
<div class="modal fade" id="modal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<form enctype="multipart/form-data" action="" method="post" class="form-horizontal">
<div class="modal-body">
<div class="form-group">
<label for="text" class="col-lg-2 control-label">CKeditor:</label>
<div class="col-lg-10">
<textarea name="editor1"></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<a class="btn btn-danger" data-dismiss="modal">Fermer</a>
<button class="btn btn-primary" type="submit">Envoyer</button>
</div>
</form>
</div>
</div>
</div>
IN JQUERY
$(document).on('click', '#btnModal', function(){
$('#modal').modal('show');
CKEDITOR.replace('editor1');
});
DEMO:jsfiddle