如何为Django表单中CKEditorUploadingWidget字段添加自动补全？

首先先修正你表单代码里的语法错误：

from ckeditor_uploader.widgets import CKEditorUploadingWidget 
class TemplateMesForm(forms.Form):  # 这里应为forms.Form或forms.ModelForm，而非RequestForm
    temp_html = forms.CharField(label='Html:', widget=CKEditorUploadingWidget())

接下来分两种场景实现自动补全：

一、静态自动补全（固定补全项） #

适合补全固定的模板变量、关键词，比如{{username}}、{{order_id}}这类固定值。

1. 修改Django配置文件settings.py，配置CKEditor启用自动补全必需的插件：

CKEDITOR_CONFIGS = {
    'default': {
        # 保留原有配置，新增以下内容
        'extraPlugins': ','.join(['autocomplete', 'textmatch']),  # 自动补全依赖的两个核心插件
        'toolbar': 'Custom',
        'toolbar_Custom': [
            # 保留你原有工具栏按钮，可按需添加补全按钮
            ['Bold', 'Italic'],
            ['Link', 'Unlink'],
            ['Autocomplete'],  # 可选，添加后可手动触发补全
        ],
        # 配置补全规则
        'autocomplete': {
            'data': [
                {'name': '用户名', 'value': '{{username}}'},
                {'name': '订单ID', 'value': '{{order_id}}'},
                {'name': '订单金额', 'value': '{{order_amount}}'},
            ],
            'triggerCharacters': ['{'],  # 输入{时自动弹出补全列表
        }
    }
}

2. 确保ckeditor和ckeditor_uploader的静态文件已正确加载（执行过collectstatic命令）。

二、动态自动补全（从后端拉取数据） #

适合补全动态数据，比如数据库中的用户列表、商品名称等。

1. 先在settings.py里启用核心插件：

CKEDITOR_CONFIGS = {
    'default': {
        # 保留原有配置
        'extraPlugins': ','.join(['autocomplete', 'textmatch']),
    }
}

2. 编写后端API视图，返回补全数据：

# views.py
from django.http import JsonResponse
from django.views.decorators.http import require_GET
from django.contrib.auth.models import User  # 示例用User模型，替换成你的业务模型

@require_GET
def autocomplete_data(request):
    query = request.GET.get('query', '')
    # 模拟数据库模糊查询，实际替换为你的业务逻辑
    users = User.objects.filter(username__icontains=query).values_list('username', flat=True)
    # 整理成CKEditor要求的格式
    data = [{'name': user, 'value': f'{{{{user:{user}}}}}'} for user in users]
    return JsonResponse(data, safe=False)

3. 添加API路由：

# urls.py
from django.urls import path
from . import views

urlpatterns = [
    # 其他路由
    path('autocomplete-data/', views.autocomplete_data, name='autocomplete_data'),
]

4. 在表单模板中添加自定义JS，初始化动态补全逻辑：

{% extends 'base.html' %}
{% load static %}

{% block content %}
    <form method="post">
        {% csrf_token %}
        {{ form.as_p }}
        <button type="submit">提交</button>
    </form>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 获取CKEditor实例，实例ID为字段名前缀+id，这里是id_temp_html
    const editor = CKEDITOR.instances.id_temp_html;
    editor.on('instanceReady', function() {
        editor.plugins.get('autocomplete').addProvider({
            triggerCharacters: ['@'],  // 输入@时触发补全
            // 异步拉取后端数据
            fetchMatches: function(queryString, callback) {
                fetch(`{% url 'autocomplete_data' %}?query=${encodeURIComponent(queryString)}`)
                    .then(res => res.json())
                    .then(data => callback(data))
                    .catch(err => {
                        console.error('补全数据加载失败:', err);
                        callback([]);
                    });
            },
            // 定义选中补全项时插入的内容
            getMatchItem: function(match) {
                return {
                    label: match.name,
                    value: match.value,
                    text: match.value
                };
            }
        });
    });
});
</script>
{% endblock %}

注意事项 #

• 确保ckeditor和ckeditor_uploader已加入INSTALLED_APPS，并完成了基础配置（比如媒体文件路径）。
• 若使用ModelForm，建议将对应Model字段设为TextField，避免CharField的长度限制。
• 动态补全API需添加权限控制，可通过login_required装饰器限制访问，防止敏感数据泄露。

内容的提问来源于stack exchange，提问作者Jenny F