Flask项目用flask_ckeditor报错：Uncaught ReferenceError: CKEDITOR未定义

核心问题：脚本加载顺序错误 #

当前模板中先渲染表单（含CKEditor对应的textarea），再加载CKEditor脚本，导致浏览器执行初始化代码时，CKEditor对象尚未定义。

修复步骤： #

1. 调整脚本加载位置
   将{{ ckeditor.load() }}和{{ ckeditor.config(name='content') }}移到表单渲染之前，确保脚本先加载完成：

   {% extends "base.html" %}
   {% block content %}
   <div style="padding-top: 50px; padding-right: 50px;">
       {{ ckeditor.load(custom_url=url_for('static', filename='ckeditor/ckeditor.js')) }}
       {{ ckeditor.config(name='content') }}
       <form action="{{ url_for('auth.admin.user_create_ck') }}" method="post">
           {{ form.csrf_token }}
           {{ render_field(form.username) }}
           {{ render_field(form.email) }}
           {{ render_field(form.pwdhash) }}
           {{ render_field(form.admin) }}
           {{ form.content() }}
           {{ render_field(form.submit) }}
       </form>
   </div>
   {% endblock %}
   

2. 验证本地CKEditor文件完整性
   确保static/ckeditor目录下包含完整的CKEditor文件，除ckeditor.js外，还需plugins、skins、lang等子目录——缺失这些依赖文件会导致CKEditor无法正常初始化。

3. 完善扩展初始化配置
   确认Flask应用工厂中已正确初始化CKEditor扩展：

   ckeditor = CKEditor()
   
   def create_app(config_class=Config):
       app = Flask(__name__, static_url_path='/static')
       app.config.from_object(config_class)
       app.config['CKEDITOR_SERVE_LOCAL'] = True
       ckeditor.init_app(app)  # 必须添加此行，完成扩展与应用的绑定
       # 其他应用配置...
   

   配置完成后，可直接使用默认本地加载方式，无需手动指定custom_url：

   {{ ckeditor.load() }}
   

4. 检查静态文件请求状态
   打开浏览器开发者工具的Network标签，刷新页面：

   • 若ckeditor.js返回404，说明文件路径错误，检查static/ckeditor/ckeditor.js是否存在
   • 若返回200仍报错，查看响应内容是否为完整的CKEditor脚本

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