Appending image after cursor position

Question

I have added some javascript to link to the media upload feature so that I could add images to my custom meta boxes. I can get the html into the metabox but want to be able to detect the poistion of the cursor and append the html after it.

The code I have so far is below:

<script type="text/javascript">
    function my_upload() {
        var post_id = jQuery('#post_ID').val(); // ID of the post
        var formfield = jQuery('#left-sidebar-text'); // Field to insert image into

        // Show the media uploader dialog does this only work for images?
        tb_show('', 'media-upload.php?post_id=' + post_id + 'type=image&TB_iframe=true');

        // Only use custom uploader if the formfield variable exists
        window.original_send_to_editor = window.send_to_editor;
        window.send_to_editor = function(html) {

            if (formfield) {
                formfield.text(html); // Insert html into textarea

                // Remove the media uploader dialog
                tb_remove();
            }
            else {
                window.original_send_to_editor(html);
            }
        }
        return false;
    }
</script>

I have looked at the wordpress core code but could not work out how they detected the cursor position and used it.

I need to add this bit of functionality as it is a client requirement.

Thanks in advance.

nav

Answer 1

Thank you @miahelf for your answer. After surfing the web with some better keywords I found out that the way to get wordpress like editing and media upload features is to use the wp_editor() function which is available in WP 3.3 and upwards.

This gives me what I need and seems to be the best way to give WP editor functionality to custom fields i.e. textareas instead of working with metaboxes.

Thanks, nav