As per other posts, I am trying to produce a customised WordPress installation as a CMS for my fishkeeping website.

On one of my custom post types (species, which displays information about a given species of fish) doesn't use the standard "Post" editor at all, instead it has numerous fields in meta boxes such as "Genus", "Species", "Diet", "Compatibility", etc.

As such, using WordPress' built-in TinyMCE installation was somewhat troublesome. However, eventually I did get it "working" (see answer here).

That was a couple of months back and I forgot that it was never functioning 100% correctly: the interface would bug out and display a 200px toolbar width on a 400px textarea. I think this is down to there being multiple instances of the toolbar on the page with different widths (I never forced a width in the initialisation of TinyMCE).

I'm now trying to deregister the default WordPress installation of TinyMCE so that I can use the TinyMCE jQuery package as per Andrew Jackman's post in this thread.

-> the plugin file

wp_register_script('tinymce-external', $this->plugin_url .'tiny_mce/jquery.tinymce.js', array('jquery'));

wp_register_script('tinymce-external-config', $this->plugin_url .'js/tinymce-config.js', array('tinymce-external'));

-> tinymce-external-config.js

jQuery().ready(function() {
        // Location of TinyMCE script
        script_url : '/dev/wp-content/plugins/sf-species-profiles/tiny_mce/tiny_mce.js',

        // General options
        theme : "advanced",
        skin : "wp_theme",
        language : "en",
        tab_focus : ':prev,:next',
        theme_advanced_layout_manager : "SimpleLayout",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_buttons1 : "bold,italic,underline,|,bullist,numlist,outdent,indent,blockquote,|,link,unlink,image,removeformat,charmap,spellcheck",
        //theme_advanced_buttons2 : "",
        //theme_advanced_buttons3 : ""

        // Example content CSS (should be your site CSS)
        content_css : "css/content.css",


-> the textarea

        <textarea name="genus" class="editor_ui"><?php if(isset($genus[0])) { echo esc_attr( $genus[0] ); } ?></textarea>

-> the resultant errors in firebug

"NetworkError: 404 Not Found - http://www.mywebsite.com/wp-admin/langs/en.js?ver=345-20111127" -> en.js?...0111127
Failed to load: http://www.mywebsite.com/wp-admin//langs/en.js -> jquery...r=1.7.1 (line 2)

"NetworkError: 404 Not Found - http://www.mywebsite.com/wp-admin/themes/advanced/editor_template.js?ver=345-20111127" -> editor...0111127
Failed to load: http://www.mywebsite.com/wp-admin//themes/advanced/editor_template.js -> jquery...r=1.7.1 (line 2)

"NetworkError: 404 Not Found - http://www.mywebsite.com/wp-admin/plugins/spellchecker/editor_plugin.js?ver=345-20111127" -> editor...0111127
Failed to load: http://www.mywebsite.com/wp-admin//plugins/spellchecker/editor_plugin.js -> jquery...r=1.7.1 (line 2)

"NetworkError: 404 Not Found - http://www.mywebsite.com/wp-admin/plugins/tabfocus/editor_plugin.js?ver=345-20111127" -> editor...0111127
Failed to load: http://www.mywebsite.com/wp-admin//plugins/tabfocus/editor_plugin.js -> jquery...r=1.7.1 (line 2

It looks like it's trying to find the TinyMCE plugins and languages files, but in the wrong directory, and I don't know how to change that. Is this a compatibility problem with WordPress; do I need to deregister the existing TinyMCE installation? I tried using wp_deregister_script('tinymce') (and tiny_mce) but nothing changed.

EDIT I am using WordPress 3.3 and all of the above refers to the admin area of a Custom Post Type I have created.

Thanks in advance,

3 Answers 3


Two questions: (1) Are you using WordPress 3.3 and (2) Is this on the backend? If the answer to both is yes, then you might be able to use the new wp_editor command.

  • Thanks Joseph, I'll update original post and investigate this command. Yes to both!
    – turbonerd
    Dec 27, 2011 at 13:15
  • 1
    Ahh, that would've worked brilliantly, if it weren't for this: Once instantiated, the WYSIWYG editor cannot be moved around in the DOM. What this means in practical terms, is that you cannot put it in meta-boxes that can be dragged and placed elsewhere on the page.
    – turbonerd
    Dec 27, 2011 at 13:16
  • I think that is a limitation with TinyMCE itself because of the way it replaces the textarea. I could be wrong, though. Dec 28, 2011 at 13:16
  • Yes, that would make sense. I hope it isn't the case however, or I'll have to look into other WYSIWYG editors. Well, truth be told, I've already done that - and failed miserably!: stackoverflow.com/questions/8636268/…
    – turbonerd
    Dec 29, 2011 at 17:41

WordPress 3.3 has a nice built-in function. Try this

        $content = '';
        if(isset($genus[0])) {
            $content = $genus[0];
        } ?>
        <?php wp_editor( stripslashes( $content ), 'genus'); ?>
  • Did you read Joseph’s answer?
    – fuxia
    Dec 30, 2011 at 17:28
  • 1
    umm...I think I overlooked. Sorry :(
    – Tareq
    Dec 30, 2011 at 17:38

As it has already been written by others, TinyMCE might have a limitation that it can not be moved around in the DOM (which makes sense somehow).

However, next to the DOM which is structure only, there is representation.

So what do you think about inserting <div> placeholder containers inside your dragable metaboxes and each one a counter-part <div>s that are in a fixed position inside the DOM and that are absolutely positioned above the said placeholder containers.

Their position only needs to be updated when the metaboxes are moved / hidden etc., which should be able to track with some jQuery javascript code.

(This is more a comment than a solution but probably it's useful.)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.