I am trying to integrate the ckeditor into my website written in java with play2.

Now I downloaded the javascript files and read though the samples.

I figured that the important part is ckeditor.js

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

I also used the exact same form from the samples

<form action="sample_posteddata.php" method="post">
        <label for="editor1">
            CKEditor using the <code>docprops</code> plugin and working in the Full Page mode:</label>
        <textarea cols="80" id="editor1" name="editor1" rows="10">&lt;html&gt;&lt;head&gt;&lt;title&gt;CKEditor Sample&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;&lt;/body&gt;&lt;/html&gt;</textarea>
        <script type="text/javascript">
        //<![CDATA[

            CKEDITOR.replace( 'editor1',
                {
                    fullPage : true,
                    extraPlugins : 'docprops'
                });

        //]]>
        </script>
    <p>
        <input type="submit" value="Submit" />
    </p>
</form>

But it doesn't work, it just renders a normal textarea. I am using twitter bootstrap + jquery 1.7.1.

Maybe I overlooked an important part?

I am trying to integrate the ckeditor into my website written in java with play2.

Now I downloaded the javascript files and read though the samples.

I figured that the important part is ckeditor.js

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

I also used the exact same form from the samples

<form action="sample_posteddata.php" method="post">
        <label for="editor1">
            CKEditor using the <code>docprops</code> plugin and working in the Full Page mode:</label>
        <textarea cols="80" id="editor1" name="editor1" rows="10">&lt;html&gt;&lt;head&gt;&lt;title&gt;CKEditor Sample&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;&lt;/body&gt;&lt;/html&gt;</textarea>
        <script type="text/javascript">
        //<![CDATA[

            CKEDITOR.replace( 'editor1',
                {
                    fullPage : true,
                    extraPlugins : 'docprops'
                });

        //]]>
        </script>
    <p>
        <input type="submit" value="Submit" />
    </p>
</form>

But it doesn't work, it just renders a normal textarea. I am using twitter bootstrap + jquery 1.7.1.

Maybe I overlooked an important part?

• javascript
• ckeditor

• 1 Oh.. well yeah, Uncaught ReferenceError: CKEDITOR is not defined but the ckeditor.js is working properly, maybe I uploaded the wrong ckeditor.js file? The size of mine is 367kb – Maik Klein Commented Aug 28, 2012 at 20:41
• 2 No, ckeditor.js is not working properly if you have that error. Verify that the server is sending the right content and that you have put the file before the call to CKEDITOR.replace – AlfonsoML Commented Aug 29, 2012 at 7:01

8 Answers 8

You just need to use this script

<script type="text/javascript">
    CKEDITOR.replace("editor1");
</script>

If you get problem to setup ckeditor, may be your page load slowly . Show you need call CKEDITOR.replace("editor1"). When you use backbone.js , you will get this problem . Hope following trips will help you.

code

 jQuery(document).ready(function() {
  CKEDITOR.replace("editor1")
 });

If the source path of the ckeditor.js file is not correct then you may get the error "CKEDITOR not defined". Try this.....

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

I had a similar problem, it had to do with the property CKEDITOR.basePath if you look in the console and see an error like Uncaught TypeError: Cannot set property 'dir' of undefined that means you have to set the basePath property to the correct location....

i have found the exact similar condition, and it looks like the element need to have id attributes in order to work

I think you need more than ckeditor.js. Add these resources as well and it should work.

<link rel="stylesheet" href="assets/css/ckeditor/contents.css" rel="stylesheet">
<link rel="stylesheet" href="assets/css/ckeditor/skins/boostrap/editor.css" rel="stylesheet">
<link rel="stylesheet" href="assets/css/ckeditor/skins/boostrap/editor_gecko.css" rel="stylesheet">
<script src="assets/js/ckeditor/ckeditor.js" type="text/javascript"></script>
<script src="assets/js/ckeditor/styles.js" type="text/javascript"></script>
<script src="assets/js/ckeditor/config.js" type="text/javascript"></script>
<script src="assets/js/ckeditor/lang/en.js" type="text/javascript"></script>

i got solution and it works inside the controller of your view and you should post your script code inside the controller code

This is pretty much what you need when just including ckeditor.js doesn't work:

<script>
            var CKEDITOR_BASEPATH = window.location.origin + '/.../CKEditor/';
</script>

It's described in the documentation here: http://docs.ckeditor.com/#!/guide/dev_basepath

This solved my problem when i put it in the head section of my html.