Solved

help understanding CKEditor focus()

Posted on 2010-08-24
2
2,736 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

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…
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 …
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.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

751 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