Question

我在内联模式中使用tinymce在一个可信的div上。

我之前使用过CodeMirror tinymce插件（非内联模式）没有任何问题，但它似乎无法在内联模式下正常工作。我尝试将配置更改为inline: false，但它确实有效。

单击源按钮打开带有CodeMirror的HTML，似乎没问题。但是，当我点击确定进行保存时，它似乎在Chrome和Firefox中正常工作，但在Safari中它添加了并且我无法关闭模式（但是，我可以看到它已经更改了可编辑div的内容，再次单击确定按钮，它会添加另一个和控制台错误。单击取消或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中重新创建了这个，打开源代码编辑器，单击取消，再次打开源编辑器并单击确定。控制台中的错误不同：

铬： 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 amount tinymce.mins.js:5

Answer 1

最后设法将这一个想象成我自己。

问题不在于CodeMirror本身，而在于实际上是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

1 个答案: