将 RTF/富文本编辑器添加到 CustomUserCreationForm/CustomUserEditForm

Question

我尝试按照here 的描述扩展我的自定义User 模型。 这适用于ModelChoiceField 和CharField 等显示的字段。 我现在的目标是添加一个RTF 字段（类似于Page 模型中显示的控件）。我查看了wagtail 的源代码，发现get_rich_text_editor_widget 方法与CharField 结合使用。可悲的是，我收到了 JavaScript 错误：

未捕获的类型错误：无法读取未定义的属性“initEditor”

我现在的猜测是我需要以某种方式包含或修改小部件的挂钩。或者是否足以覆盖模板中的JavaScript 块？现在感觉有点 hacky，我坚持包含所需的JS，这就是我发布问题的原因。也许我错过了一些微不足道的东西。

# ...
from wagtail.admin.rich_text import get_rich_text_editor_widget

class CustomUserEditForm(UserEditForm):
    position = forms.ModelChoiceField(queryset=Position.objects, required=True, label=_('Position'))
    # biography = forms.Textarea()
    biography = forms.CharField(widget=get_rich_text_editor_widget())

---

更新： 更新我的模板（可能不是正确的方法）：

{% block js %}
{{ block.super }}

<script type="text/javascript" src="/static/wagtailadmin/js/draftail.js"></script>

{% endblock js %}

结果：

Answer 1

我已将我的解决方案写成草稿的问题

https://github.com/springload/draftail/issues/450

我有一个 wagtail 网站，里面有这个很棒的 RichText 编辑器（称为 Draftail），但试图在非 Wagtail 管理页面上使用它让我觉得很脏。我想要一个人们可以写自己的传记领域，我希望博客作者也能够使用它。但要做到这一点，我不得不做一些让我畏缩的事情。

还不错：

{% block extra_css %}
  <link href="{% static 'wagtailadmin/css/panels/draftail.css' %}" type="text/css" media="all" rel="stylesheet">
{% endblock extra_css %}

WTF????为什么我们不只是将网站图标用于粗体之类的东西

    <div data-sprite></div>
    <script>
        function loadIconSprite() {
            var spriteURL = '{% url "wagtailadmin_sprite" %}';
            var revisionKey = 'wagtail:spriteRevision';
            var dataKey = 'wagtail:spriteData';
            var isLocalStorage = 'localStorage' in window && typeof window.localStorage !== 'undefined';

            var insertIt = function (data) {
                var spriteContainer = document.body.querySelector('[data-sprite]');
                spriteContainer.innerHTML = data;
            }

            var insert = function (data) {
                if (document.body) {
                    insertIt(data)
                } else {
                    document.addEventListener('DOMContentLoaded', insertIt.bind(null, data));
                }
            }

            if (isLocalStorage && localStorage.getItem(revisionKey) === spriteURL) {
                var data = localStorage.getItem(dataKey);
                if (data) {
                    insert(data);
                    return true;
                }
            }

            try {
                var request = new XMLHttpRequest();
                request.open('GET', spriteURL, true);
                request.onload = function () {
                    if (request.status >= 200 && request.status < 400) {
                        data = request.responseText;
                        insert(data);
                        if (isLocalStorage) {
                            localStorage.setItem(dataKey, data);
                            localStorage.setItem(revisionKey, spriteURL);
                        }
                    }
                }
                request.send();
            } catch (e) {
                console.error(e);
            }
        }
        loadIconSprite();
    </script>

因为 wagtail cmets.js 不知何故需要 wagtailConfig.ADMIN_API 并且没有 cmets.js，draftail 不会初始化

      <script>
        (function(document, window) {
            window.wagtailConfig = window.wagtailConfig || {};
            wagtailConfig.ADMIN_API = {
                PAGES: '',
                DOCUMENTS: '',
                IMAGES: '',
                {# // Use this to add an extra query string on all API requests. #}
                {# // Example value: '&order=-id' #}
                EXTRA_CHILDREN_PARAMETERS: '',
            };

            {% i18n_enabled as i18n_enabled %}
            {% locales as locales %}
            wagtailConfig.I18N_ENABLED = {% if i18n_enabled %}true{% else %}false{% endif %};
            wagtailConfig.LOCALES = {{ locales|safe }};

            wagtailConfig.STRINGS = {% js_translation_strings %};

            wagtailConfig.ADMIN_URLS = {
                PAGES: ''
            };
        })(document, window);
    </script>
    <script src="{% static 'wagtailadmin/js/vendor/jquery-3.5.1.min.js' %}"></script>
    <!-- <script src="{% static 'wagtailadmin/js/core.js' %}"></script> strangely not needed -->
    <script src="{% static 'wagtailadmin/js/vendor.js' %}"></script>
    <script src="{% static 'wagtailadmin/js/comments.js' %}"></script>
    {{ form.media.js }}

所有这些只是为了让草稿编辑器出现在非 wagtail 管理页面上！