WordPress.org

Forums

Adding rich text editing to your plugin? (15 posts)

  1. kherge
    Member
    Posted 6 years ago #

    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.

  2. benlag
    Member
    Posted 6 years ago #

    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

  3. hansvedo
    Member
    Posted 6 years ago #

    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' );
    }
  4. ryanf
    Member
    Posted 5 years ago #

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

  5. gabaligeti
    Member
    Posted 5 years ago #

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

  6. shawnkltucker
    Member
    Posted 5 years ago #

    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.

  7. shawnkltucker
    Member
    Posted 5 years ago #

    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');

  8. leticia
    Member
    Posted 5 years ago #

    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

  9. shawnkltucker
    Member
    Posted 5 years ago #

    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.

  10. WebTechGlobal
    Member
    Posted 5 years ago #

    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');

    ?>

  11. MbZbuGSy
    Member
    Posted 5 years ago #

    Hi shawnkltucker,

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

  12. tazatek
    Member
    Posted 5 years ago #

    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

  13. pathfinder_05
    Member
    Posted 5 years ago #

    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

  14. sillevl
    Member
    Posted 5 years ago #

    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.

  15. carlla
    Member
    Posted 5 years ago #

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

Topic Closed

This topic has been closed to new replies.

About this Topic