5

我最近决定使用 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);&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>

我实际上正在检查我应该如何获得 jqte 格式的 html？没有关于它的全面注释。有人能帮我吗？

4

10 回答 10

6

实际的编辑器窗口是一个带有“jqte_editor”类的 div。

所以...

$(".jqte_editor").html()

...将为您提供最新/编辑的内容。

于 2013-06-16T23:02:07.023 回答
3

利用 

$("textarea").html()

而不是val()，因为它更安全，它会转义特殊字符并防止 Xss 攻击

jQuery html() 方法

不过，如果您需要将输入文本显示为“实时”，您可以使用 .val() 方法

于 2013-05-16T13:01:27.270 回答
3

我遇到了同样的问题，这就是我为解决它所做的。

我注意到该插件有一个设置器，但没有一个与编辑器值等效的 getter；这很奇怪，因为使用值创建内容的插件的正常 jQuery 模式是让 getter 成为 setter 的重载无参数版本。

所以我查看了插件代码并进行了修改。从代码的未压缩版本：

这个：

$.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);}}

进行更改后，您现在可以jqteVal()像使用任何其他 jQuery 值函数一样使用该函数：

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

我不确定作者为什么不这样做，但我在这种方法上取得了很大的成功。

于 2015-07-29T12:48:19.760 回答
1

按照文档中的说明使用它：

$(".editor").jqteVal("New article!");
于 2018-09-19T08:23:37.310 回答
0

也许使用 val() 而不是 text()：

 window.setInterval (function(){alert($("textarea").val());},3000);
于 2013-05-16T12:54:18.903 回答
0

如果您有一个 id 为“MYTEXTAREA”的文本区域

你会像访问它一样

window.setInterval (function(){alert($("textarea#MYTEXTAREA").val());},3000);
于 2013-05-16T12:55:11.057 回答
0

使 textarea 成为文本编辑器

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

并读取数据

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

或者

alert($("#textareaID").text());
于 2013-05-16T12:58:53.967 回答
0

将此代码添加到您的脚本中。

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

所以你可以在textarea本身被要求输出。

于 2014-09-19T05:50:15.763 回答
0

我会使用更改事件而不是超时。

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

并使用 .html() 而不是 .text() 来查看 html 格式。或将所有 \n 替换为 < br /> （不带空格）

于 2013-05-16T13:02:12.477 回答
0

也许我为时已晚，但我也在寻找解决方案，而不更改原始 css，因为有些页面我希望它默认，有些我想要自定义大小。只需在插件 js 之后设置内联 css。像这样的东西。

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

<style>
.jqte_editor{height:350px;max-height:500px;}
</style>
于 2015-05-17T20:51:29.577 回答