Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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

share|improve this question
add comment

3 Answers

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.

share|improve this answer
    
Thanks Joseph, I'll update original post and investigate this command. Yes to both! –  dunc Dec 27 '11 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. –  dunc Dec 27 '11 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. –  Joseph Dec 28 '11 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/… –  dunc Dec 29 '11 at 17:41
add comment

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>
share|improve this answer
    
Did you read Joseph’s answer? –  toscho Dec 30 '11 at 17:28
1  
umm...I think I overlooked. Sorry :( –  Tareq Dec 30 '11 at 17:38
    
No problem Tareq, thanks for trying :) –  dunc Dec 30 '11 at 18:52
add comment

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

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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