堆棧內存溢出
  簡體   English   中英

Jquery文本編輯器

[英]Jquery Text editor

 原文  2013-05-16 12:46:20  1   10    javascript/ jquery/ asp.net/ rich-text-editor

問題描述

我最近決定使用jQuery文本編輯器。 不過，我很困惑，當我訪問textarea上，我現在用的是jqte 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);&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？ 沒有全面的說明。 有人能幫我嗎？

10 個解決方案

解決方案1
 6  2013-06-16 23:02:07

實際的編輯器窗口是一個帶有“jqte_editor”類的div。

所以... 

$(".jqte_editor").html()

...將為您提供最新/編輯的內容。

解決方案2
 3  2015-07-29 12:48:19

我有同樣的問題，這就是我為解決它所做的。

我注意到插件有一個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

我不確定為什么作者沒有這樣做但我在這種方法上取得了很大的成功。

解決方案3
 2  2013-05-16 13:01:27

采用 

$("textarea").html()

而不是val() ，因為它更安全，它將逃脫特殊字符並將阻止Xss攻擊

jQuery html（）方法

但是，如果您需要將輸入文本顯示為“實時”，則可以使用.val（）方法

解決方案4
 1  2018-09-19 08:23:37

如文檔中所述使用它： 

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

解決方案5
 0  2013-05-16 12:54:18

也許使用val（）而不是text（）： 

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

解決方案6
 0  2013-05-16 12:55:11

如果你有一個id為“MYTEXTAREA”的文本區域

你會像訪問它一樣 

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

解決方案7
 0  2013-05-16 12:58:53

使textarea成為一個文本編輯器 

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

並閱讀數據 

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

要么 

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

解決方案8
 0  2013-05-16 13:02:12

我會使用更改事件而不是超時。 

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

並使用.html（）而不是.text（）來查看html格式。 或將所有\\ n全部替換為</ />（不含空格）

解決方案9
 0  2014-09-19 05:50:15

將此代碼添加到您的腳本中。 

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

因此，您可以在textarea本身獲得所需。

解決方案10
 0  2015-05-17 20:51:29

也許我來不及但我也在尋找一個解決方案而不改變原來的CSS，因為有些頁面我想要它默認，有些我想要一個自定義尺寸。 在插件js之后簡單地設置內聯css。 這樣的事情。 

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

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

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 jQuery文本編輯器 使用jQuery的文本編輯器 jQuery文本編輯器（JQTE） Jquery 自己的 Html 文本編輯器 通過 Jquery 禁用 TinyMCE 文本編輯器 光標在jQuery文本編輯器中如何閃爍？ 不格式化的JQuery文本編輯器粘貼 jQuery文本編輯器（jqte），使用change事件 這是最輕巧的jQuery Rich Text編輯器 將粘貼功能綁定到JQuery文本編輯器
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM