CODEWITHSUNDEEP
javascriptjqueryasp.netrich-text-editor
Spirals Whirls
Spirals Whirls

Reputation: 553

Jquery Text editor

I have recently decided to use the jQuery text editor. However, I am confused when I access the textarea on which I am using the jqte the textarea shows no data. 

                             <!DOCTYPE html>
              <html>
              <head>
               <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
              <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
           <title>jQuery TE | Downloaded Demo | v.1.3.6</title>

  <link type="text/css" rel="stylesheet" href="demo.css">
  <link type="text/css" rel="stylesheet" href="../jquery-te-1.3.6.css">

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js" charset="utf-8"></script>
<script type="text/javascript" src="../jquery-te-1.3.6.min.js" charset="utf-8"></script>
 </head>

<body>
 <h1>jQuery TE</h1>

<div class="navigation">
<a href="http://jqueryte.com" target="_blank">Home</a>
<a href="http://jqueryte.com/demos" target="_blank">Demos</a>
<a href="http://jqueryte.com/documentation" target="_blank">Documentation</a>
<a href="http://jqueryte.com/comments" target="_blank">Comments</a>
<a href="http://jqueryte.com/about" target="_blank">About</a>
<a href="http://jqueryte.com/license" target="_blank">License</a>
</div>

<h2>Demo | v.1.3.6</h2>


  <!------------------------------------------------------------ jQUERY TEXT EDITOR  

 <textarea  cols="2" rows="3" name="textarea" class="jqte-test"  id="mytextarea"><b>My      contents are from <u><span style="color:rgb(0, 148, 133);">TEXTAREA</span></u></b></textarea>

<p>
<button class="status">Toggle jQTE</button>
</p>
<hr>

<input name="input" type="text" value="<b>My contents are from <u><span style=&   quot;color:rgb(0, 148, 133);&quot;>INPUT</span></u></b>" class="jqte-test"/>

  <div name="div" class="jqte-test"><b>My contents are from <u><span style="color:rgb(0, 148, 133);">DIV</span></u></b></div>

   <script>
  $('.jqte-test').jqte();

 // settings of status
 var jqteStatus = true;
  $("textarea#mytextarea").bind(function(){ alert($(this).html()) ;});
 $(".status").click(function()
 {
    jqteStatus = jqteStatus ? false : true;
    $('.jqte-test:first').jqte({"status" : jqteStatus})
  });
 </script>

I am actually checking how should I get the jqte formated html? There are no comprehensive notes on it. Can someone help me?

Upvotes: 5

Views: 27364

Answers (10)

Agus Widiarsa I Made
Agus Widiarsa I Made

Reputation: 21

Use this as said in documentation:

$(".editor").jqteVal("New article!");

Upvotes: 2

Joan Caron
Joan Caron

Reputation: 1970

Use 

$("textarea").html()

instead of val(), because it's more secure, it will escape special chars and will prevent Xss attacks

jQuery html() method

nevertheless, if you need to display input text as "live" you can use .val() method

Upvotes: 3

Pow-Ian
Pow-Ian

Reputation: 3635

I had this same problem and here is what I did to solve it.

I noticed the plugin had a setter but not a getter equivalent for the value of the editor; this is odd because the normal jQuery pattern for plugins that create content with a value is to have the getter be an overloaded paramater-less version of the setter.

So I looked in the plugin code and made this modification. From the uncompressed version of the code:

This:

$.fn.jqteVal = function(value){
   $(this).closest("."+vars.css).find("."+vars.css+"_editor").html(value);      
}

Changed to:

$.fn.jqteVal = function(value){
    if(typeof value === 'undefined'){
        return $(this).closest("."+vars.css).find("."+vars.css+"_editor").html();
    }else{
        $(this).closest("."+vars.css).find("."+vars.css+"_editor").html(value);
    }
}

And from the 'minified' version:

This:

e.fn.jqteVal=function(t){e(this).closest("."+u.css).find("."+u.css+"_editor").html(t);}

Changed to:

e.fn.jqteVal=function(t){if(typeof t === 'undefined'){return e(this).closest("."+u.css).find("."+u.css+"_editor").html();}else{e(this).closest("."+u.css).find("."+u.css+"_editor").html(t);}}

After making the change you can now use the jqteVal() function like any other jQuery value function:

$(SELECTOR).jqteVal("text that goes into editor"); //Setter
var editor_value =     $(SELECTOR).jqteVal();      //Getter

I am not sure why the author did not do this but I have had a lot of success with this methodology.

Upvotes: 3

samjones39
samjones39

Reputation: 163

maybe i am too late but i was looking for a solution too without changing the original css as some pages i want it default and some i wanted a custom size. simplly set inline css after the plugin js. something like this.

$('.te_editor').jqte({
});

<style>
.jqte_editor{height:350px;max-height:500px;}
</style>

Upvotes: 0

Ajeeb.K.P
Ajeeb.K.P

Reputation: 1053

Add this code to your script.

$('.jqte-test').on("keyup", function(){
        var content = $(this).html();
        $(this).parent('.jqte-test').find('textarea').val(content);
    });

So you can get required out put at the textarea itself.

Upvotes: 0

Alan M.
Alan M.

Reputation: 1369

The actual editor window is a div with the class "jqte_editor".

And so...

$(".jqte_editor").html()

... will give you the latest/edited content.

Upvotes: 6

Andi
Andi

Reputation: 11

i would use an change event instead of timeout.

$('#textareaID').bind('input propertychange', function() {
//...
});

and use .html() instead of .text() to see the html formatting. or replace all \n to < b r /> (without spaces)

Upvotes: 0

Ravinder Gujiri
Ravinder Gujiri

Reputation: 1524

make textarea a text editor

$("#textareaID").jqte();

and to read the data

var text = $("#textareaID").text();

or

alert($("#textareaID").text());

Upvotes: 0

Andy Marsden
Andy Marsden

Reputation: 97

if you have a textarea of id "MYTEXTAREA"

you would access it like

window.setInterval (function(){alert($("textarea#MYTEXTAREA").val());},3000);

Upvotes: 0

Getz
Getz

Reputation: 4063

Maybe using val() instead of text():

 window.setInterval (function(){alert($("textarea").val());},3000);

Upvotes: 0

Related Questions