Solved

help understanding CKEditor focus()

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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

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 …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn how to count occurrences of each item in an array.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

706 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now