Form save using ckeditor in asp.net and sql server

Question

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 :

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

if someone knows how to do that, with other wysiwyg, it is also appreciated — Guillermo Navarro
– Guillermo Navarro, Commented Aug 11, 2016 at 15:05

VDWWD · Accepted Answer · 2016-08-11 20:04:51Z

1

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()

edited Aug 11, 2016 at 20:04

answered Aug 11, 2016 at 19:58

VDWWD

35.7k23 gold badges67 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Guillermo Navarro Over a year ago

Now the problem is that I do not always print the textarea when I want to edit , so it is sometimes printed and sometimes not. But great answer.

Guillermo Navarro Over a year ago

someone have any idea that can be?

VDWWD Over a year ago

I'm not sure what you mean by printing? You want to send the content of a CKEditor to a physical printer?

Guillermo Navarro Over a year ago

No, no i only want to see in the textarea when i want to edit the saved text, sorry for my bad english

VDWWD Over a year ago

You can do that by wrapping CKEDITOR.replace in a function and call that function with a button. If you don't want a textarea visible at all wrap it in a hidden <div> and show it when the same edit button is clicked.

|

Collectives™ on Stack Overflow

Form save using ckeditor in asp.net and sql server

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related