2

我在可内容编辑的 div 上以内联模式使用 tinymce。

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

单击Source按钮打开带有 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

4

1 回答 1

0

终于设法弄清楚这个是我自己。

问题不在于 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

于 2017-08-17T10:26:55.863 回答