Solved

help understanding CKEditor focus()

Posted on 2010-08-24
2
2,714 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 82

Accepted Solution

by:
leakim971 earned 500 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 82

Expert Comment

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

Featured Post

Secure Your Active Directory - April 20, 2017

Active Directory plays a critical role in your company’s IT infrastructure and keeping it secure in today’s hacker-infested world is a must.
Microsoft published 300+ pages of guidance, but who has the time, money, and resources to implement? Register now to find an easier way.

Question has a verified solution.

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

JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

685 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