CODEWITHSUNDEEP
javascriptckeditor
Maik Klein
Maik Klein

Reputation: 16158

CKEditor - Does not show up

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?

enter image description here

Upvotes: 5

Views: 28861

Answers (8)

Bojidar Stanchev
Bojidar Stanchev

Reputation: 555

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.

Upvotes: 0

ajay mishra
ajay mishra

Reputation: 80

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

Upvotes: 0

connect2krish
connect2krish

Reputation: 159

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>

Upvotes: 0

luhuiya
luhuiya

Reputation: 2221

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

Upvotes: 0

Reed Jones
Reed Jones

Reputation: 1393

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....

Upvotes: 0

sourcecode
sourcecode

Reputation: 4601

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")
 });

Upvotes: 1

Nikunj Patel
Nikunj Patel

Reputation: 3

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>

Upvotes: 0

Gangnam
Gangnam

Reputation: 108

You just need to use this script

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

Upvotes: 8

Related Questions