Search code examples
jqueryrich-text-editorelrte

jQuery, send textarea value of rich text editor with ajax?

I couldn't post the textarea value with ajax in elRTE rich text editor.

The editor demo page is like below;

http://elrte.org/demo

and I use the code below;

$.ajaxSetup({
    type: "POST",
    url: "forms.php",
    cache: false,
    dataType: "html"
});

$("input.add").live("click", function(){
    $.ajax({
        data: {action: 'add', tag: $('input.tag').val(), description: $('#editor').val()},
        success: function(data){
            $("#message").html(data);
        }
    });
});

I have tried couple of different ways to send the textarea value, but couldn't achieve.

Solution

  • Just taking a quick look at your demo page I notice that your #editor "textarea" is not actually a textarea, it's a DIV made to look like a text area. So $('#editor').val() wont work. I would suggest using $('#editor').html() instead but #editor isn't the actual editor div, so that won't actually get you where you want to be. Shyju's answer gets it right with selecting the actual div and using .html() to get the contact.

    But I just looked at the site a bit further and there appears to be a javascript api that allows you to easily get the data you want: $('#editor').elrte('val'); http://elrte.org/redmine/projects/elrte/wiki/JavaScript_API_EN

    Another problem that you may run into is that you're currently doing your ajax request via GET (the default method), but since the description value could be very large it could be too big for the URL's maximum length restriction. I would suggest using POST instead of GET for your ajax request instead. Ie: type: "POST"