WordPress & TinyMCE: Failed to load

0 Views

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.

Read More

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_enqueue_script('tinymce-external');

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

-> tinymce-external-config.js 

jQuery().ready(function() {
    jQuery('.editor_ui').tinymce({
        // Location of TinyMCE script
// ---> THIS LINE NEEDS TO BE CHANGED IF THE PLUGIN RENAMES
        script_url : '/dev/wp-content/plugins/sf-species-profiles/tiny_mce/tiny_mce.js',

        // General options
        theme : "advanced",
        skin : "wp_theme",
        language : "en",
        plugins:"tabfocus,spellchecker",
        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 

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

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

Post Views: 0

Related posts

Leave a Reply

3 comments

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

    <div>
    <label>Genus</label>
    <p>
        <?php 
        $content = '';
        if(isset($genus[0])) {
            $content = $genus[0];
        } ?>
        <?php wp_editor( stripslashes( $content ), 'genus'); ?>
        <span>Description</span>
    </p>
</div>

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