javascript - Jquery Text editor - Stack Overflow

IT技术

更新时间：2025-02-030

admin管理员组
文章数量:1201180

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=".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="" target="_blank">Home</a>
<a href="" target="_blank">Demos</a>
<a href="" target="_blank">Documentation</a>
<a href="" target="_blank">Comments</a>
<a href="" target="_blank">About</a>
<a href="" 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?

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?

Share Improve this question edited May 16, 2013 at 13:33 asked May 16, 2013 at 12:46 Spirals Whirls 5531 gold badge9 silver badges28 bronze badges

I have added the full code. i am still unable to get the html from the jqte.. – Spirals Whirls Commented May 16, 2013 at 13:34

Add a comment |

10 Answers 10

Sorted by: Reset to default 6

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

And so...

$(".jqte_editor").html()

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

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.

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

Use this as said in documentation:

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

Maybe using val() instead of text():

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

if you have a textarea of id "MYTEXTAREA"

you would access it like

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

make textarea a text editor

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

and to read the data

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

or

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

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)

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.

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>

本文标签： javascriptJquery Text editorStack Overflow

版权声明：本文标题：javascript - Jquery Text editor - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.betaflare.com/web/1738567221a2100376.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

编程频道|软件玩家 - 软件改变生活！

javascript - Jquery Text editor - Stack Overflow

10 Answers 10

更多相关文章