Solved

help fixing function to fire onkeyup with CKeditor

Posted on 2010-08-17
4
2,649 Views
Last Modified: 2013-11-19
On my page I have an instance of the CKeditor. When someone types a letter in the CKEditor I want to run the function makePreviewBody()

I tried it below using some info I found on another site but it's not working. Could someone take a look at my code and show me how I can make the function makePreviewBody() run with the onKeyUp event attached to the CKEditor?

In theory this is what I want, but this doesn't work:

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

<!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 CKEditor_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">
// Save for future reference
    //function GetContents(){
        // Get the editor instance that we want to interact with.
        //var oEditor = CKEDITOR.instances.editor1 ;

        // Get the editor contents
        //alert( oEditor.getData() ) ;   
        //document.getElementById('preview_body').innerHTML=( oEditor.getData() );
}
</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 class="ckeditor" cols="30" id="editor1" name="editor1" rows="10" onKeyUp="GetContents();" >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="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></td>
    </tr>
</table>

</body>
</html>

Open in new window

0
Comment
Question by:elliottbenzle
  • 3
4 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 33458785
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);
	}
	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() );
	}
</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

Assisted Solution

by:leakim971
leakim971 earned 500 total points
ID: 33459185
0
 
LVL 4

Author Closing Comment

by:elliottbenzle
ID: 33494038
Thank you.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 33494122
You're welcome! Thanks for the points!
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering 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

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
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.

840 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