Add wysiwyg to CustomPress => custom fields

How would I go about adding a wysisyg to a specific custom field textarea inside CustomPress. The current textarea is only allowing basic text and html. I want the user to be able to add content in a similar way as editing a post or page in wordpress.

Thanks,
William

  • Vinod Dalvi

    Hi William,

    I have tested it on my test site and the wysisyg textarea to add directory listing content is displaying fine on my test site on the page http://mysite.com/listings/edit-listing/ as shown in the attached screenshot.

    I have tested it on your site but it's not displaying on your site on the same page http://myinsurancepage.com/listings/edit-listing/ as shown in the second attached screenshot.

    Have you customized this page that caused to hide this textarea or anything else that caused it?

    If you have not made any customizations then this can be due to plugin/theme conflict on your site.

    You can just try on your development site temporary using default WordPress theme like Twenty Fifteen and temporary deactivating all other plugins and activating them one by one as displayed in the following flowchart to know which theme/plugin is conflicting if any.

    https://premium.wpmudev.org/manuals/getting-support/

    Currently custompress doesn't support adding WYSIWYG editor in the textarea but you can try adding it using custom solutions posted in the following threads.

    https://premium.wpmudev.org/forums/topic/custom-field-with-default-editor#post-812903
    https://premium.wpmudev.org/forums/topic/how-to-add-tinymce-to-a-textarea-created-in-custompress

    Regards,
    Vinod Dalvi

  • William

    Hi @Vinod Dalvi,

    I have read the two forum links you provided and done a bit more research on the wpmudev forums but have been unable to come up with a solution. It seems like people have been asking for this feature for over 2-3 years and it still has not been incorporated into the plugin... Bummer :slight_frown:

    The second link you refer to is from 2012 and non of the screen shots or document links (output.pdf) work. I was unable to get the code provided by leejacksondev working on my site.

    Many forum post link back to a robbluther.com but when you arrive at his site you get a 404 error. I even tried searching around his blog and using his search box to see if it was just renamed but was not able to find it.

    Do you have any other thoughts to solutions to this?

    Thanks,
    William

  • William

    Hi @Vinod Dalvi,

    I have been playing around with some code from @leejacksondev and was able to create a plugin like he suggested but I'm still unable to see the TinyMCE on my about me text area from custompress.

    <?php
    /*
    Plugin Name: TinyMCE to textbox
    Description: Adds TinyMCE to a named textbox
    */
    
    function tinymce_to_named_textarea() {
        ?>
    
    <script type="text/javascript">
                    /* <![CDATA[ */
     		jQuery('#_ct_About_Me_textarea_ca57').addClass('theEditor')
                    jQuery(document).ready( function () {
                        if ( typeof( tinyMCE ) == "object" && typeof( tinyMCE.execCommand ) == "function" ) {
    
                            tinyMCE.execCommand("mceAddControl", true, "_ct_About_Me_textarea_ca57");
    
                        }
                    });
    
                    /* ]]> */
            </script>
    
    <?php
    }
    // Add hook for admin <head></head>
    add_action('admin_head', 'tinymce_to_named_textarea');
    
    ?>

    Any suggestions?

    Thanks,
    William

  • Vinod Dalvi

    Hi William,

    I could also confirm that the shared code is not working so i have developed new code as following which is working fine on my test site.

    Could you please try using the following code?

    function tinymce_to_named_textarea() {
        ?>
    
    <script type="text/javascript">
                    /* <![CDATA[ */
                    jQuery(document).ready( function () {
                    	jQuery('#_ct_About_Me_textarea_ca57').addClass('mceEditor');
                        if ( typeof( tinyMCE ) == "object" && typeof( tinyMCE.execCommand ) == "function" ) {
    						tinyMCE.init({
    						    mode : "specific_textareas",
    						        editor_selector : "mceEditor",
    						        editor_deselector : "mceNoEditor"
    						    });
                        }
                    });
    
                    /* ]]> */
            </script>
    
    <?php
    }
    // Add hook for admin <head></head>
    add_action('admin_head', 'tinymce_to_named_textarea');

    Best Regards,
    Vinod Dalvi

  • William

    Hi @Vinod Dalvi,

    I have added the code you provided above to my functions.php file and its still not displaying any editor... I also tried to wrap the code you provided in a plugin (see plugin code below) but was still unable to see a change. Could you please take a look for me?

    <?php
    /*
    Plugin Name: TinyMCE to textbox
    Description: Adds TinyMCE to a named textbox
    Version: 1.0
    
    */
    
    function tinymce_to_named_textarea() {
        ?>
    
    <script type="text/javascript">
                    /* <![CDATA[ */
                    jQuery(document).ready( function () {
                    	jQuery('#_ct_About_Me_textarea_ca57').addClass('mceEditor');
                        if ( typeof( tinyMCE ) == "object" && typeof( tinyMCE.execCommand ) == "function" ) {
    						tinyMCE.init({
    						    mode : "specific_textareas",
    						        editor_selector : "mceEditor",
    						        editor_deselector : "mceNoEditor"
    						    });
                        }
                    });
    
                    /* ]]> */
            </script>
    
    <?php
    }
    // Add hook for admin <head></head>
    add_action('admin_head', 'tinymce_to_named_textarea');
    
    ?>

    Support access is ACTIVE until September 4, 2015 5:06 pm

    Thanks,
    William

  • Vinod Dalvi

    Hi William,

    Could you please tell me how are you testing the result of added code?

    Can you check the JavaScript console for errors?

    In Chrome go to "Tools -> Developer Tools" and in Firefox you can go to "Tools -> Web Developer -> Console”

    Find information about how to open JavaScript browser console :

    http://webmasters.stackexchange.com/questions/8525/how-to-open-the-javascript-console-in-different-browsers
    http://codex.wordpress.org/Using_Your_Browser_to_Diagnose_JavaScript_Errors

    Let me know what JavaScript errors if any you are getting when you use this code.

    Also it seems the support staff access is revoked on your site so could you please regrant it so that we can troubleshoot it?

    Regards,
    Vinod Dalvi

  • Vinod Dalvi

    Hi William,

    The provided code only works in the admin area.

    To make it work in the front end we have to change it as following.

    <?php
    /*
    Plugin Name: TinyMCE to textbox
    Description: Adds TinyMCE to a named textbox
    Version: 1.0
    
    */
    
    function tinymce_to_named_textarea() {
        ?>
    <script type="text/javascript" src="<?php echo site_url(); ?>/wp-includes/js/tinymce/tinymce.min.js"></script>
    <script type="text/javascript">
                    /* <![CDATA[ */
                    jQuery(document).ready( function () {
                    	jQuery('#ct_About_Me_textarea_ca57, #ct_About_My_C_textarea_9046').addClass('mceEditor');
                        if ( typeof( tinyMCE ) == "object" && typeof( tinyMCE.execCommand ) == "function" ) {
    						tinyMCE.init({
    						    mode : "specific_textareas",
    						        editor_selector : "mceEditor",
    						        editor_deselector : "mceNoEditor"
    						    });
                        }
                    });
    
                    /* ]]> */
            </script>
    
    <?php
    }
    // Add hook for admin <head></head>
    add_action('wp_footer', 'tinymce_to_named_textarea');
    
    ?>

    I have added this modified code on your site and found now the tinymce are displaying on the add listings page "About My Company" and "About Me*" fields. I didn't find any text area on your edit listings page.

    Could you please check it and let me know how it works for you now?

    Best Regards,
    Vinod Dalvi

  • William

    Hi @Vinod Dalvi

    Thank You! The code is working in both the Edit and Add listing pages. However when I edit a listing and click "Save Changes" I am not getting redirected back to the My Listings page. It seems to be just refreshing the page and adding a # to the end of the URL (http://myinsurancepage.com/listings/edit-listing/#). The save takes place however this may be confusing to a user.

    Is there a way to redirect back to the My Listings page after clicking the "Save Changes" button? This redirect happens when I add a new listing.

    Support access is ACTIVE until September 17, 2015 10:02 am

    Thanks,
    William

  • Vinod Dalvi

    Hi William,

    Is there a way to redirect back to the My Listings page after clicking the "Save Changes" button? This redirect happens when I add a new listing.

    By default without using the provided code the edit listings page doesn't redirect anywhere on saving but the add listings page gets redirected to My listings page so what you are trying to achieve is a custom functionality.

    Developing custom code for custom functionality is beyond the scope of support that we provide. See here https://premium.wpmudev.org/manuals/using-wpmu-dev/support-vs-custom-development/

    If you are not a programmer then you can consider hiring a developer from https://premium.wpmudev.org/wpmu-custom-development/ to develop it for you.

    Cheers,
    Vinod Dalvi

  • William

    Hi @Vinod Dalvi,

    Also I believe I found a bug in the plugin.... Could you please check for me? When I created a listing and saved as a draft, then try to edit any other listing it redirects me to the preview of the listing that has been saved as a draft.

    If I delete the draft listing from the front end editor (listings/my-listings) it still throws the error. If I go into the back end (/wp-admin/edit.php?post_status=virtual&post_type=directory_listing&ids=26) and delete the listing everything starts to work again....

    Still looking for some more info on that redirect issue from above... any help would be greatly appreciated :slight_smile:!!!!!

    Support access is ACTIVE until September 24, 2015 2:40 pm

    Thanks,
    William

  • William

    Hi @Vinod Dalvi,

    The above proposed solution i posted on Mon Sep 21 2015, 1:56:24 PM did not work. Just wanted to follow up to see if you could confirm the but I posted on Mon Sep 21 2015, 2:45:11 PM...

    Just wondering if this solution would work or if you could propose something similar???

    Code:

    <input id="myButton" type="submit" value="<?php _e( 'Save Changes', $Directory_Core->text_domain ); ?>" name="update_listing">
    
    <script type="text/javascript">
        document.getElementById("myButton").onclick = function () {
            location.href = "/listings/edit-listing/";
        };
    </script>

    Thanks,
    William

  • Kasia Swiderska

    Hello William,

    Also I believe I found a bug in the plugin.... Could you please check for me? When I created a listing and saved as a draft, then try to edit any other listing it redirects me to the preview of the listing that has been saved as a draft.

    I tried to replicate this issue on my testing site, but this worked fine. Did you tested it with your custom code? It could be reason of this not working properly.

    Your js script will not work - because if you use it, then your form will not be processed - you click, sites reload do edit-listing, but what listing? When you click Save, it saves data to data base, then reloads page - so you need to change this processes.

    If you take a look on the main.php file in the plugin folder, you will find

    if(is_page($this->add_listing_page_id)){
    							wp_redirect( add_query_arg( array( 'updated' => 'true', 'dmsg' => urlencode( __( 'New Listing is added!', $this->text_domain ) ) ), get_permalink($this->my_listings_page_id) ) );
    						} else {
    							wp_redirect( add_query_arg( array( 'updated' => 'true', 'dmsg' => urlencode( __( 'Listing is updated!', $this->text_domain ) ) ), get_permalink($this->my_listings_page_id) ) );
    						}
    						exit;

    This is where redirects happen, and it is handled by function wp_redirect(). So if you comment this lines redirects will not work any more.

    Kind regards,
    Kasia

  • William

    Hi @Kasia Swiderska,

    Are you talking about the main.php file in (/directory/core)? To me it looks like they should be both doing the same thing after the "Save" or "Update" command. But for some reason on my site when I save a new listing I get redirected to the listings/my-listings page but when I update an already existing listing the page saves and refreshes adding a # to the end of the url /listings/edit-listing/#

    Did you tested it with your custom code? It could be reason of this not working properly.

    I think I was testing with my custom code. I will double check this as soon as I get an answer back from this thread because I am unable to access the back end of our site right now.

    Thanks,
    William

  • William

    Hi @Kasia Swiderska

    I double checked my code and found that the only two pages I mad changes to where page-update-listing.php and single-listing.php. I have not made any edits to the main.php file.

    Here is the submit class code from my page-update-listing.php. I have not made any changes to this code...

    <div class="submit">
    			<?php wp_nonce_field( 'verify' ); ?>
    			<input type="submit" value="<?php _e( 'Save Changes', $Directory_Core->text_domain ); ?>" name="update_listing">
    
    			<input type="button" value="<?php _e( 'Cancel', $Directory_Core->text_domain ); ?>" onclick="location.href='<?php echo get_permalink($Directory_Core->my_listings_page_id); ?>'">
    		</div>

    Please let me know what you find.

    Thanks,
    William

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.