Hi, this is a rather specific case but i will try to explain it.
I am using CKEditor inline in a project. We have wrapped the initailisation in a jquery plugin and have added a functionanlity to add placeholder texts to empty editors, much like the placeholder attribute in HTML5. We do this by adding a span to the editable element with the attribute contenteditabel=false. When editable element is focused, this placeholder is removed and added again so that the cursor positions itself at the front of the element. This all works fine on every browser we support.
Now we have added SCAYT and use scayt_autoStartup=true. This has the effect that the cursor jumps to the right spot on focus, but you can no longer typ anything. Here is an example code that shows this behavior:
<!DOCTYPE html> <html> <head> <title>Test</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="//code.jquery.com/jquery-migrate-1.1.1.js"></script> <script src="/public/ckeditor/ckeditor.js"></script> <style> #editable, #editable2 { margin-left: 50px; } </style> </head> <body> <div class="container"> <h1>scayt_autoStartup : true</h1> <p id="editable" contenteditable="true"></p> <h1>scayt_autoStartup : false</h1> <p id="editable2" contenteditable="true"></p> </div> <script> CKEDITOR.disableAutoInline = true; var addPH = function() { $(this).prepend('<span contenteditable="false" class="ph">Placeholder</span>'); }; var hidePH = function() { $(this).find(".ph").remove(); } $("#editable").each(function() { var $this = $(this); $this.focus(function() { setTimeout(function() { hidePH.call($this.get(0)); addPH.call($this.get(0)); }, 5); }) CKEDITOR.inline(this, { scayt_autoStartup : true, scayt_sLang : 'de_DE', on : { instanceReady : function() { setTimeout(function() { addPH.call($this.get(0)); }, 5); } } }); }) $("#editable2").each(function() { var $this = $(this); $this.focus(function() { setTimeout(function() { hidePH.call($this.get(0)); addPH.call($this.get(0)); }, 5); }) CKEDITOR.inline(this, { scayt_sLang : 'de_DE', on : { instanceReady : function() { setTimeout(function() { addPH.call($this.get(0)); }, 5); } } }); }) </script> </body> </html>
Should this be reported as a bug? Or is there maybe some workaround that I could use?
Thanks in advance!
Richard