CODEWITHSUNDEEP
tinymce
user951042
user951042

Reputation:

Adding jquery events to tinymce textareas

I have this from tinymce and i called it before calling jquery..

<script type="text/javascript" src="http://localhost/javascript/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
    tinyMCE.init({
        // General options
        mode : "textareas",
        theme : "advanced",
        plugins : "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",

        // Theme options
        theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
        theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
        theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
        theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_statusbar_location : "bottom",
        theme_advanced_resizing : true,

        // Example content CSS (should be your site CSS)
        //content_css : "css/example.css",

        // Drop lists for link/image/media/template dialogs
        template_external_list_url : "js/template_list.js",
        external_link_list_url : "js/link_list.js",
        external_image_list_url : "js/image_list.js",
        media_external_list_url : "js/media_list.js",

        // Replace values for the template plugin
        template_replace_values : {
            username : "Some User",
            staffid : "991234"
        }
    });
</script>

Then my textarea 

<textarea id="edit_textarea"> </textarea>
 <input type="button"  id="manual_text" value="Add" onClick="text_manual()">

I'm trying to use jquery get the value of what's inputted in that textarea, so when the button is clicked i get the value and append it somewhere else..

The javascript

function text_manual() {
    var textarea = $('#edit_textarea');
    var text_value = textarea.val();
    $('#image_conv').append(text_value);
    $('#image_conv').html(text_value).css('font-size', textarea.css('font-size'));
    $('#image_conv').html(text_value).css('color', textarea.css('color'));
}

Also if it would be helpful, the code works when tinymce's code isn't added. So it seems to be as if tinymce doesn't allow external scripts on the allocated textareas. Does anyone know how i can fix this?

Upvotes: 1

Views: 801

Answers (1)

user951042
user951042

Reputation:

After some long research, i found this simple piece of code that works ..

tinyMCE.get('edit_textarea').getContent();

Upvotes: 2

Related Questions