2011-03-05 53 views
8

所以我想要做的就是使用jQuery的AJAX函數提交表單。我選擇的路線是使用$('#form')。serialize();然後將其作爲GET請求傳遞。它在所有的花花公子和精美花花公子中都能夠實現,直到我添加編輯器NicEdit,我將在網站上使用它。如何在提交槽ajax時獲取nicEdit表單的內容?

我已經研究過這個問題,並且情況是這樣的,一旦NicEdit接管文本區域,例如,它將文本區域隱藏給用戶,而不是她寫入。然後這些數據將被放回到正常提交按鈕觸發的文本區域中。

現在的問題是:我沒有一個正常的提交按鈕,因此不會觸發將數據放回到文本區域的事件。我已經盡了最大努力去解決問題 google解決方案,但我發現的一切都毫無價值。

考慮到我的情況的下游基本設置:http://jsfiddle.net/MMzhS/1/ - 如何在alert()之前從NicEdit窗體獲取數據到文本區域?叫做?

回答

12

由BinaryKitten從#jQuery提供以下不相同,但有點清潔在我看來:http://jsfiddle.net/MMzhS/5/

+0

克勞斯嗨的ID,我有同樣的問題,但是我使用的.html()代替。測試(),因爲的.text()函數只發送文本,而不是HTML格式存儲文本格式所需的信息。我做對了嗎? –

+0

這就是我在找的東西。我需要html代碼而不是未格式化的文本。感謝分享。 – Theodoros80

0
var data = $('#peter div').eq(90).text(); 

是數據的信息。此外,請使用$.post代替$.get提交表單;對互聯網很好。

0
document.getElementById("content").value = "<html><head><title></title><head><body>"+nicEditors.findEditor("this will be your id of your textarea").getContent()+"</body></head></html>"; 
var templateContent = document.getElementById("content").value; 
22
var nicE = new nicEditors.findEditor('assignment'); 
question = nicE.getContent(); 

'分配' 是你的textarea的ID。

textarea的內容是節約問題的變量,希望這將有助於

2
  1. 創建nicEdit實例

    MyApp.editor =新nicEditor()panelInstance( 'texarea_id')。

  2. 讓用戶輸入內容到他們心中的內容! (雙關語無意的)

  3. 獲取內容:

    變種含量= MyApp.editor.instanceById( 'textarea_id')的getContent();

  4. 像往常一樣使用content發佈內容。

+0

這是正確的答案... –

0

誰是想知道如何添加在nicEdit自定義組合框,這裏的人是我的博客文章,以顯示與動態值

Link

通過編輯NiceEdit的js文件,我們可以自定義下拉在NicEdit中添加自定義組合框

通過以下方式,我們可以將下拉列表或組合框添加到NicEdit。您可以通過Ajax調用從數據庫中獲得下拉值,並顯示在NicEdit 首先下載並執行 aspx頁面上NicEdit下載NiceEdit js文件,您可以通過下面的代碼(http://nicedit.com/

<div style="height: 700px; width: 70%; overflow: scroll">    <div id="sample"><script type="text/javascript" src="../scripts/nicEdit.js"></script><script src="../nicExample/nicExample.js"></script> 
        <script type="text/javascript"> 
         bkLib.onDomLoaded(function() { 
          // nicEditors.allTextAreas() 
          new nicEditor({ fullPanel: true }).panelInstance('area2');});</script> 
        <h4>NicEdit Textarea</h4><textarea name="area2" id="area2" style="width: 70%; height: 700px"> </textarea> 
        </div></div> 

啓用現在添加getddlData()函數阿賈克斯在niceEdit.js文件中的文件

// AJAX call 
function getddlData() { 
    var ajaxResponse; 
    $.ajax({ 
     type: "POST", 
     url: 'NicEdit.aspx/GetBookMarkData', // AJAX call to fecth dropdown data 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     async: false, 
     cache: false, 
     // Text file name 
     success: function (response) { 
      // //alert(data.d); // or do some other data processing 
      // //return data.d; 
      ajaxResponse = response; 
     } 
    }); 
    return ajaxResponse.d; 
} 

//末尾添加在代碼隱藏(cs文件)一個WebMethod來fetech下拉值到nicedit

[WebMethod] 
     public static string GetBookMarkData() 
     { 
///Also you can get DB's data here 
      /// (2 responses dropdown values being filled : 'drop down Value', drop down Text) 
      /// Need DB data in , seprated list Formate: @@[email protected]@,TestOne, TestOne, @@[email protected]@,Test2,Test2 
      string sbookmarkData = "<<Test_Name>>,Test Name,<<Test_Add>>,Test Add,<<Test_Location>>,Test Location,<<Test_City>>,Test City,<<Test_Phone>>,Test Phone"; 
      return sbookmarkData; 
     } 

現在打開NicEdit js文件及複印件(線沒有1552)或搜索下面一行:

var nicEditorFontFormatSelect = nicEditorSelect.extend({ 

Copy complete function and create another one by changing names etc 

var nicEditorInsertBookmark = nicEditorSelect.extend({ 
    /* By Pankaj Sharma : Not Needed Now */ 
    sel: { 
     '[[Location]]': "Test Name", 
     pre: "Test Address", 
     h6: "Test City", 
     h5: "Test State", 
     h4: "Test Zip", 
     h3: "Test ABC", 
     h2: "Test One", 

    }, 
    init: function() { 
     /* Pankaj Sharma */ 
     this.setDisplay("Insert Bookmark"); 
     var response = getddlData(); 
     var responseArr = response.split(","); 
     var strings = []; 
     //for (itm in this.sel) {   
     // // var A = itm.toUpperCase(); 
     // //this.add( A, this.sel[itm] ) 
     // } 

     for (i = 0; i < responseArr.length; i++) { 
      strings.push([responseArr[i], responseArr[i + 1]]); 
      i = i + 1; 
     } 
     for (var i in strings) { 
      this.add(strings[i][0], strings[i][1]); 
     } 
     /* END HERE*/ 
    }, 
}); 

得行沒有1230或搜索下面一行:

VAR nicSelectOptions = { 按鈕:{ 添加下列下面fontFormat功能

'CustomBookmark':{ 名:__( '插入書籤'), 類型: 'nicEditorInsertBookmark',// 命令: 'InsertBookmark' // InsertBookmark }

現在更新的功能應該是這樣的

var nicSelectOptions = { 
    buttons: { 
     'fontSize': { 
      name: __('Select Font Size'), 
      type: 'nicEditorFontSizeSelect', 
      command: 'fontsize' 
     }, 
     'fontFamily': { 
      name: __('Select Font Family'), 
      type: 'nicEditorFontFamilySelect', 
      command: 'fontname' 
     }, 
     'fontFormat': { 
      name: __('Select Font Format'), 
      type: 'nicEditorFontFormatSelect', 
      command: 'formatBlock' 
     }, 
     'CustomBookmark': { 
      name: __('Insert Bookmark'), 
      type: 'nicEditorInsertBookmark', // 
      command: 'InsertBookmark' //InsertBookmark 
     } 
    } 
}; 

現在轉到線1385或 更新:功能(A){ 將其更改爲

update: function (A) { 
     // alert(this.options.command); 
     if (this.options.command == 'InsertBookmark') {+ 
var editor = nicEditors.findEditor("area2"); 
     var range = editor.getRng(); 
     var editorField = editor.selElm(); 

      editorField.nodeValue = editorField.nodeValue.substring(0, range.startOffset) + A + editorField.nodeValue.substring(range.endOffset, editorField.nodeValue.length); 
} 
     else { 
      // alert(A); 
      /* END HERE */ 
      this.ne.nicCommand(this.options.command, A); 
     } 
     this.close() 
    } 

On DropDown選項單擊此按鈕將在文本編輯器中的光標位置上添加下拉值。

結束時,你應該能看到結果

+0

從您包含的鏈接中添加特定的相關內容將有助於使這個答案對未來的訪問者更有用。 [查看本文相關文章獲取更多信息](http://meta.stackexchange.com/questions/7515/why-is-linking-bad)。 –

+0

是的我明白,但它的一個大帖子,無法總結。此外,谷歌沒有一個單一的鏈接做到這一點,所以寫這篇文章來幫助其他人 –

+0

請認識到,如果這個鏈接永遠消失,這個答案將是完全沒有用的未來的訪客。當然,可以在這裏添加一些相關的部分來緩解這種情況。這可能需要一些額外的努力,但StackOverflow中有很多「大」的答案。 –

1

VAR nicInstance = nicEditors.findEditor( '選項1'); var messageContent = nicInstance.getContent();

其中選項1是textarea的