Codemirror插件Tinymce內嵌模式IndexSizeError

我在內容模式上使用tinymce在contenteditable div上。Codemirror插件Tinymce內嵌模式IndexSizeError

我之前使用過的CodeMirror tinymce插件（不是內聯模式）沒有問題，但它似乎在內聯模式下不能正常工作。我試過改變配置爲inline: false，它的工作原理。

點擊來源按鈕用CodeMirror打開HTML並且似乎沒問題。但是，當我點擊Ok來保存它，它似乎在Chrome和Firefox中工作正常，但在Safari中它增加了一個，我無法關閉模式（但是，我可以看到它已經改變了內容可編輯div），再次點擊Ok按鈕，它會增加另一個和控制檯錯誤。點擊取消或X按鈕只會增加控制檯錯誤。

在控制檯中我得到IndexSizeError: DOM Exception 1: Index or size was negative, or greater than the allowed valuetinymce.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 amounttinymce.mins.js:5

來源

2017-08-03 Oli B

終於設法弄清楚這一個是我自己。

問題不在於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-17 10:26:55

Codemirror插件Tinymce內嵌模式IndexSizeError

回答

相關問題