我遇到与How to use CKEditor in a Bootstrap Modal?
指出的问题相同的问题然而问题是修复似乎不再起作用了。
<button type="button" data-toggle="modal" data-target="#modalAddBrand">Launch modal</button>
<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</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>
</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>
我在http://jsfiddle.net/7zDay/16/上添加了一个小提琴(添加了suugested修复)。尝试使用数学编辑器(使用sigma图标),你会发现它不允许你输入框。
感谢任何帮助。
答案 0 :(得分:13)
尝试this guide中描述的解决方案:
$.fn.modal.Constructor.prototype.enforceFocus = function() {
$( document )
.off( 'focusin.bs.modal' ) // guard against infinite focus loop
.on( 'focusin.bs.modal', $.proxy( function( e ) {
if (
this.$element[ 0 ] !== e.target && !this.$element.has( e.target ).length
// CKEditor compatibility fix start.
&& !$( e.target ).closest( '.cke_dialog, .cke' ).length
// CKEditor compatibility fix end.
) {
this.$element.trigger( 'focus' );
}
}, this ) );
};
演示:http://jsfiddle.net/7zDay/17/。对我来说很好。 AFAICS这是一个更通用的修复方法。
答案 1 :(得分:-1)
It's so simple and doesn't create any script conflict.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex, nofollow">
<title>Classic editor with default styles</title>
<script src="http://cdn.ckeditor.com/4.6.2/standard-all/ckeditor.js"></script>
</head>
<body>
<textarea cols="80" id="editor1" name="editor1" rows="10" ><p>This is some <strong>sample text</strong>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p>
</textarea>
<script>
CKEDITOR.replace( 'editor1', {
height: 260,
width: 700,
} );
</script>
</body>
</html>