ckeditor4 confliction with CodeMirror on mobile device only

[yeasherarafath]

This is an example of my code. Hopefully this code will help you to reproduce the bug.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.60.0/codemirror.min.css">
<script src="//cdn.ckeditor.com/4.19.1/full/ckeditor.js"></script>

<textarea id="codemirror">This is codemirror</textarea>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.60.0/codemirror.min.js"></script>

<script>
	  var editor = CodeMirror.fromTextArea($("#codemirror")[0]);
</script>	

Here I have included ckeditor.js and codemirror.js and using CodeMirror only. But when I click on CodeMirror editable content or focus on CodeMirror editable content the ckeditor enable automatically. But still the ckeditor is not initialized, just included.

And the most important think: this problem is happening when I am using mobile device or browser's inspect element's responsive mode.

Here is an example

[aashrith]

...

[KarolDawidziuk]

Hi @yeasherarafath, could you provide a working example that will show your issue?

You can use one of our samples to create the reproduction sample:

• CodePen: https://codepen.io/karoldawidziuk/pen/LYzJvdx
• JSFiddle: https://jsfiddle.net/Kratek_95/nhwe5uLq
• JSBin: https://jsbin.com/gubepar/edit?html,js,output
• StackBlitz: https://stackblitz.com/edit/ckeditor4-bug-report

[yeasherarafath]

Hi @KarolDawidziuk , thank you for your response. Here is my working example

https://ckeditor-bug-5336.000webhostapp.com/

To preproduce this issue try mobile device or browser's inspect element's responsive mode.

[KarolDawidziuk]

Hi @yeasherarafath and sorry for the late reply.

It looks like the CodeMirror creates contenteditable during the initialization and the CKEditor automatically initializes inline the editor when contenteditable is available.

To prevent it you can use the config option called disableAutoInline

CKEDITOR.disableAutoInline = true;

Please let us know if this helps.

[yeasherarafath]

Thank you @KarolDawidziuk for your lovely solution with explanation. Actually I had used this like this in my config.js CKEDITOR.editorConfig = function( config ) { config.disableAutoInline = true; // and this also // CKEDITOR.disableAutoInline = true; }) But didn't work. Now it's working after including before the editorConfig.

Can you tell me why config.disableAutoInline = true; was ignored in config.js?

Reference of config.disableAutoInline issue: https://stackoverflow.com/questions/41155788/ckeditor-ckeditor-disableautoinline-true-not-working

[KarolDawidziuk]

Hi @yeasherarafath, regarding to docs it looks like disableAutoInline might not be available at the time.

Using CKEDITOR.disableAutoInline = true; before editorConfig is also a proper way to handle it.

As the main issue with conflict was resolved I'm closing this issue.

[yeasherarafath]

Hi @KarolDawidziuk, recently I have updated to '4.20.1 (Full)'' and using CKEDITOR.disableAutoInline = true; on my config.js file, but facing the same issue as like before. Any Solution for this?

Console Log codemirror.min.js:1 Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. at dn (https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.60.0/codemirror.min.js:1:32822) at https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.60.0/codemirror.min.js:1:67867 at https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.60.0/codemirror.min.js:1:67896 at Ur (https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.60.0/codemirror.min.js:1:67951) at Kr (https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.60.0/codemirror.min.js:1:69292) at ri (https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.60.0/codemirror.min.js:1:74193) at HTMLDivElement.<anonymous> (https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.60.0/codemirror.min.js:1:131854)