jQuery 通过ajax提交时如何获取nicEdit表单的内容？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5207503/
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
How do I get the contents of a nicEdit form when submitting trough ajax?
提问by Rovanion
So what I want to do is to submit a form using jQuery's AJAX function. And the route I choose to go was to use $('#form').serialize(); and then pass that as a GET request. It works out all dandy and fine and dandy until I add the editor, NicEdit, that I'm going to use on the site.
所以我想做的是使用jQuery的AJAX函数提交一个表单。我选择的路线是使用 $('#form').serialize(); 然后将其作为 GET 请求传递。在我添加我将在网站上使用的编辑器 NicEdit 之前，一切都很好，很好，很花哨。
I've researched the issue and the situation is so that once NicEdit takes over a text-area for example, it hides the text-area to the user and instead has her write into a . This data will then be put back into the text-area triggered by the push of a normal submit button.
我已经研究过这个问题，情况是这样，例如，一旦 NicEdit 接管文本区域，它就会向用户隐藏文本区域，而是让她写入 . 然后，这些数据将被放回由按下普通提交按钮触发的文本区域。
Now the issue is: I don't have a normal submit button and hence don't trigger the event that puts the data back in the text-area. And I have tried my best to solve the issuegoogle a solution but everything I've found has been worthless.
现在的问题是：我没有普通的提交按钮，因此不会触发将数据放回文本区域的事件。我已经尽力解决这个问题google a solution 但我发现的一切都是毫无价值的。
Given the fallowing basic setup of my situation: http://jsfiddle.net/MMzhS/1/- How would you get the data from the NicEdit form to the text-area before alert(); is called?
鉴于我的情况的基本设置：http: //jsfiddle.net/MMzhS/1/- 在 alert() 之前，您如何将 NicEdit 表单中的数据获取到文本区域；叫做？
回答by Sunu Pinasthika Fajar
var nicE = new nicEditors.findEditor('assignment');
question = nicE.getContent();
'assignment' is your textarea id.
'assignment' 是你的 textarea id。
the textarea content is save on question variable, hope this will help
textarea 内容保存在问题变量中，希望这会有所帮助
回答by Rovanion
The following as provided by BinaryKitten from #jQuery does the same but a bit cleaner in my opinion: http://jsfiddle.net/MMzhS/5/
以下由 #jQuery 的 BinaryKitten 提供的功能相同，但在我看来更清晰：http: //jsfiddle.net/MMzhS/5/
回答by Pramod
Create a nicEdit instance
MyApp.editor = new nicEditor().panelInstance('texarea_id');
Let the user enter content to their heart's content! (Pun unintended)
Get the content:
var content = MyApp.editor.instanceById('textarea_id').getContent();
Post the content as usual using
content.
创建一个 nicEdit 实例
MyApp.editor = new nicEditor().panelInstance('texarea_id');
让用户输入内容到心满意足！（双关语无意）
获取内容：
var content = MyApp.editor.instanceById('textarea_id').getContent();
像往常一样使用 发布内容
content。
回答by Ravi
var nicInstance = nicEditors.findEditor('options1'); var messageContent = nicInstance.getContent();
var nicInstance = nicEditors.findEditor('options1'); var messageContent = nicInstance.getContent();
where options1 is id of textarea
其中 options1 是 textarea 的 id
回答by panky sharma
for people who are wondering how to add a custom combobox in nicEdit, here is my blog post to display a custom dropdown with dynamic values
对于想知道如何在 nicEdit 中添加自定义组合框的人，这是我的博客文章，用于显示带有动态值的自定义下拉列表
Through editing NiceEdit js file we can add custom Combo box in NicEdit
通过编辑 NiceEdit js 文件，我们可以在 NicEdit 中添加自定义组合框
Through Following way we can add dropdown or combobox to NicEdit. You can get dropdown value from database through ajax call and show it in NicEdit First of all download and implement NicEdit on aspx page Download the NiceEdit js file and you can enable it by following code (http://nicedit.com/)
通过以下方式，我们可以向 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>
Now add getddlData() Ajax function in niceEdit.js file in the end of the file
现在在文件末尾的 niceEdit.js 文件中添加 getddlData() Ajax 函数
// 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;
}
// Add a webMethod in codebehind (.cs file) to fetech dropdown value into nicedit
// 在代码隐藏（.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: @@Test@@,TestOne, TestOne, @@Test2@@,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;
}
Now open NicEdit js file and copy (Line no 1552) or search following line:
现在打开 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*/
},
});
Got to line no 1230 or search following line:
转到第 1230 行或搜索以下行：
var nicSelectOptions = { buttons: { Add following below fontFormat function
var nicSelectOptions = { 按钮：{ 在 fontFormat 函数下面添加以下内容
'CustomBookmark': { name: __('Insert Bookmark'), type: 'nicEditorInsertBookmark', // command: 'InsertBookmark' //InsertBookmark }
'CustomBookmark': { name: __('Insert Bookmark'), type: 'nicEditorInsertBookmark', // 命令：'InsertBookmark' //InsertBookmark }
now updated function should look like this
现在更新的功能应该是这样的
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
}
}
};
Now goto line 1385 or update: function (A) { Change it to
现在转到第 1385 行或更新：function (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 options click This will add Drop down value in text Editor on cursor position.
在下拉选项上单击这将在光标位置的文本编辑器中添加下拉值。
END, you should able to see results
结束，您应该可以看到结果
回答by Dan
var data = $('#peter div').eq(90).text();
is the data's information. Also, please use $.postinstead of $.getfor form submissions; be nice to the internet.
是数据的信息。另外，请使用$.post代替$.get表单提交；善待互联网。
回答by Apache
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;
