将 Aloha 编辑器添加到 Django Admin，jQuery 兼容性问题随之而来答案

【问题标题】：Adding Aloha Editor to Django Admin, jQuery compatibility issues ensue将 Aloha 编辑器添加到 Django Admin，jQuery 兼容性问题随之而来
【发布时间】：2012-08-28 12:43:33
【问题描述】：

我正在用 Django 编写个人博客，并希望将 Aloha Editor 包含到管理面板中。我一直按照说明进行操作，但失败了。然后我尝试了其他方法，包括将更新版本的 jQuery（而不是 Django 的 1.4.2）放入我的 /static/admin/js，这只会破坏*。似乎 jQuery 在需要时不可用（在document.ready），但在以后的任何时候，从控制台启用 Aloha 工作...通过 django.jQuery。

>>> django.jQuery('.vLargeTextField').aloha() //works
>>> $('.vLargeTextField').aloha() // does not work; jQuery 1.7.2 loaded by Aloha

我的templates/admin/base_site.html（相关块）：

{% block extrastyle %}
<link href="/static/admin/local-lib/alohaeditor-0.21.3/aloha/css/aloha.css" rel="stylesheet" type="text/css" />
{% endblock %}

{% block extrahead %}
<script type="text/javascript" src="http://requirejs.org/docs/release/2.0.6/minified    /require.js"></script>
<script src="/static/admin/local-lib/alohaeditor-0.21.3/aloha/lib/aloha.js"
data-aloha-plugins="common/ui,
        common/format,
        common/list,
        common/link,
        common/highlighteditables">
</script>
<script type="text/javascript">
Aloha.ready( function() {
  Aloha.jQuery('.vLargeTextArea').aloha();
});
</script>
{% endblock %}

*中断包括：表格内联现在不稳定，可折叠字段集现在的行为与 jQuery 1.4.2 略有不同。

编辑

似乎将 Aloha 插入管理面板的唯一真正方法是将最后一个脚本放在 blockbots (!!!) 块中，该块在标准 Django 管理包含项下呈现。此外，必须使用 Aloha 提供的 jQuery 来处理 Aloha，因为我放入 /static/admin 的 1.8 将不起作用。对于 Django 的管理员，我恢复到提供的 1.4.2。但是，出现了新问题：Aloha 的工具提示在页面底部堆积，并且不会消失。此外，控制台充满了错误。有什么办法可以解决这个问题吗？

【问题讨论】：

控制台显示什么错误？
查看此评论中的第二个示例（我说“应该始终适用于任何项目”）github.com/alohaeditor/Aloha-Editor/issues/…
问题出在新的 jQuery (1.8.1) 上，错误如下：TypeError: f.curCSS is not a function ...is),e=b.outerWidth(),c=b.outerHeight(),g=parseInt(f.curCSS(this,"marginLeft",tru... aloha.js (line 875)
没错，jQuery 1.8 尚不支持。 github.com/alohaeditor/Aloha-Editor/issues/692

标签： jquery django-admin aloha-editor

【解决方案1】：

您可以尝试为 aloha 使用预构建的 django 集成包： https://pypi.python.org/pypi/django-aloha-edit,

然后使用 HTMLField，或者简单地使用 AlohaWidget 并指定后端。 HTMLField 进行了重要的清理工作，但如果您只是从受信任用户的后端进行编辑，则没有必要这样做，您只需覆盖后端中的小部件即可。

formfield_overrides = {
    models.TextField: {'widget': AlohaWidget(attrs={'style':'width:100%;max-width:800px;height:80ex;'})},
}

这样做的好处是，自动包含所需的 js 资源——包括仅用于 Aloha 的 jQuery 版本。（两个版本可以独立行动。）

【讨论】：