2017-08-03 22 views
2

私はcontenteditable divでインラインモードでtinymceを使用しています。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

を取得コンソールで

、動作しているようですが、私はまだコンソールエラーに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', 
      ] 
     } 
}); 

編集:Iソースエディタを開き、キャンセルをクリックしてソースエディタを再度開き、[OK]をクリックすることで、ChromeとFirefoxでこれを再現できました。しかしコンソールで別のエラー:

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

のFirefox: IndexSizeError: Index or size is negative or greater than the allowed amounttinymce.mins.js:5

答えて

0

が最後にこの1つが出て自分自身も把握することができました。

問題はCodeMirror自体ではなく、実際にはtinymceのsetContentの機能です。

このため、この修正プログラムは、これは、挿入ボタンの作業が、キャンセルボタンがまだカーソルでいくつかの奇妙な振る舞いを持っていた作られた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>')); 
} 

を代わりにinsertContent機能を使用して、余分な設定を追加しましただから私は、挿入とキャンセルのボタンを削除し、HTMLで自分自身を追加するプラグイン全体を複製して変更することになった

関連する問題