CODEWITHSUNDEEP
javascriptjqueryasp.netsql-server
Guillermo Navarro
Guillermo Navarro

Reputation: 267

Form save using ckeditor in asp.net and sql server

I try to save my form with CKEditor and add autosave function mean all input will autosave:

    <script>
    CKEDITOR.replace('Perfil_Descripcion');
</script>

<script>
    $('document').ready(function () {
        $('#preview').hide(); //Default setting
        for (instance in CKEDITOR.instances) {

            CKEDITOR.instances[instance].updateElement(); //fix texrarea update value

            CKEDITOR.instances[instance].on('key', function () { //save, here comes the error
                $("#btnUpdatePerfil").trigger('click');
            });

        }
    });
    //Save in db
    function CKUpdate() {
        for (instance in CKEDITOR.instances) {

            CKEDITOR.instances[instance].updateElement(); 


            $('#generalform').ajaxForm({ 
                target: '#preview',
                success: function () {
                    $('#preview').show('slow').delay(800).hide('slow');
                }
            });
        }
    }

                            <form id="generalform" method="get" action="?">

                            <h3 class="page-header">Descripcion sobre tu persona</h3>
                                        <div class="row">
                                            <div class="col-sm-12">
                                                <div class="form-group">
                                                    <!--<textarea id="editor" class="form-control"></textarea>-->
                                                    <textarea class="form-control" rows="9" id="Perfil_Descripcion" name="Perfil_Descripcion"></textarea>
                                                    <span id="preview"></span>
                                                </div><!-- /.form-group -->
                                            </div>
                                        </div>
                                     </form>

My problem is :

  1. This autosave CKupdate() (refer line -> comment //auto save ) trigger when i put some text, but have bugs, because save it sometimes. Im not sure how to fix the bug.
  2. After user press save, save function will trigger everytime user insert any string inside textarea and after few second my browser will hang. I think this on('key', not function well or maybe need to change to someting else, like a click function, but also have bugs and sometimes save it.

what im trying to do actually is create textarea with CKEditor then save value into db and create a function to display in the textarea for edit the content.

Another problem is that I have to quickly press the save button.

Upvotes: 0

Views: 1298

Answers (1)

VDWWD
VDWWD

Reputation: 35544

This works fine in my case:

    <script type="text/javascript" src="ckeditor.js"></script>

    <asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine"></asp:TextBox>

    <asp:Button ID="Button1" runat="server" Text="Save" OnClick="Button1_Click" />

    <script type="text/javascript">
        CKEDITOR.replace('<%=TextBox1.ClientID %>');
    </script>

For this example to work you have to set ValidateRequest="false" in the page directive , otherwise you will get a "A potentially dangerous Request.Form value was detected from the client" error.

If you want to use CKeditor without the PostBack functionality and code begind you can do this:

    <script type="text/javascript" src="ckeditor.js"></script>

    <textarea rows="9" id="Perfil_Descripcion" name="Perfil_Descripcion"></textarea>

    <input id="Button1" type="button" value="Save" onclick="saveText()" />

     <script type="text/javascript">
         CKEDITOR.replace('Perfil_Descripcion');

         function saveText() {
             //now you have the data from the editor in javascript
             var text = CKEDITOR.instances.Perfil_Descripcion.getData();
             alert(text);
         }
    </script>

From this you can also create an autosave, make a javscript function that is called with a setInterval and save the text from the editor with CKEDITOR.instances.Perfil_Descripcion.getData()

Upvotes: 1

Related Questions