Support » Plugins » Adding rich text editing to your plugin?

  • kherge

    (@kherge)


    Is there any way to use the built-in rich text editor in a plugin and process the given text when it is submitted?

    I tried the_editor() function straight, but it does not seem to be working right. I get a simple text editor, but the HTML link produces a JavaScript editor.

Viewing 14 replies - 1 through 14 (of 14 total)
  • Hi,

    I came across your post a while back, I was trying to do that too.

    Haven’t found an answer but I did work it out from the code. So here it is.

    /** In main plugin file **/
    
    add_action('admin_print_scripts', 'do_jslibs' );
    add_action('admin_print_styles', 'do_css' );
    
    function do_css()
    {
        wp_enqueue_style('thickbox');
    }
    
    function do_jslibs()
    {
        wp_enqueue_script('editor');
        wp_enqueue_script('thickbox');
        add_action( 'admin_head', 'wp_tiny_mce' );
    }
    
    /** Then wherever needed **/
    <div id="poststuff">
        <?php the_editor('<h2>Some content</h2>','content'); ?>
        /* 'content' is the id of the control  and the name of the
            hidden textarea created.*/
    </div>

    Note: if the id is different than ‘content’ it doesn’t automatically load the visual mode for some reason. That can be fixed with a call to switchEditors.go(‘theid’, ‘tinymce’); after the document is ready (jQuery.ready(…));

    Hope this helps someone one day

    Ben

    Nice that worked great. The only thing I needed to add was the media-upload Javascript file so that the media library popup would both be the right size and be able to insert an image back into the editor (Firefox reported a “win.send_to_editor is not a function” error without it).

    function do_jslibs()
    {
    	wp_enqueue_script('editor');
    	wp_enqueue_script('thickbox');
    	wp_enqueue_script('media-upload');
    	add_action( 'admin_head', 'wp_tiny_mce' );
    }

    Man thank you so much, this was killing me, I couldn’t find the answer anywhere.

    Nice job!! Thank you, it was a very frustrating problem for me.

    I found a simplified version that seems to work quite well.

    I found the answer here.

    To sum it up for recent version of WP (2.7, 2.8), In your plugin php file, add the following filter and function :

    add_filter('admin_head','ShowTinyMCE');
    function ShowTinyMCE() {
    	// conditions here
    	wp_enqueue_script( 'common' );
    	wp_enqueue_script( 'jquery-color' );
    	wp_print_scripts('editor');
    	if (function_exists('add_thickbox')) add_thickbox();
    	wp_print_scripts('media-upload');
    	if (function_exists('wp_tiny_mce')) wp_tiny_mce();
    	wp_admin_css();
    	wp_enqueue_script('utils');
    	do_action("admin_print_styles-post-php");
    	do_action('admin_print_styles');
    }

    Then use the following code to insert the editor.

    <?php the_editor($content, 'content'); ?>

    Where $content is the default content for the editor, and ‘content’ is the name of the form field that is generated.

    I also noticed that the editor still retains additional shortcode buttons added by various plugins.

    This caused a problem for me, so when I hook into the ‘init’ I just check what page I’m looking at and decided if I want to disable all the buttons or not with the following function,

    remove_all_filters('mce_external_plugins');

    Hi

    I test the code of benlag and hansvedo and even the Editor appears, the buttons of “Add an Image”, “Add video” and “Visual” doesn’t works, no error and nothing happens.

    The button “HTML” gives me the JavaScript error “switchEditors is not defined”.

    The buttons of “b”, “i” works fine.

    The other problem is that when I write, the text appears in white colour, I only can see what I type if I mark the text.

    Any tip will be appreciated.

    Thanks in advanced.
    Leticia

    The white text is happening because the proper css files are not being included. I don’t recall at the moment which code I needed to add, but that’s definitely the issue.

    I have 300 line script I’m working on and the editor is there but any sort of javascript does not seem to work.

    The java error is “u is undefined”.

    When I submit the editor post values for title is as expected but the content value displayed after submission is the original value put into the editor.

    Been trying to get past this for 2 days now! Looked at every use of the_editor() online to get this far but I can’t see the issue.

    I have this snippet for displaying my editor…

    <?php

    wp_tiny_mce(false);
    add_filter(‘teeny_mce_buttons’, ‘teeny_mce_buttons’);
    wp_enqueue_script(‘page’);
    if ( user_can_richedit() )
    {

    wp_enqueue_script(‘thickbox’);
    add_action( ‘admin_head’, ‘wp_tiny_mce’ );
    wp_enqueue_script(‘editor’);
    add_thickbox();
    wp_enqueue_script(‘media-upload’);
    wp_enqueue_script(‘word-count’);
    }

    the_editor($post_content, ‘content’);

    ?>

    Hi shawnkltucker,

    Thanks alot it worked pretty nice. Now i just need to figure out the CSS for the Visual/HTML tabs.

    Benlag had mentioned that if a different id is used, that some javascript code would be needed… specifically:

    Note: if the id is different than ‘content’ it doesn’t automatically load the visual mode for some reason. That can be fixed with a call to switchEditors.go(‘theid’, ‘tinymce’); after the document is ready (jQuery.ready(…));

    Where do I put this? a new js file? or an existing one?

    I’m trying to get 2 editors on the same screen, and the id’s are conflicting… I’m hoping that this will solve my problem.

    Thoughts?

    Thanks

    Matt

    Hi shawnkltucker,

    Another thanks from me as well. I’ve managed to put a tinyMCE onto a textarea in a new_meta_box (if you get what I mean) and the info is being stored as a meta_box_value/custom field.

    However, a would also need the same help as MbZbuGSy in locating that CSS file and how to link to it.

    Any ideas?

    Thanks

    DB

    sillevl

    (@sillevl)

    This is still a hard one for me.
    I get the editor, but still having some issues with the visual/html buttons. They don’t show up like they schould be.
    I’m getting js errors too when pressing them. And the height off the textarea changes to 0 so I cannot see it after pressing the visual/html buttons.
    I tried all methodes posted above, and others I found on google, but none is working as it schould be.
    Hope someone could help me with this.

    carlla

    (@carlla)

    Someone have even used the_editor in a theme instead admin page? I want to show it in my footer like the quick editor to add posts.

    I did what you all said above, but I got buttons which didn’t work very well. Actually I didn’t get the visual editor, but the html editor instead.

    any help would be very apreciated =)

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘Adding rich text editing to your plugin?’ is closed to new replies.