Jquery 文本编辑器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16587869/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery Text editor
提问by Spirals Whirls
I have recently decided to use the jQuery text editor. However, I am confused when I access the textareaon which I am using the jqte the textarea shows no data.
我最近决定使用 jQuery 文本编辑器。但是，当我访问textarea正在使用 jqte 的文本区域时，我感到很困惑，但没有显示任何数据。
<!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>
I am actually checking how should I get the jqte formated html? There are no comprehensive notes on it. Can someone help me?
我实际上正在检查我应该如何获得 jqte 格式的 html？没有关于它的全面注释。有人能帮我吗？
回答by Alan M.
The actual editor window is a div with the class "jqte_editor".
实际的编辑器窗口是一个带有“jqte_editor”类的 div。
And so...
所以...
$(".jqte_editor").html()
... will give you the latest/edited content.
...会给你最新/编辑的内容。
回答by Pow-Ian
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.
我注意到该插件有一个 setter，但没有相当于编辑器值的 getter；这很奇怪，因为使用值创建内容的插件的正常 jQuery 模式是让 getter 成为 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:
进行更改后，您现在可以jqteVal()像使用任何其他 jQuery 值函数一样使用该函数：
$(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.
我不确定作者为什么不这样做，但我用这种方法取得了很多成功。
回答by Joan Caron
Use
用
$("textarea").html()
instead of val(), because it's more secure, it will escape special chars and will prevent Xss attacks
而不是val()，因为它更安全，它会转义特殊字符并防止 Xss 攻击
nevertheless, if you need to display input text as "live" you can use .val() method
尽管如此，如果您需要将输入文本显示为“实时”，您可以使用 .val() 方法
回答by Agus Widiarsa I Made
Use this as said in documentation:
按照文档中的说明使用它：
$(".editor").jqteVal("New article!");
回答by Andi
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)
并使用 .html() 而不是 .text() 来查看 html 格式。或将所有 \n 替换为 < br /> （不带空格）
回答by Ajeeb.K.P
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 textareaitself.
因此，您可以在textarea本身中获得所需的输出。
回答by samjones39
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.
也许我太晚了，但我也在寻找解决方案而不更改原始 css，因为有些页面我希望它是默认的，有些我想要自定义大小。只需在插件 js 之后设置内联 css。像这样的东西。
$('.te_editor').jqte({
});
<style>
.jqte_editor{height:350px;max-height:500px;}
</style>
回答by Getz
Maybe using val() instead of text():
也许使用 val() 而不是 text()：
window.setInterval (function(){alert($("textarea").val());},3000);
回答by Andy Marsden
if you have a textarea of id "MYTEXTAREA"
如果您有一个 ID 为“MYTEXTAREA”的文本区域
you would access it like
你会像这样访问它
window.setInterval (function(){alert($("textarea#MYTEXTAREA").val());},3000);
回答by G Ravinder
make textarea a text editor
使 textarea 成为文本编辑器
$("#textareaID").jqte();
and to read the data
并读取数据
var text = $("#textareaID").text();
or
或者
alert($("#textareaID").text());
