[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 421
  • Last Modified:

ckeditor is messing up my javascript

I have a page which is using javascript to take the value of a text area and displays it in a div tag. It's like a preview box for the user. Everything works fine, but when I try to turn the text area into an instance of CKEditor my javascript stops working. Any ideas what is causing this? or what I can do to fix it?

Thanks


my javascript function:
<script type="text/javascript">
      function makePreviewBody(txtField){
      document.getElementById('preview_body').innerHTML=document.getElementById('editor1').value;
      }
</script>



<!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>
	<script src="ckeditor/_smaples/sample.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(txtField){
	document.getElementById('preview_body').innerHTML=document.getElementById('editor1').value;
	}
</script>
	<!-- end create body preview -->

<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" onKeyDown="makePreview('preview_title','title_field');" />
      </label>
    </div>
  </div><br>
  <!--<input name="editor1" type="text" class="ckeditor" id="editor1" onChange="makePreview('preview_body','editor1');" />-->

  <textarea class="ckeditor" cols="30" id="editor1" name="editor1" rows="10" onKeyDown="makePreviewBody();" >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
elliottbenzle
Asked:
elliottbenzle
1 Solution
 
OnthraxCommented:
There is a table cell with id cke_contents_editor1 which has a textfield containing the source of the editor. That's the textfield you need to send to your function. That should work.
0

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now