Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

help understanding CKEditor focus()

Posted on 2010-08-24
2
Medium Priority
?
2,860 Views
Last Modified: 2013-11-19
For about a week now I've been trying to run the run a function when my instance of CKEditor receives focus. I've been trying this:

<textarea class="ckeditor" cols="30" id="editor1" name="editor1" rows="10" onFocus="editorReset();" >Enter the body text of your ad here.</textarea>

Where I want to run the function "editorReset();" onFocus, but this doesn't work.  Then today I found this in the CKEditor documentation:


focus(editor)
Fired when the editor instance receives the input focus.

Fired when the editor instance receives the input focus.
Defined in: focusmanager.js.

NO EXAMPLE AVAILABLE

Parameters:
{CKEDITOR.eventInfo} e
    The standard event object passed to event listeners.
{CKEDITOR.editor} e.editor
    The editor instance.

I think this is what I'm looking for, but I'm not familiar enough with Javascript to know how to implement it. Does it go in the config.js file? Below is my config.js file and I've included my page code. Could someone show me how to integrate the above code to run the "editorReset();" function onFocus? Thanks a bunch.


/*
Copyright (c) 2003-2009, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/

CKEDITOR.editorConfig = function( config )
{
      // Define changes to default configuration here. For example:
      // config.language = 'fr';
      // config.uiColor = '#AADC6E';
      config.toolbar = 'Full';  
      
      config.toolbar_Full = [ ['Copy','Paste','PasteText','PasteFromWord', 'SpellChecker', 'Scayt'],     ['Undo','Redo'] ];  
      
      config.toolbar_Basic = [     ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About'] ];
      
      config.resize_enabled = false;
      
      config.width = '286px';
      
      config.scayt_autoStartup = true;
      
      config.removePlugins = 'elementspath';
      
};




<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<HEAD><TITLE>Product Spotlight Submission</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<title>ENR Automated Advertising Example</title>

<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
    
<%
Dim resp
resp = request.querystring("resp")
%>    
    
<!-- CKEditor include files -->
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script src="SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>
<link href="ckeditor/_sample/sample.css" rel="stylesheet" type="text/css"/>
<!-- End CKEditor include files -->
    
    <!-- create title preview -->
<script type="text/javascript">
	function makePreview(divId,txtField){
	document.getElementById( divId ).innerHTML=document.enrAd[txtField].value;
	}
</script>
	<!-- end create title preview -->
    
        <!-- create body preview -->
<script type="text/javascript">
	function makePreviewBody(){
	document.getElementById('preview_body').innerHTML=CKEDITOR.instances.editor1.getData();
	}
</script>
	<!-- end create body preview -->
    
<script type="text/javascript">
    function editorReset()
{
initString = "type your ad here";
if( CKEDITOR.instances.editor1.getData() == initString )
onFocus="CKEDITOR.instances.editor1.setData('');"
}
</script>    
	
<script type="text/javascript">
	function ClearField(field_name) {
		document.enrAd[field_name].value= "";
		document.enrAd[field_name].style.color= "black";
	Clearvideoname = function() {
	}
	}
</script>

<style type="text/css">
<!--
.title_overlay {
	background-image: url(product_images/title_field.jpg);
	height: 26px;
	width: 290px;
	z-index: 1000;
	padding-top: 4px;
	background-repeat: no-repeat;
	padding-left: 10px;
}
.blank_field {
	font-size: 14px;
	font-weight: bold;
	width: 280px;
	border: none;
	background: none;
	background-image: none;
	color: #999999;
}
.body_field {
	border: none;
	background: none;
	background-image: none;
	font-size: 14px;
	font-weight: normal;
	width: 360px;
}

.cke_contents {
height: 150px !important;
width: 300px !important;
}
.center_n_justify {
	padding-right: 5%;
	padding-left: 5%;
	padding-top: 10px;
	padding-bottom: 15px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: normal;
	color: #000000;
	text-decoration: none;
	width: 250px;
	text-align: justify;
}
.preview_title {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
	font-weight: bold;
	color: #000000;
	text-decoration: none;
	text-align: left;
	margin: 0px;
	clear: both;
	line-height: normal;
	padding-top: 8px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
.center_entrybox {
	padding-top: 10px;
	padding-right: 5px;
	padding-bottom: 10px;
	padding-left: 5px;
}
.preview_body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: normal;
	color: #000000;
	margin: 0px;
	padding: 0px;
	clear: both;
	line-height: normal;
}
p {
	margin: 0px;
	padding: 0px;
}
.validation_top_padding {
	margin-top: 7px;
}
.style1 {color: #FF0000}
-->
</style>
<link href="SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css" />
</head>

<body onload="MM_preloadImages('product_images/submit_button_on.jpg')">

  <table width="595" border="1" cellspacing="0" cellpadding="0" onClick="makePreviewBody();makePreview('preview_title','title_field');">
    <tr>
      <td width="307" height="200">
      <div class="center_entrybox">
      <form id="enrAd" name="enrAd" method="post" action="email_sender.asp">
  <div class="title_overlay">
      <span id="sprytextfield1">
      <input name="email_field" type="text" class="blank_field" id="email_field" onFocus="ClearField('email_field');" />
      <div class="validation_top_padding">
      <span class="textfieldRequiredMsg">
        * Enter an email address.</span><span class="textfieldInvalidFormatMsg">
          * Not a valid email address.</span></div></span>    </div>
<br />

  
  <div class="title_overlay">
<span id="sprytextfield2">
      <input name="title_field" type="text" class="blank_field" id="title_field" onFocus="ClearField('title_field');" onchange="makePreviewBody();makePreview('preview_title','title_field');"/>
      <div class="validation_top_padding">
      <span class="textfieldRequiredMsg">* Enter a title for your ad.</span></div></span>  </div><br>

  <textarea class="ckeditor" cols="30" id="editor1" name="editor1" rows="10" onFocus="editorReset();" onKeyUp="makePreviewBody();" >Enter the body text of your ad here.</textarea>
    <br>
    <br>
    <div class="center_button">
    <!-- <a href="#" class="button" onclick="document.getElementById('enrAd').submit();" ></a> -->
    </div>
      <%
    If (resp = "x") Then
	response.write "<div align=""center""><span class=""style1"">Thank you. <br />We have received your submission.</span><br /></div>"
	End if
    %>
     
    <label>
    <div align="center">
      <INPUT name="Submit" TYPE="image" id="Submit" SRC="product_images/submit_button_off.jpg" ALT="Submit Form" WIDTH="173" HEIGHT="30" BORDER="0">
    </div>
    </label>
    <div align="center"><br />
    </div>
      </form>      </td>
      <td width="282" valign="top"><div class="center_n_justify">
        <p><img src="product_images/line_break.jpg" width="250" height="3" /><br />
        <div class="preview_title" id="preview_title"></div>
        <div class="preview_body" id="preview_body"></div>
        <br />
          <img src="product_images/line_break.jpg" alt="" width="250" height="3" /></p>
      </div>
    </div>      </td>
    </tr>
</table>

  <script type="text/javascript">
<!--
var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1", "email", {hint:"Enter your email address", validateOn:["blur", "submit"]});
var sprytextfield2 = new Spry.Widget.ValidationTextField("sprytextfield2", "none", {hint:"Enter your ad title", validateOn:["blur", "submit"]});
//-->
</script>
</body>
</html>

Open in new window

0
Comment
Question by:elliottbenzle
  • 2
2 Comments
 
LVL 83

Accepted Solution

by:
leakim971 earned 2000 total points
ID: 33518072
Use :

            if(editor) editor.destroy(true);
            editor = CKEDITOR.replace("editor1");
            editor.on("focus",onFire);


Work for me :


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>Product Spotlight Submission</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<!-- CKEditor include files -->
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<link href="ckeditor/_sample/sample.css" rel="stylesheet" type="text/css"/>
<!-- End CKEditor include files -->
<script type="text/javascript">
	function FCKEditor_OnComplete( editorInstance ) {
		if (document.all) {      
			// IE
			editorInstance.EditorDocument.attachEvent("onkeyup", makePreviewBody) ;
		} else {
			// other browser
			editorInstance.EditorDocument.addEventListener( 'keyup', makePreviewBody, true ) ;
		}   
	}
</script>
<!-- create title preview -->
<script type="text/javascript">
	function makePreview(divId,txtField){
		document.getElementById( divId ).innerHTML=document.enrAd[txtField].value;
	}
</script>
<!-- end create title preview -->
<!-- create body preview -->
<script type="text/javascript">
	function makePreviewBody(){
		document.getElementById('preview_body').innerHTML=CKEDITOR.instances.editor1.getData();
	}
</script>
<!-- end create body preview -->
<script type="text/javascript">
	var editor;
	window.onload = function() {
		if(editor) editor.destroy(true);
		editor = CKEDITOR.replace("editor1");
		editor.on("key",GetContents); // previous question
		editor.on("focus",onFire);
	}
	function GetContents(){
		// Get the editor instance that we want to interact with.
		//var oEditor = CKEDITOR.instances.editor1 ;
		// Get the editor contents
		//alert( oEditor.getData() ) ;
		alert("this is an hold up!");
		//document.getElementById('preview_body').innerHTML=( oEditor.getData() );
	}
	function onFire() {
		alert("don't focus me!");
	}
</script>
<style type="text/css">
<!--
.title_overlay {
    background-image: url(product_images/title_field.jpg);
    height: 26px;
    width: 290px;
    overflow: hidden;
    z-index: 1000;
    padding-top: 4px;
    background-repeat: no-repeat;
    padding-left: 10px;
}
.title_field {
    font-size: 14px;
    font-weight: bold;
    width: 280px;
    border: none;
    background: none;
    background-image: none;
}
.body_field {
    border: none;
    background: none;
    background-image: none;
    font-size: 14px;
    font-weight: normal;
    width: 360px;
}
.body_overlay {
    background-image: url(product_images/text_field.jpg);
    background-repeat: no-repeat;
    height: 180px;
    width: 280px;
    padding-top: 10px;
    padding-right: 11px;
    padding-bottom: 10px;
    padding-left: 9px;
}
.cke_contents {
height: 150px !important;
width: 300px !important;
}
.center_n_justify {
    padding-right: 5%;
    padding-left: 5%;
    padding-top: 10px;
    padding-bottom: 15px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: normal;
    color: #000000;
    text-decoration: none;
    width: 250px;
    text-align: justify;
}
.preview_title {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-style: normal;
    font-weight: bold;
    color: #000000;
    text-decoration: none;
    text-align: left;
}
.preview_body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: normal;
    color: #000000;
}
-->
</style>
</head>
<body>
<table width="595" border="1" cellspacing="0" cellpadding="0">
    <tr>
    <td width="307">
    <form id="enrAd" name="enrAd" method="post" action="">
        <div class="title_overlay">
            <div><label><input name="title_field" type="text" class="title_field" id="title_field" onKeyUp="makePreview('preview_title','title_field');" /></label></div>
        </div>
        <br>
        <input name="editor1x" type="text" class="ckeditorx" id="editor1x" onChange="makePreviewBody();" />
        <textarea cols="30" id="editor1" name="editor1" rows="10" >Enter the body text of your ad here.</textarea>
        <br />
        <br />
    </form>
    </td>
    <td width="282" valign="top"><div class="center_n_justify">
        <p><img src="ckeditor/_samples/product_images/line_break.jpg" width="250" height="3" /><br />
        <div class="preview_title" id="preview_title"></div>
        <div class="preview_body" id="preview_body"></div>
        <br />
        <p><img src="ckeditor/_samples/product_images/line_break.jpg" alt="" width="250" height="3" /></p>
        </div>
    </td>
    </tr>
</table>
</body>
</html>

Open in new window

0
 
LVL 83

Expert Comment

by:leakim971
ID: 33630806
Thanks for the points!
0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction Since I wrote the original article about Handling Date and Time in PHP and MySQL several years ago, it seemed like now was a good time to update it for object-oriented PHP.  This article does that, replacing as much as possible the pr…
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
Viewers will learn about arithmetic and Boolean expressions in Java and the logical operators used to create Boolean expressions. We will cover the symbols used for arithmetic expressions and define each logical operator and how to use them in Boole…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

783 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question