各位大佬请教一哈， DJANGO+BOOTSTRAP 中 CKEDITOR 加载不正常该怎么解决

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 2059 天前的主题，其中的信息可能已经有所发展或是发生改变。

我在评论区中使用了 CKEDITOR，

第一种情况下在 DIV 中渲染的表单是能正常显示的，如下

avatar

num1 代码如下

<div class="row">
        <form class="comment-form" method="post" action="{% url 'articles:reply' %}">
        {% csrf_token %}
        {{ form.comment }}
        <input type="hidden" name="article_id" id="article_id" value={{ article.pk }}>
        <button class="btn btn-primary pull-right" style="margin-top: 3px" type="submit">提交评论</button>
        </form>
        </div>

第二种情况下在 MODAL 中不能正常显示，如下

avatar

num2 代码如下

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title" id="myModalLabel">
				</h4>
			</div>
			<div class="modal-body">
        <form class="comment-form" method="post" action="{% url 'articles:reply' %}">
        {% csrf_token %}
        {{ form.comment }}
        <input type="hidden" name="article_id" id="article_id" value={{ article.pk }}>
        <input type="hidden" name="reply_id" id="reply_id" value="">
        <button class="btn btn-primary pull-right" style="margin-top: 3px" type="submit">提交评论</button>
        </form>
			</div>
			<div class="modal-footer">
			</div>
		</div>
	</div>
</div>

新手不知道问题出在哪里，请教哈，有空的大佬帮帮忙，谢谢啦~~~ PS：一开始是正常显示了的，后面不知道为啥子变成这样了

1 条回复 • 2019-03-23 22:24:35 +08:00

liulibzz

2019-03-23 22:24:35 +08:00

用了这个也没起作用，不会 JS 头大昂

$.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()
}
})
};