Add new post

Thu, 10/15/2009 - 08:37

Permalink

gliding-green-emu wrote:Hi,

Is there a limit to how many CK editors you can use on one page? I am using the following code

<textarea name="editor1" class="ckeditor"></textarea>

<textarea name="editor2" class="ckeditor"></textarea>

<textarea name="editor3" class="ckeditor"></textarea>

<textarea name="editor4" class="ckeditor"></textarea>

But it only shows two.

Try this:

<textarea name="editor1" class="ckeditor"></textarea>
   <script type="text/javascript">
      CKEDITOR.replace( 'editor1' );
      CKEDITOR.add            
   </script>

<textarea name="editor2" class="ckeditor"></textarea>
   <script type="text/javascript">
      CKEDITOR.replace( 'editor2' );
      CKEDITOR.add            
   </script>

<textarea name="editor3" class="ckeditor"></textarea>
   <script type="text/javascript">
      CKEDITOR.replace( 'editor3' );
      CKEDITOR.add            
   </script>

<textarea name="editor4" class="ckeditor"></textarea>
   <script type="text/javascript">
      CKEDITOR.replace( 'editor4' );
      CKEDITOR.add            
   </script>

<textarea name="editor5" class="ckeditor"></textarea>
   <script type="text/javascript">
      CKEDITOR.replace( 'editor5' );
      CKEDITOR.add            
   </script>

Dennis

Thu, 10/15/2009 - 12:32

Permalink

gliding-green-emu

Re: Multiple CK Editors

I have made my form very basic, something very strange is happening.

for example im simply calling 10 RTE.

<%for i = 1 to 10%>
      <textarea name="desc<%=i%>" class="ckeditor" cols="50" rows="10">test</textarea>
<%next%>

this works fine. but as soon as you add a form tag it only shows two

<%for i = 1 to 10%>
    <form>
      <textarea name="desc<%=i%>" class="ckeditor" cols="50" rows="10">test</textarea>
    </form>
<%next%>

Thu, 10/15/2009 - 18:43

Permalink

dtleahy

Re: Multiple CK Editors

Each form has to have a unique name (I'm not sure if you need the form ID, but if ID is used, it must be unique.) Plus, you need to call the javascript within the "for...next" loop that renames the ckeditor and instantiates it.

try something like this:

<%
for i = 1 to 10%>
   <form name="frmTesting<%=(i)%> id="frmTesting<%=(i)%> method="post" action="YourContentUpdateProc.asp">
      <textarea name="desc<%=(i)%>" class="ckeditor" cols="50" rows="10">test<%=(i)%></textarea>
      <script type="text/javascript">
         CKEDITOR.replace( 'desc<%=(i)%>' );
         CKEDITOR.add
     </script> 
     <p>
        <input type="submit" name="btnSubmit" value="Save Edit">
     </p>
   </form>
<%
next
%>

Wed, 10/21/2009 - 13:27

Permalink

gliding-green-emu

Re: Multiple CK Editors

Thanks for your reply. I seem to be having the same problem :cry:

, all that I have in my document is... Its not an ASP thing is it?

<script type="text/javascript" src="ckeditor/ckeditor.js"></script>

<%for i = 1 to 10%>
   <form name="frmTesting<%=i%>" id="frmTesting<%=i%>" method="post" action="YourContentUpdateProc.asp">
      <textarea name="desc<%=i%>" class="ckeditor" cols="50" rows="10">test <%=i%></textarea>
        <script type="text/javascript">
         CKEDITOR.replace( 'desc<%=i%>' );
         CKEDITOR.add
        </script> 
        <input type="submit" name="btnSubmit" value="Save Edit">
   </form>
<%next%>

Mon, 10/26/2009 - 03:40

Permalink

dtleahy

Re: Multiple CK Editors

Emu,

Here is the complete code for an ASP/VBScript page with ten CKEditors, generated programmatically in a loop. The only assumption here is that you have the ckeditor code properly uploaded to your site, and that it is in a folder called "ckeditor", right off the site root (if not, change Line 7 to reflect where you have the ckeditor.js code.) Name your page: Something.ASP

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Ten CKEditor Instances</title>
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
</head>

<body>
<%for i = 1 to 10%>
  
   <form name="frmTesting<%=(i)%> id="frmTesting<%=(i)%> method="post" action="YourContentUpdateProc.asp">
      <textarea name="desc<%=(i)%>" class="ckeditor" cols="50" rows="10">test<%=(i)%></textarea>
      <script type="text/javascript">
         CKEDITOR.replace( 'desc<%=(i)%>' );
         CKEDITOR.add
     </script>
     <p>
        <input type="submit" name="btnSubmit" value="Save Edit">
     </p>
   </form>
<%
next
%>
<br><br>


</body>
</html>

Mon, 10/26/2009 - 10:41

Permalink

gliding-green-emu

Re: Multiple CK Editors

Tried your code. Re-uploaded the latest CK editor, checked the path of the ckeditor (which is in the root folder) Still does not work =(

If you upload that script are you getting the same problem? Is anyone else getting this problem?

Mon, 10/26/2009 - 15:24

Permalink

dtleahy

Re: Multiple CK Editors

"Still does not work" -what error are you getting? Or, is the page loading without errors but not showing the ten CKEditor instances?

Yes, I did upload the page to my (shared hosting) server, and it does work. So, since the code works, I have to suspect that your installation of CKEditor files on your site has a problem. (To install on your server, did you: download the zip file of the latest 3.01 CKEditor, unzip on your local machine, then copy the entire ckeditor folder and all of its subfolders into a folder called "ckeditor" right off your root? I know there are optional files such as languages and alternate skins, etc. that you do not have to upload, but just to make sure all of the required files ARE there...)

Are you getting one or two CKEditors to show up on the page? If yes, (even one), try the various dropdown menus and functions/buttons. Does it all seem to work? If yes, then is this a Windows server, or a Linux server?

I just opened the page, and looked at the source code, and there were 2 errors in my code. (I am surprised that it loaded and ran with the errors, but it did.) In the HTML form tag, I forgot to close name and id with their final doublequotes.

So, for example on the 10th CKEditor, this was the rendered page source at runtime:

<form name="frmTesting10 id="frmTesting10 method="post" action="YourContentUpdateProc.asp">

      <textarea name="desc10" class="ckeditor" cols="50" rows="10">test10</textarea>
      <script type="text/javascript">
         CKEDITOR.replace( 'desc10' );
         CKEDITOR.add
     </script>
     <p>
        <input type="submit" name="btnSubmit" value="Save Edit">
     </p>
   </form>

and this is what it should have been:

<form name="frmTesting10" id="frmTesting10" method="post" action="YourContentUpdateProc.asp">

      <textarea name="desc10" class="ckeditor" cols="50" rows="10">test10</textarea>
      <script type="text/javascript">
         CKEDITOR.replace( 'desc10' );
         CKEDITOR.add
     </script>
     <p>
        <input type="submit" name="btnSubmit" value="Save Edit">
     </p>
   </form>

Not sure if a trailing equals sign is a legit form name or not (form name="frmTesting10 id="). I guess we would have found the error when we tried to actually glean data from the form, since the forms may not have had legitimate names, but anyway, oddly enough, the page did run.

Here is the corrected code (I stripped out "class" "rows" and "cols" from the form tag. I know rows and cols can cause some problems with CKEditor 3.0 { viewtopic.php?f=11&t=15900 }, though it seems to have been fixed in 3.01, and I don't know what you have in your ckeditor CSS class, so I wanted to eliminate that for you as well.

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Ten CKEditor Instances</title>

<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>

</head>

<body>
<%for i = 1 to 10%>
  
   <form name="frmTesting<%=(i)%>" id="frmTesting<%=(i)%>" method="post" action="YourContentUpdateProc.asp">
      <textarea name="desc<%=(i)%>" >test<%=(i)%></textarea>
      <script type="text/javascript">
         CKEDITOR.replace( 'desc<%=(i)%>' );
         CKEDITOR.add
     </script>
     <p>
        <input type="submit" name="btnSubmit" value="Save Edit">
     </p>
   </form>
<%
next
%>
<br><br>


</body>
</html>

And here is what the rendered page source code is like at runtime:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Ten CKEditor Instances</title>

<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>

</head>

<body>

  
   <form name="frmTesting1" id="frmTesting1" method="post" action="YourContentUpdateProc.asp">

      <textarea name="desc1" >test1</textarea>
      <script type="text/javascript">
         CKEDITOR.replace( 'desc1' );
         CKEDITOR.add
     </script>
     <p>
        <input type="submit" name="btnSubmit" value="Save Edit">
     </p>
   </form>

  
   <form name="frmTesting2" id="frmTesting2" method="post" action="YourContentUpdateProc.asp">

      <textarea name="desc2" >test2</textarea>
      <script type="text/javascript">
         CKEDITOR.replace( 'desc2' );
         CKEDITOR.add
     </script>
     <p>
        <input type="submit" name="btnSubmit" value="Save Edit">
     </p>
   </form>

  
   <form name="frmTesting3" id="frmTesting3" method="post" action="YourContentUpdateProc.asp">

      <textarea name="desc3" >test3</textarea>
      <script type="text/javascript">
         CKEDITOR.replace( 'desc3' );
         CKEDITOR.add
     </script>
     <p>
        <input type="submit" name="btnSubmit" value="Save Edit">
     </p>
   </form>

  
   <form name="frmTesting4" id="frmTesting4" method="post" action="YourContentUpdateProc.asp">

      <textarea name="desc4" >test4</textarea>
      <script type="text/javascript">
         CKEDITOR.replace( 'desc4' );
         CKEDITOR.add
     </script>
     <p>
        <input type="submit" name="btnSubmit" value="Save Edit">
     </p>
   </form>

  
   <form name="frmTesting5" id="frmTesting5" method="post" action="YourContentUpdateProc.asp">

      <textarea name="desc5" >test5</textarea>
      <script type="text/javascript">
         CKEDITOR.replace( 'desc5' );
         CKEDITOR.add
     </script>
     <p>
        <input type="submit" name="btnSubmit" value="Save Edit">
     </p>
   </form>

  
   <form name="frmTesting6" id="frmTesting6" method="post" action="YourContentUpdateProc.asp">

      <textarea name="desc6" >test6</textarea>
      <script type="text/javascript">
         CKEDITOR.replace( 'desc6' );
         CKEDITOR.add
     </script>
     <p>
        <input type="submit" name="btnSubmit" value="Save Edit">
     </p>
   </form>

  
   <form name="frmTesting7" id="frmTesting7" method="post" action="YourContentUpdateProc.asp">

      <textarea name="desc7" >test7</textarea>
      <script type="text/javascript">
         CKEDITOR.replace( 'desc7' );
         CKEDITOR.add
     </script>
     <p>
        <input type="submit" name="btnSubmit" value="Save Edit">
     </p>
   </form>

  
   <form name="frmTesting8" id="frmTesting8" method="post" action="YourContentUpdateProc.asp">

      <textarea name="desc8" >test8</textarea>
      <script type="text/javascript">
         CKEDITOR.replace( 'desc8' );
         CKEDITOR.add
     </script>
     <p>
        <input type="submit" name="btnSubmit" value="Save Edit">
     </p>
   </form>

  
   <form name="frmTesting9" id="frmTesting9" method="post" action="YourContentUpdateProc.asp">

      <textarea name="desc9" >test9</textarea>
      <script type="text/javascript">
         CKEDITOR.replace( 'desc9' );
         CKEDITOR.add
     </script>
     <p>
        <input type="submit" name="btnSubmit" value="Save Edit">
     </p>
   </form>

  
   <form name="frmTesting10" id="frmTesting10" method="post" action="YourContentUpdateProc.asp">

      <textarea name="desc10" >test10</textarea>
      <script type="text/javascript">
         CKEDITOR.replace( 'desc10' );
         CKEDITOR.add
     </script>
     <p>
        <input type="submit" name="btnSubmit" value="Save Edit">
     </p>
   </form>

<br><br>

</body>
</html>

If this still does not work, try a different DOCTYPE. Try "4.01 Transitional loose":

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTH,

Dennis

Mon, 10/26/2009 - 22:11

Permalink

gliding-green-emu

Re: Multiple CK Editors

Hi Dennis,

Thanks for your reply. Much appricated!

My settings are Windows Shared Server.
Downloaded, uncompressed and uploaded v3.01 to the root
drop down menus work fine

I think I've found where its going wrong.

Doesn't work in Google Chrome Browser

Works fine in Internet Explorer and Firefox.

Mon, 10/26/2009 - 22:35

Permalink

dtleahy

Re: Multiple CK Editors

Ahhhhhh! Well, good, at lest you are back in business.

I have played with Chrome a bit, and it has promise, but it would take a lot to get me to switch from Firefox at this point. (Obviously, they are an up-and-coming contender in the browser arena, and a percentage of site visitors are going to be using Chrome, so the pages have to work in Chrome. I'm actually surprised Chrome did not render the page properly. In this particular case, I'm guessing it was something odd in Chrome, rather than a CKEditor coding issue.)

As of this moment, my use for CKEditor is content management by admins, not the general site visitors. I'll tell my admin users (using CKEditor) to use Firefox. So far, I have the luxury of doing that.

Dennis

Tue, 10/27/2009 - 18:47

Permalink

gliding-green-emu

Re: Multiple CK Editors

Usually Chrome is fine. I think I'll be using Fire fox from now on then!

Thanks for your help Dennis!

Matt