Solved

help understanding CKEditor focus()

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

Does Powershell have you tied up in knots?

Managing Active Directory does not always have to be complicated.  If you are spending more time trying instead of doing, then it's time to look at something else. For nearly 20 years, AD admins around the world have used one tool for day-to-day AD management: Hyena. Discover why

Question has a verified solution.

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

Suggested Solutions

Preface In the first article: A Better Website Login System (http://www.experts-exchange.com/A_2902.html) I introduced the EE Collaborative Login System and its intended purpose. In this article I will discuss some of the design consideratio…
Shoutout to Emily Plummer (http://www.experts-exchange.com/members/eplummer26.html) for giving me this article! She did most of it, I just finished it up and posted it for her :)    Introduction In a previous article (http://www.experts-exchang…
Viewers will learn about basic arrays, how to declare them, and how to use them. Introduction and definition: Declare an array and cover the syntax of declaring them: Initialize every index in the created array: Example/Features of a basic arr…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

770 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