Open edX Platform 中的 TinyMCE 富文本编辑器从内置集成到自定义插件扩展【免费下载链接】openedx-platformThe Open edX LMS Studio, powering education sites around the world!项目地址: https://gitcode.com/GitHub_Trending/ed/openedx-platformTinyMCE 是 Open edX 平台内置的所见即所得WYSIWYG富文本编辑器承担着 Studio 课程创作中 HTML 组件、文本内容编辑等核心场景的编辑能力。本文以平台实际打包的 TinyMCE 发行版与其构建、配置、集成源码为依据系统梳理 TinyMCE 在 edx-platform 中的定位、功能特性、定制化构建流程、iframe 集成细节以及通过配置变量扩展自定义插件的完整实操路径。TinyMCE 是什么平台的 WYSIWYG 内容编辑内核TinyMCE 是当前最流行的开源 Web 所见即所得WYSIWYG编辑器被广泛集成进内容管理系统CMS、学习管理系统LMS、客户关系管理CRM与营销自动化系统、邮件营销系统以及各类 SaaS 应用的内容创作流程中。在 Open edX 生态里它是平台默认使用的可视化文本/HTML 编辑器课程作者在 Studio 中编辑 HTML 组件、富文本内容时看到的即是一个 TinyMCE 实例输入的内容最终以 HTML 形式存入课程结构。在 edx-platform 仓库中TinyMCE 以第三方 vendor 形式完整内置在 common/static/js/vendor/tinymce/js/tinymce 目录下包含tinymce.min.js核心编辑器主体tinymce.full.min.js打包了全部本地插件的完整发行包jquery.tinymce.min.jsjQuery 集成封装langs/多语言包skins/ui/studio-tmce5/专门为 Studio 定制的皮肤skin与内容样式plugins/40 内置插件advlist、anchor、autolink、autoresize、autosave、code、codesample、fullscreen、image、imagetools、link、lists、media、paste、table、template等。平台对 TinyMCE 的功能诉求可以用其官方 README 的一句话概括内容具有强大的力量——更多在线应用正在为人们提供受益于内容变革力量的平台而 TinyMCE 让应用可以轻松集成编辑器为用户提供最佳的内容创作体验。这一理念在 Open edX 中具体化为让课程作者以所见即所得的方式创作教学内容。三种编辑模式理解 TinyMCE 的能力模型TinyMCE 提供三种编辑模式这也是集成方需要首先做出的技术选型Classic经典模式编辑器以 iframe 承载工具栏与编辑区分离内容最终写回隐藏的textarea。Open edX Studio 采用的就是这种模式——HTML 组件的文本编辑在 iframe 内进行因此平台在 iframe 处理上做了专门的兼容处理下文详述。Inline行内模式直接在页面元素上就地编辑无 iframe适合富文本字段就地输入场景。Distraction-free沉浸无干扰模式inline 模式的增强版输入时隐藏工具栏等干扰元素聚焦于内容本身。对 edx-platform 而言classic 模式的 iframe 载体直接影响了平台的集成代码。在 cms/static/js/utils/handle_iframe_binding.js 的注释中明确写道TinyMCE editor is hosted in an iframe, and before the iframe is removed we execute this code平台因此实现了专门的 iframe/embed 标签处理逻辑// TinyMCE 的 iframe src 会被设置为 javascript: // 在移除 iframe 前必须跳过这种特殊值避免抛错 else if (ifr_source.lastIndexOf(javascript:, 0) ! 0) { $(this).attr(src, ifr_source ? wmode); }该工具还提供iframeBindingHtml方法用于在 HTML 字符串渲染前为其中所有iframe追加wmodetransparent查询参数、为embed追加wmodetransparent属性从而解决 Flash/视频弹层遮挡编辑器弹出层z-index的问题——这正是平台将编辑器与外部媒体内容共存的工程细节。平台内的定制化构建从上游发行版到 Studio 专用 bundleTinyMCE 并非以开箱即用的官方包直接被使用。仓库中 common/static/js/vendor/tinymce/BUILD_README.md 记录了 Open edX 维护者如何将上游 TinyMCE 定制为平台内置发行版这套流程也是任何想要升级或深度定制编辑器版本的技术团队应遵循的步骤。版本升级流程从 TinyMCE 官方 tags 下载目标版本若为主版本升级major update遵循官方迁移文档并同步更新 edx-platform 的调用代码按下文说明配置 codemirror 插件在vendor/js/tinymce目录下搜索字符串EDX找出当前版本中所有 Open edX 特定修改将 EDX 特定修改合并到新下载的版本中重新生成js/tinymce.full.min.js。codemirror 插件集成TinyMCE 内置的code插件负责 HTML 源码视图而 Open edX 在此基础上进一步集成了tinymce-codemirror 插件仓库内位于 common/static/js/vendor/tinymce/js/tinymce/plugins/codemirror含plugin.js、plugin.min.js、source.html及 10 种语言文件让 HTML 源码编辑体验由 CodeMirror 提供。其安装步骤为# 1. 在插件目录安装依赖并生成压缩文件 npm install npm run prepublish # 生成 plugin.min.js # 2. 删除插件自带的 codemirror-4.8 目录 # 3. 将 tinymce-codemirror/plugins 目录移动到 # common/static/js/vendor/tinymce/js/plugins/ 下 # 4. 将 EDX 特定修改应用到 plugin.js 与 source.html # 5. 使用 uglify-js 重新生成压缩版 cd common/static/js/vendor/tinymce/js/plugins/codemirror/ uglify plugin.js -m -o plugin.min.js重要提示BUILD_README 原文强调每次重新生成 codemirror 的plugin.min.js后都必须重新生成tinymce.full.min.js整体 bundle以确保最新改动被打入发行包。生成 tinymce.full.min.js以 TinyMCE 5.5.1 为例完整构建命令如下unzip tinymce-5.5.1.zip cd tinymce-5.5.1 yarn yarn build # 在 dist 目录生成多个 zip unzip dist/tinymce_5.5.1_dev.zip -d /path/to/edx-platform/common/static/js/vendor/ # 删除 vendor/tinymce 中 package.json、yarn.lock 等不必要文件 cd common/static/js/vendor/tinymce/js/tinymce LC_ALLC cat tinymce.min.js */*/*.min.js plugins/emoticons/js/emojis.min.js tinymce.full.min.js该命令将核心包、各插件目录下的*.min.js以及表情插件的数据文件按序拼接生成包含全部插件的单文件 bundle。平台正是通过这种方式把50 强大插件、一行代码即可引入的 TinyMCE 插件哲学固化为自身发行策略。Studio 中的静态资源管线皮肤与内容样式TinyMCE 的界面外观由 skin 决定编辑区内容渲染由 content CSS 决定。Open edX 在 cms/envs/common.py 中通过 pipeline 配置为 Studio 定义了三条 TinyMCE 相关资源管线style-vendor-tinymce-content: { source_filenames: [ css/tinymce-studio-content-fonts.css, js/vendor/tinymce/js/tinymce/skins/ui/studio-tmce5/content.min.css, css/tinymce-studio-content.css ], output_filename: css/cms-style-vendor-tinymce-content.css, }, style-vendor-tinymce-skin: { source_filenames: [ js/vendor/tinymce/js/tinymce/skins/ui/studio-tmce5/skin.min.css ], output_filename: css/cms-style-vendor-tinymce-skin.css, }从配置可以看出平台的三层样式策略字体基础tinymce-studio-content-fonts.css先声明编辑区字体体系Studio 专用皮肤skins/ui/studio-tmce5/是平台为 Studio 定制的 TinyMCE 5 皮肤skin.min.css 与 content.min.css 分离保证编辑器 UI 与 Studio 视觉风格一致内容样式覆盖tinymce-studio-content.css进一步定制编辑区内 HTML 内容的渲染效果使所见尽量贴近课程发布后的所得。皮肤与内容样式的分离是 TinyMCE 的经典设计——skin 管编辑器外壳工具栏、菜单、弹窗content CSS 管编辑区内正文排版Open edX 正是利用这一机制实现了深度品牌化。在 Studio 代码中的实际调用TinyMCE 作为 AMD 模块深度嵌入 Studio 的前端构建体系cms/djangoapps/pipeline_js/js/xmodule.js 在模块依赖声明中引入tinymce与jquery.tinymce并通过$script动态加载再以tinymce参数注入业务模块说明平台通过 jQuery 封装jquery.tinymce.min.js与编辑器交互cms/static/cms/js/require-config.js 等 RequireJS 配置将 tinymce 路径映射到 vendor 目录cms/templates/widgets/source-edit.html 展示了平台与编辑器实例的直接交互当 latex2edx 服务把 LaTeX 源码编译为 edX XML 后如果当前没有父级 CodeMirror 编辑器则回退到写入活动 TinyMCE 实例else if (window.tinyMCE ! undefined window.tinyMCE.activeEditor ! undefined) { window.tinyMCE.activeEditor.setContent(xml); }这印证了 README 中通过暴露的 API 编写符合框架的自定义功能的可行性tinyMCE.activeEditor.setContent()正是 TinyMCE 公共 API 的典型用法。此外openedx/core/djangoapps/xblock/rest_api/views.py 中还能看到oa_editor_tinymce_jsopenassessment 的 TinyMCE 编辑器资源经由 REST API 清单分发说明 TinyMCE 资源在开放评估ORA等组件中同样被复用。扩展 TinyMCE在 Open edX 中启用自定义插件TinyMCE 官方 README 强调其可扩展性通过暴露的 API开发者可以在现有 UI 组件框架内编写自定义功能50 插件让增加功能只需一行代码。Open edX 将这一能力落地为两条明确步骤完整记录于 docs/extensions/tinymce_plugins.rst。第一步安装插件打包进静态资源指定需要安装的插件使其被捆绑进静态资源通常通过 edX 部署配置中的TINYMCE_ADDITIONAL_PLUGINS_LIST配置变量完成该角色说明位于 openedx/configuration 仓库的playbooks/roles/tinymce_plugins/README.rst。插件文件最终会被纳入common/static/js/vendor/tinymce/js/plugins/目录参与 bundle 生成。第二步启用插件通过 JS 环境配置启用插件需要设置一个 Studio 环境变量JS_ENV_EXTRA_CONFIG——它是一个字典承载各类额外的 JavaScript 配置。其中负责启用 TinyMCE 插件的键是TINYMCE_ADDITIONAL_PLUGINS值为插件对象列表。每个插件对象包含三个属性属性类型说明namestringTinyMCE 插件名将加入编辑器插件列表toolbarboolean是否将该插件显示在工具栏extra_settingsobject追加到 TinyMCE 编辑器配置中的额外插件设置完整的配置示例YAMLEDXAPP_CMS_ENV_EXTRA: JS_ENV_EXTRA_CONFIG: TINYMCE_ADDITIONAL_PLUGINS: - name: adsklink toolbar: true extra_settings: linktypes: - Download - Offer filetypes: - PDF - ZIP - Video - Design orientations: - Vertical - Horizontal styles: - Primary - Normal - Secondary该示例展示了一个名为adsklink的自定义链接类插件它不仅被加入编辑器插件列表并出现在工具栏还通过extra_settings注入业务定制的链接类型、文件类型、方向与样式选项。这正是一行代码引入插件 几行配置释放完整能力的实践范本。与官方能力模型对照可扩展、可定制、可集成结合官方 README 的三大特性维度可以对照出 Open edX 的具体落地Integration集成官方提供 tinymce-react、tinymce-vue、tinymce-angular 等框架组件edx-platform 侧则以 jQuery 封装jquery.tinymce.min.js RequireJS 模块化方式集成属于传统 AMD 前端架构下的对应方案。Customization定制官方强调可配置 UI 以匹配站点设计、按需增减功能平台通过studio-tmce5定制皮肤、内容 CSS 管线与TINYMCE_ADDITIONAL_PLUGINS机制实现了同样目标。Extensibility可扩展官方开放源码与 API 支持自定义功能平台通过 BUILD_README 的搜索 EDX 标记 合并补丁流程维护本地定制并通过插件属性模型name/toolbar/extra_settings向下游集成方开放扩展入口。对于希望深入源码的开发者建议从三处入手构建与升级流程见 common/static/js/vendor/tinymce/BUILD_README.md插件扩展配置见 docs/extensions/tinymce_plugins.rst编辑器 iframe 集成细节见 cms/static/js/utils/handle_iframe_binding.js。【免费下载链接】openedx-platformThe Open edX LMS Studio, powering education sites around the world!项目地址: https://gitcode.com/GitHub_Trending/ed/openedx-platform创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
