jquery文本編輯器

我最近決定使用jQuery文本編輯器。然而，我很困惑，當我訪問textarea我在使用jqte textarea顯示沒有數據。jquery文本編輯器

       <!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？沒有全面的說明。有人能幫我嗎？

來源

2013-05-16 Spirals Whirls

我已經添加了完整的代碼。我仍然無法從jqte獲取html .. –

也許使用VAL（）而不是文本（）：

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

來源

2013-05-16 12:54:18 Getz

我已添加完整的代碼。我仍然無法從jqte獲取html。檢查編輯的問題。 –

，如果您有ID爲「MYTEXTAREA」

的textarea的，你會訪問它像

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

來源

2013-05-16 12:55:11

我已添加完整的代碼。我仍然無法從jqte –

讓textarea成爲文本編輯器

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

和讀取數據

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

或

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

來源

2013-05-16 12:58:53

獲得html，我添加了完整的代碼。我仍然無法從jqte –

獲得html，我在某處讀到jqte的使用非常簡單。但這非常複雜。大聲笑 –

使用

$("textarea").html()

代替val()，因爲它更安全，它會逃跑的特殊字符，並防止XSS攻擊

jQuery html() method

不過，如果你需要顯示輸入文本爲「活」的，你可以使用.VAL（）方法

來源

2013-05-16 13:01:27

我已經添加完整的代碼。我仍然無法從jqte.please獲取html檢查編輯的問題。 –

這件事情令人困惑......實際上，打字的地方在哪裏......我看不到textarea的價值變化。 –

檢查此琴：http://jsfiddle.net/FHnwH/ –

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

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

並使用.html（）而不是.text（）來查看html格式。或將所有\ n替換爲<（無空格）

來源

2013-05-16 13:02:12 Andi

我已添加完整的代碼。我仍然無法從jqte獲取html。請檢查編輯的問題。 –

實際編輯器窗口是類「jqte_editor」的div。

等等...

$(".jqte_editor").html()

...會給你最新的/編輯的內容。

來源

2013-06-16 23:02:07

但是如果頁面上有多個'jqte'會怎麼樣？ –

@ POW-伊恩（2第1部分）：我用於發現上述技術的方法是值得利用用於這個和其他的編碼，以及 - 即，瀏覽器的開發工具，進一步瞭解在頁面上的元素（例如，Chrome的右鍵單擊上下文菜單中的「檢查元素」）。通過使用該技術，您將能夠看到多個編輯器元素是否以任何方式唯一標識。 –

@ Pow-Ian（2的第2部分）：如果沒有，則查找父元素的唯一標識符，然後找到編輯器包含的div。例如：$（「＃parentElementID」）。find（「。jqte_editor」）。如果您經常引用它，請將其設爲jQuery對象，以免每次都搜索它。 –

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

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

，讓你可以要求出把在textarea的本身。

來源

2014-09-19 05:50:15

也許我太晚了，但我一直在尋找一個解決方案太不改變原有的CSS，因爲有些網頁我希望它默認和一些我想自定義尺寸。簡單地在插件js之後設置內聯css。像這樣的東西。

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

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

來源

2015-05-17 20:51:29 samjones39

我有同樣的問題，這是我做了解決它。

我注意到這個插件有一個二傳手，但不是一個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);}

已更改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-29 12:48:19

現貨！我想原來的項目有點失敗（由於更新）？但無論如何繼續生活。可能會採取行動github或類似的 – bryanallott

jquery文本編輯器

回答

相關問題