问题
If I use the CKEditor plugin in an HTML page based on a Bootstrap template, it works great, however if I insert the editor on a Bootstrap Modal like this
<!-- Modal -->
<div class=\"modal fade\" id=\"modalAddBrand\" tabindex=\"-1\" role=\"dialog\" aria labelledby=\"modalAddBrandLabel\" aria-hidden=\"true\">
<div class=\"modal-dialog modal-lg\">
<div class=\"modal-content\">
<div class=\"modal-header\">
<button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\">×</button>
<h4 class=\"modal-title\" id=\"modalAddBrandLabel\">Add brand</h4>
</div>
<div class=\"modal-body\">
<form>
<textarea name=\"editor1\" id=\"editor1\" rows=\"10\" cols=\"80\">
This is my textarea to be replaced with CKEditor.
</textarea> <script>
CKEDITOR.replace(\'editor1\');
</script>
</form>
</div>
<div class=\"modal-footer\">
<button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Close</button>
<button id=\"AddBrandButton\" type=\"button\" class=\"btn btn-primary\">Save</button>
</div>
</div>
</div>
</div>
The editor works, but all the form controls on the popup windows of the editor are disabled, if you try to add a link or an image, for example, you cannot insert the URL or any description because the inputs are disabled.
Any workaround for this issue?
This is a fiddle example: http://jsfiddle.net/7zDay/
回答1:
This should help http://jsfiddle.net/pvkovalev/4PACy/
$.fn.modal.Constructor.prototype.enforceFocus = function () {
var $modalElement = this.$element;
$(document).on('focusin.modal', function (e) {
var $parent = $(e.target.parentNode);
if ($modalElement[0] !== e.target && !$modalElement.has(e.target).length
// add whatever conditions you need here:
&&
!$parent.hasClass('cke_dialog_ui_input_select') && !$parent.hasClass('cke_dialog_ui_input_text')) {
$modalElement.focus()
}
})
};
Update October 2016:
CDN link for CKEditor has been changed, so I updated jsfiddle
回答2:
This is late to answer but doing css trick will solve the issue.
Default z-index of Bootstrap modal is 10051 and default z-index of ckeditor dialog are 10010. The trick is just to increase ckeditor dialog z-index as below. put below code in your css file:
.cke_dialog
{
z-index: 10055 !important;
}
回答3:
See the response from aaronsnow to this thread on the ckeditor forum: http://ckeditor.com/forums/Support/Issue-with-Twitter-Bootstrap
He's given the code. Just put the code in js file and make sure you include the file after the jquery and bootstrap
回答4:
$(document).on({'show.bs.modal': function () {
$(this).removeAttr('tabindex');
} }, '.modal');
回答5:
I was getting Uncaught TypeError: Cannot read property 'fn' of undefined
So I just replaced the $ inside the script provided by @Pavel Kovalev above to jQuery.
jQuery.fn.modal.Constructor.prototype.enforceFocus = function () {
modal_this = this
jQuery(document).on('focusin.modal', function (e) {
if (modal_this.$element[0] !== e.target && !modal_this.$element.has(e.target).length
&& !jQuery(e.target.parentNode).hasClass('cke_dialog_ui_input_select')
&& !jQuery(e.target.parentNode).hasClass('cke_dialog_ui_input_text')) {
modal_this.$element.focus()
}
})
};
回答6:
Use the 100% working script..
<script type="text/javascript">
// Include this file AFTER both jQuery and bootstrap are loaded.
$.fn.modal.Constructor.prototype.enforceFocus = function() {
modal_this = this
$(document).on('focusin.modal', function (e) {
if (modal_this.$element[0] !== e.target && !modal_this.$element.has(e.target).length
&& !$(e.target.parentNode).hasClass('cke_dialog_ui_input_select')
&& !$(e.target.parentNode).hasClass('cke_dialog_ui_input_textarea')
&& !$(e.target.parentNode).hasClass('cke_dialog_ui_input_text')) {
modal_this.$element.focus()
}
})
};
</script>
Thanks!
回答7:
Don't know, maybe in my version it's already fixed, but my solution is:
$("#messageModal").on('shown.bs.modal', function() {
CKEDITOR.replace('message', {
height: '400px',
width: '100%'
});
})
回答8:
All very simple:
$('#modal').removeAttr('tabindex');
$('#modal').focusout(function(){
$(this).css({'position':'relative'});
});
$('#modal').focusin(function(){
$(this).css({'position':'fixed'});
});
回答9:
This is very short and simple. import CKEditor Javascript config files from the path they are store in your app. This is mine
<script type="text/javascript" src="{% static 'ckeditor/ckeditor-init.js' %}"></script>
<script type="text/javascript" src="{% static 'ckeditor/ckeditor/ckeditor.js' %}"></script>
After this you can call CKEditor to replace your textarea by doing this
CKEDITOR.replace('topic', {
uiColor: '#9AB8F3',
language: "en-us",
toolbar: "Custom",
height: "200",
width: "400",
skin: "moono",
toolbar_Custom: [
["Bold", "Italic", "Underline"],
["NumberedList", "BulletedList", "-", "Outdent", "Indent", "-", "JustifyLeft", "JustifyCenter", "JustifyRight", "JustifyBlock"],
["Link", "Unlink"]
],
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://cdn.ckeditor.com/4.3.4/standard/ckeditor.js"></script>
<!-- Modal -->
<div class="modal fade" id="modalAddBrand" tabindex="-1" role="dialog">
<div class="modal-dialog">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<div class="modal-content">
<div class="user-box">
<h2>Create a new discussion</h2>
<form method="post" id="discussion_add" action="#">
<!--FORM FIELD START-->
<div class="form">
<div class="input-container">
<input type="text" id="id_session" name="session" required="true">
</div>
<div class="input-container">
<textarea cols="40" id="id_topic" name="topic" rows="10"></textarea>
</div>
<div class="input-container">
<button class="btn-style">Create Discussion</button>
</div>
</div>
</form>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<button data-toggle="modal" data-target="#modalAddBrand">Launch Modal</button>回答10:
Just open /core/config.js in ckeditor files than change "baseFloatZIndex" variable
baseFloatZIndex = 10000
to
baseFloatZIndex = 20000
It will change the start "z-index" of your editor box and the popups.
回答11:
I think i found some solution for this.
As @Pavel Kovalev suggested it have something to do with boostraps 4 JS and focus in modal script. I had just same problem as Yours.
There is an option for modals called "focus" which sets focus on initialized modals. Disabling this option makes all Your inputs in CKEditors modals work as they should. Not having focus on this modal i can live without :)
See details here: https://getbootstrap.com/docs/4.3/components/modal/#options
In my approach to this i finaly got something like this:
<div class="modal fade" data-focus="false" id="newsAdd" role="dialog" aria-labelledby="fieldAdd" aria-hidden="true">
...
</div>
Also it is propably good idea for some more extensive testing, especialy if You have multiple bootstrap modals with CKEditor on one page.
As for the all the "fixes" You can propably find on web. Have a look that they most likely refer to bootstrap 3 where events on modal are different so they simply cannot work. Including @Pavel Kovalev solution.
来源：https://stackoverflow.com/questions/22637455/how-to-use-ckeditor-in-a-bootstrap-modal