Codemirror 插件 Tinymce 内联模式 IndexSizeError

Question

我在 contenteditable div.

上以内联模式使用 tinymce

我之前使用过 CodeMirror tinymce 插件（不是内联模式）没有问题，但它似乎不能在内联模式下正常工作。我试过将配置更改为 inline: false 并且它有效。

单击 Source 按钮打开带有 CodeMirror 的 HTML，似乎没问题。但是当我点击 Ok 保存它时，它似乎在 Chrome 和 Firefox 中工作正常但在 Safari 中它添加了一个  并且我无法关闭模态（但是，我可以看到它已经更改了可编辑div的内容），再次单击Ok按钮，它添加了另一个和控制台错误.单击取消或 X 按钮只会添加控制台错误。

在控制台中我得到 IndexSizeError: DOM Exception 1: Index or size was negative, or greater than the allowed value tinymce.min.js:5724

在 Chrome 中，它似乎可以工作，但我仍然收到控制台错误 The given range isn't in document.

我的tinymce配置如下：

var tinymceEditText = tinymce.init({
        selector: '.editableEl',
        // target: ".editableElTinyMCE",
        // theme: 'inlite',
        inline: true,
        plugins: [
            'advlist autolink lists link image charmap anchor media',
            'searchreplace visualblocks code fullscreen',
            'template textcolor colorpicker hr fontawesome noneditable hr',
            'insertdatetime contextmenu paste save codemirror',
            'OBstock emoji_one'
        ],
        toolbar1: 'save undo redo | styleselect | bold italic underline | forecolor backcolor | alignleft aligncenter alignright alignjustify | | code',
        toolbar2: 'bullist numlist outdent indent | template | hr | anchor link unlink | image media OBstock emoji_one fontawesome ',
        relative_urls: false,
        remove_script_host: true,
        templates: "/admin/JS/tinymce/js/tinymce/lists/template_list.php",
        external_filemanager_path: "/filemanager/",
        external_plugins: {"filemanager": "/filemanager/plugin.min.js"},
        filemanager_title: "Uploaded Files", //the title of filemanager window default="Responsive filemanager",
        filemanager_sort_by: "name", //the element to sorting (values: name,size,extension,date) default="",
        filemanager_descending: 0, //descending ? or ascending (values=1 or 0) default="0"
        codemirror: {
            indentOnInit: true, // Whether or not to indent code on init.
            smartIndent: true,
            indentWithTabs: true,
            saveCursorPosition: false,
            path: '/admin/JS/codemirror-' + CODEMIRRORVERSION, // Path to CodeMirror distribution
            config: {           // CodeMirror config object
                theme: CODETHEME,
                indentUnit: 4,
                lineNumbers: true,
                mode: "htmlmixed",
                matchBrackets: true,
                autoCloseBrackets: true,
                autoCloseTags: true,
                matchTags: {bothTags: true},
                indentOnInit: true, // Whether or not to indent code on init.
                smartIndent: true,
                indentWithTabs: true,
                lineWrapping: true,
                paletteHints: false,
                lint: true,
                lintOnChange: true,
                showHint: true,
                HTMLHint: true,
                CSSHint: true,
                JSHint: true,
                getAnnotations: true,
                gutters: ['CodeMirror-lint-markers', 'CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
                foldGutter: true,
                profile: 'xhtml', /* define Emmet output profile */
                extraKeys: {
                    "Ctrl-Space": "autocomplete",
                    "F11": function (cm) {
                        cm.setOption("fullScreen", !cm.getOption("fullScreen"));
                    },
                    "Esc": function (cm) {
                        if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
                    }
                }
            },
            jsFiles: [
                'mode/php/php.js',
                'mode/htmlembedded/htmlembedded.js',
                'addon/edit/matchbrackets.js',
                'addon/edit/closebrackets.js',
                'addon/edit/closetag.js',
                'addon/fold/xml-fold.js',
                'addon/fold/comment-fold.js',
                'addon/edit/matchtags.js',
                'mode/htmlmixed/htmlmixed.js',
                'addon/search/searchcursor.js',
                'addon/search/search.js',
                'addon/hint/show-hint.js',
                'addon/hint/anyword-hint.js',
                'addon/hint/html-hint.js',
                'addon/hint/css-hint.js',
                'addon/hint/xml-hint.js',
                'addon/hint/javascript-hint.js',
                'addon/lint/lint.js',
                'addon/lint/javascript-lint.js',
                'addon/lint/json-lint.js',
                'addon/lint/css-lint.js',
                'addon/lint/html-lint.js',
                'addon/customplugins/lint/csslint.js',
                'addon/customplugins/hint/htmlhint.js'
            ],
            cssFiles: [
                'theme/' + CODETHEME + '.css',
                'addon/dialog/dialog.css',
                'addon/hint/show-hint.css',
                'addon/lint/lint.css',
                'addon/fold/foldgutter.css',
            ]
        }
});

编辑：我现在设法在 Chrome 和 Firefox 中重新创建了它，方法是打开源代码编辑器，单击取消，再次打开源代码编辑器并单击确定。控制台中出现不同的错误：

Chrome: Uncaught DOMException: Failed to execute 'setStart' on 'Range': There is no child at offset 3.tinymce.min.js:5

火狐： IndexSizeError: Index or size is negative or greater than the allowed amounttinymce.mins.js:5

Answer 1

终于想出这个来做我自己。

问题不在于 CodeMirror 本身，而是 tinymce 的 setContent 函数。

此修复是使用 insertContent 函数，并在 tinymce.init

中添加额外设置

if(CMsettings.config.inlineFix) {
    editor.selection.select(editor.getBody(), true);
    editor.insertContent(codemirror.getValue().replace(cc, '<span id="CmCaReT"></span>'));
} else {
    editor.setContent(codemirror.getValue().replace(cc, '<span id="CmCaReT"></span>'));
}

这使得插入按钮可以工作，但取消按钮仍然有一些奇怪的光标行为，所以我最终复制并修改了整个插件以删除插入和取消按钮，并自己将它们添加到 html

Codemirror 插件 Tinymce 内联模式 IndexSizeError

Codemirror plugin Tinymce inline mode IndexSizeError

javascript

tinymce

codemirror

tinymce-plugins