我最近决定使用jQuery文本编辑器。但是，当我访问我正在使用jqte的textarea时，我很困惑，textarea显示没有数据。
<!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);">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>
我实际上正在检查如何获得jqte格式的html？没有全面的说明。有人能帮我吗？
实际的编辑器窗口是一个带有“jqte_editor”类的div。
所以...
$(".jqte_editor").html()
...将为您提供最新/编辑的内容。
也许我来不及但我也在寻找一个解决方案而不改变原来的CSS，因为有些页面我想要它默认，有些我想要一个自定义尺寸。在插件js之后简单地设置内联css。这样的事情。
$('.te_editor').jqte({
});
<style>
.jqte_editor{height:350px;max-height:500px;}
</style>
我有同样的问题，这就是我为解决它所做的。
我注意到插件有一个setter但不是getter等价于编辑器的值;这很奇怪，因为创建具有值的内容的插件的正常jQuery模式是让getter成为setter的重载paramater版本。
所以我查看了插件代码并进行了修改。从未压缩的代码版本：
这个：
$.fn.jqteVal = function(value){
$(this).closest("."+vars.css).find("."+vars.css+"_editor").html(value);
}
变成：
$.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);
}
}
从“缩小”版本：
这个：
e.fn.jqteVal=function(t){e(this).closest("."+u.css).find("."+u.css+"_editor").html(t);}
变成：
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);}}
进行更改后，您现在可以像使用任何其他jQuery值函数一样使用jqteVal()函数：
$(SELECTOR).jqteVal("text that goes into editor"); //Setter
var editor_value = $(SELECTOR).jqteVal(); //Getter
我不确定为什么作者没有这样做但我在这种方法上取得了很大的成功。
使用
$("textarea").html()
而不是val()，因为它更安全，它将逃脱特殊字符，并将阻止Xss攻击
但是，如果您需要将输入文本显示为“实时”，则可以使用.val（）方法
如文档中所述使用它：
$(".editor").jqteVal("New article!");
也许使用val（）而不是text（）：
window.setInterval (function(){alert($("textarea").val());},3000);
如果你有一个id为“MYTEXTAREA”的文本区域
你会像访问它一样
window.setInterval (function(){alert($("textarea#MYTEXTAREA").val());},3000);
使textarea成为一个文本编辑器
$("#textareaID").jqte();
并阅读数据
var text = $("#textareaID").text();
要么
alert($("#textareaID").text());
我会使用更改事件而不是超时。
$('#textareaID').bind('input propertychange', function() {
//...
});
并使用.html（）而不是.text（）来查看html格式。或者将所有\ n替换为<b r />（不含空格）
将此代码添加到您的脚本中。
$('.jqte-test').on("keyup", function(){
var content = $(this).html();
$(this).parent('.jqte-test').find('textarea').val(content);
});
因此，您可以在textarea本身获得所需。