TinyMCE v6.4.1在ASP.Net MVC4视图中初始化失败排查咨询

我负责维护一个ASP.Net MVC 4应用，该应用在多个视图中使用TinyMCE（v6.4.1）富文本编辑器，但其中一个视图内的组件初始化失败，浏览器控制台报错：

Uncaught (in promise)  Error: Errors:  Failed path: (keying-config) The chosen schema: "cyclic" did not exist in branches: {}

Input object: {   "mode": "cyclic",   "selector": ".tox-menubar, .tox-toolbar, .tox-toolbar__primary, .tox-toolbar__overflow--open, .tox-sidebar__overflow--open, .tox-statusbar__path, .tox-statusbar__wordcount, .tox-statusbar__branding a, .tox-statusbar__resize-handle" }
    at theme.min.js:4:21781
    at Object.fold (theme.min.js:4:17055)
    at Xn (theme.min.js:4:21765)
    at Kn (theme.min.js:4:21815)
    at Object.config (theme.min.js:4:42705)
    at v (theme.min.js:4:339082)
    at renderUI (theme.min.js:4:339857)
    at renderUI (theme.min.js:4:395837)
    at tinymce.min.js:4:362627
    at tinymce.min.js:4:362638

该组件由公共共享组件定义，配置与其他正常运行的视图完全一致，怀疑当前页面的DOM存在冲突，请问应从何处入手排查根因？

以下是共享组件中的TinyMCE初始化代码：

<script type="text/javascript">

    (function () {
        tinymce.init({
            statusbar: false,
             selector: "#MessageBody",
             height: "400",
             width:"672",
             menubar: false,
             branding: false,
             plugins: 'preview importcss searchreplace autolink save directionality code visualblocks visualchars fullscreen image link media codesample table charmap pagebreak nonbreaking anchor insertdatetime advlist lists wordcount charmap emoticons',
             toolbar1: ' bold italic underline strikethrough | fontfamily fontsize blocks  ',
             toolbar2: 'alignleft aligncenter alignright alignjustify | outdent indent|  numlist bullist | forecolor backcolor removeformat |image link',
             image_advtab: true,
             images_file_types: 'jpg,svg,png,jpeg',
             importcss_append: true,
             image_title: true,
             convert_urls : false,

排查方案 #

• 检查DOM元素ID冲突：初始化代码使用#MessageBody作为选择器，确认当前页面是否存在多个同名ID的元素，或者该ID被其他脚本提前修改、移除或占用。
• 排查CSS选择器冲突：报错信息中提到了多个.tox-*类，检查当前页面的自定义CSS是否覆盖了TinyMCE的默认样式类，或者存在同名类导致TinyMCE的UI结构解析异常。
• 验证资源加载情况：确认当前页面中TinyMCE的JS/CSS资源是否重复加载，或者初始化代码是否在TinyMCE核心脚本加载完成前执行。
• 排查其他脚本干扰：检查当前页面的其他自定义脚本、第三方插件（如jQuery工具）是否修改了tinymce全局对象，或者在TinyMCE初始化前操作了#MessageBody元素（如隐藏、修改属性、移除节点）。
• 确认初始化代码完整性：虽然配置与其他视图一致，但检查当前页面渲染后的初始化代码是否完整（比如是否遗漏了闭合的大括号、分号，用户提供的代码片段末尾不完整，需确认实际运行时的代码是否完整）。
• 隔离测试定位冲突：逐步移除当前视图中的其他组件/脚本，只保留TinyMCE的DOM元素和初始化代码，验证是否能正常初始化，以此定位具体是哪个组件导致的冲突。

内容的提问来源于stack exchange，提问作者Shawn de Wet