How do I get the contents of a nicEdit form when submitting trough ajax?

问题

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.

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.

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 issue~~ google a solution but everything I've found has been worthless.

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?

回答1:

var nicE = new nicEditors.findEditor('assignment');
question = nicE.getContent();

'assignment' is your textarea id.

the textarea content is save on question variable, hope this will help

回答2:

The following as provided by BinaryKitten from #jQuery does the same but a bit cleaner in my opinion: http://jsfiddle.net/MMzhS/5/

回答3:

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.

回答4:

var nicInstance = nicEditors.findEditor('options1'); var messageContent = nicInstance.getContent();

where options1 is id of textarea

回答5:

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

is the data's information. Also, please use $.post instead of $.get for form submissions; be nice to the internet.

回答6:

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;

回答7:

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

Link

Through editing NiceEdit js file we can add custom Combo box in 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/)

 <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

// 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

   [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:

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:

var nicSelectOptions = { buttons: { Add following below fontFormat function

'CustomBookmark': { name: __('Insert Bookmark'), type: 'nicEditorInsertBookmark', // command: '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

 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

来源：https://stackoverflow.com/questions/5207503/how-do-i-get-the-contents-of-a-nicedit-form-when-submitting-trough-ajax

标签

jquery

ajax

nicedit