Ckeditor for wordpress on custom admin page

Question

I have the plugin CKEditor for Wordpress installed and want to show a CKEditor on a custom admin page I made. I use the wordpress function wp_editor() to show it.

wp_editor("initial content", "uniqueid");

The problem is it shows a completely white editor instead of the CKEditor (so: a large white rectangle with a HTML and Visual above). It produces the following html on my page (I left out the "HTML" and "Add Media" button):

<div id="wp-uniqueid-wrap" class="wp-editor-wrap tmce-active"><link rel="stylesheet" id="editor-buttons-css" href="/wp-includes/css/editor.min.css?ver=4.1.1" type="text/css" media="all">
    <div id="wp-uniqueid-editor-tools" class="wp-editor-tools">
        <a id="uniqueid-tmce" class="hide-if-no-js wp-switch-editor switch-tmce" onclick="switchEditors.switchto(this);">Visual</a>
    </div>
    <div id="wp-uniqueid-editor-container" class="wp-editor-container">
        <textarea class="wp-editor-area theEditor" rows="10" cols="40" name="uniqueid" id="uniqueid">&lt;p&gt;initial content&lt;/p&gt;</textarea>
    </div>
</div>

Only when I click the "Visual" tab I get the CKEditor. Only then does it look exactly like the one in my regular admin pages (Posts and Pages).

So, my question is what should I add to my custom admin page or to my custom functions to have the CKEditor appear on a custom admin page like it appears on the "edit post" and "edit page" pages, without the user having to click the Visual tab to show the editor and its content?

Or, the other way around, which code is added to the regular "edit post" and "edit page" pages in order for the CKEditor to show up normally?

EDIT: I managed to get it work partly. There is still something bugging me. I added the following after the wp_editor() call:

<script>
    window.onload = function(){
        CKEDITOR.replace( "uniqueid" );
    };
</script>

Now I see the editor.

I didn't get your problem, yet ? Can you give more specific information ? — Eko Junaidi Salam
the problem: wp_editor() gives me an empty, fully white editor. No text, no button, only two empty tabs and a white rectangle where the editor is supposed to be. I want the CKEditor to appear. What php or javascript do I need? — Klaassiek
Please provide a code snippet to give more detail, what the problem is.. — Eko Junaidi Salam
The problematic code is: wp_editor(); Although the ckeditor-plugin is installed and active, it does not appear correctly. I'll update my question to incluse some html generated by wp_editor(). Maybe that demonstrates the problem and what more code I need. — Klaassiek

James M James M · Accepted Answer · 2015-11-23T21:23:17

I had the same issue with wp_editor() not displaying multiple TinyMCE editors on custom fields in Wordpress, as they all had the same class - so I added both 'wp_create_nonce($name)' and 'wp_create_nonce($this->id)'

<?php wp_editor($value, 'editor-'. wp_create_nonce($name) . wp_create_nonce($this->id) .'', $settings = array('textarea_name' => $name)); ?>

The nonce is generated based on the current time, the $action argument, and the current user ID.

Ckeditor for wordpress on custom admin page

1 Answers