Thanks for a great editor.
I would like to setup the editor with default text eg. "Text required." Then when the editor gets the focus, I want to clear the default text leaving the editor blank for user to begin typing.
The code I'm using works on Firefox 3.6 and IE 8. I'm using Ckeditor 3.4.1 revision 5892.
In Opera 10.62 it clears the editor, but leaves "undefined", "NaN" or some other number in the editor body. The log shows execution stops in the setData() call.
And in Chrome 6.0.472.63... well all the scaffolding statements are logged, but it crashes with an "Aw Snap" error.
Anyway, before I file any bug reports, I'd like to get feedback on any obvious errors I'm making. Perhaps I'm implementing the callback incorrectly. There's lots of scaffolding statements just to show where the code is at.
Thanks.
I would like to setup the editor with default text eg. "Text required." Then when the editor gets the focus, I want to clear the default text leaving the editor blank for user to begin typing.
The code I'm using works on Firefox 3.6 and IE 8. I'm using Ckeditor 3.4.1 revision 5892.
In Opera 10.62 it clears the editor, but leaves "undefined", "NaN" or some other number in the editor body. The log shows execution stops in the setData() call.
And in Chrome 6.0.472.63... well all the scaffolding statements are logged, but it crashes with an "Aw Snap" error.
Anyway, before I file any bug reports, I'd like to get feedback on any obvious errors I'm making. Perhaps I'm implementing the callback incorrectly. There's lots of scaffolding statements just to show where the code is at.
Thanks.
<html>
<head>
<title>Ckeditor Callback Test</title>
<script type="text/javascript" src="/javascripts/ckeditor/ckeditor.js">
</script>
</head>
<body>
<textarea id="editor" name="editor">
</textarea>
<script language="JavaScript" type="text/javascript">
CKEDITOR.replace('editor',
{
on :
{
instanceReady : function( ev )
{
console.log("Start instanceReady");
CKEDITOR.instances.editor.on( 'focus', function initializeBody ()
{
console.log("Got focus...");
var ckbody = CKEDITOR.instances.editor;
var data = ckbody.getData();
var pat = /<em>Text required\.<\/em>/;
if ( pat.test(data) )
{
console.log("Clear data...");
ckbody.setData( '' );
// ckbody.setData( '', function() { this.focus(); } ); // I do want focus to remain in editor but want to eliminate this variable for now...
console.log("Data cleared");
ckbody.removeListener( 'focus', initializeBody ); // no need to call again
console.log("Listener removed");
};
console.log("End focus callback");
});
console.log("Set editor with default data");
var ckbody = CKEDITOR.instances.editor;
ckbody.setData( "<em>Text required.</em>" );
ckbody.resetDirty();
}}});
</script>
</body>
</html>
Re: Problems with callback "focus"
To review, I want the editor to have a default string AND have that text selected so it's automatically deleted on user input via keyboard or mouse eg. pasted text.
For now I skipped using the 'newpage' function as it puts the focus in the editor. Setting startupFocus to false didn't work and this isn't a big issue for now.
The selection plugin has a 'selectAll' function which is a button in the UI. Unfortunately this function cannot be called from instanceReady; it can only be called from an eventHandler.
Which events to register for? I registered two events; keyboard and focus. Keyboard works great. When I press TAB to give focus to the editor, the text is selected. Any subsequent keystrokes will show up in editor deleting the text.
But what happens when someone clicks on the editor text area? This is where it gets subtle.
Case A: The user clicks on the string itself - the string is highlighted. They can paste or type and the default text will be deleted.
Case B: The user clicks on an empty part of the editor where there is no text (eg. in middle of text area.) The text doesn't get highlighted and the cursor sits after the last character of text. The event handler is still called, but for some reason the text doesn't get highlighted.
Actually it's even more subtle than that. When I step through the code with Firebug, I see that the text *is* highlighted initially, but by the time ckeditor is done with all its callbacks, the text becomes unhighlighted.
I'm not sure why this is. It may have to do with the selection ranges. The mouse clicked on an area outside of the text and therefore ckeditor won't select text? Thoughts?
CKEDITOR.replace('editor', { on : { instanceReady : function( ev ) { this.setData( "<em>Text required.</em>" ); } } }); CKEDITOR.instances.editor.on( 'key', function initializeBody () { console.log("keyboard input"); this.removeListener( 'key', initializeBody ); this.execCommand( 'selectAll' ); }); CKEDITOR.instances.editor.on( 'focus', function initializeBody2 () { console.log("focus input"); // to test keep event on to try different cases // this.removeListener( 'focus', initializeBody2 ); this.execCommand( 'selectAll' ); });Re: Problems with callback "focus"
So I made this workaround:
var clicou='nao'; var intervalo=0; function limpar( ) { // alert(clicou); if(clicou=='sim'){ var texto=window.CKEDITOR.instances['RichText'].getData(); var texto2=texto.replace('Descreva aqui a sua solicitação detalhadamente para agilizar o atendimento:',''); window.CKEDITOR.instances['RichText'].setData(texto2); window.CKEDITOR.instances['RichText'].focus(); clearInterval ( intervalo ); } } limpar(); intervalo=setInterval("limpar()",50); window.CKEDITOR.instances['RichText'].on('focus', function(){ clicou='sim'; });