Home:ALL Converter>How to pass data to database using WYSIWYG HTML Javascript Editor with Django

How to pass data to database using WYSIWYG HTML Javascript Editor with Django

Ask Time:2018-07-07T03:41:59         Author:Steve Smith

Json Formatter

I've spent the morning reviewing several tutorials on youtube regarding how to create your own WYSIWYG editor. I tested the code and it works as expected in a test environment. The editor customizes the code as advertised. However, when I try to incorporate the code into a django app, it does not work. I've tried to put my django form.variable in many places, but ultimately when I am testing by putting in user data into the new WYSIWYG editor, the screen refreshes and I receive errors on the page. I am using an iframe in my HTML. Is there a straight forward solution to this or better to use one of the many WYSIWYG editors already out there? I am ultimately trying to save the data to a Postgresql database. I can't seem to get the data from the screen to the postgresql database.

My HTML

<div class="textarea">
  {{ form.textarea }}
</div>

I can't seem to figure out how to associate the custom WYSIWYG editor with this variable. I do in fact have a model, and that isn't the issue. I am able to leverage all of the other fields using a Django model appropriate and it works fine. When I try to define a WYSIWYG editor in my HTML, I can't seem to figure out how to associate it with a particular field. I'm trying to submit the form to a Postgresql database with the associated HTML fields and modifications. Perhaps I need to use Ajax to do this? I've since tried using SummerNote, and am experiencing the same problem. The editor is showing in my HTML, but am trying to associate the editor with just one field in my HTML as shown below:

  <div class="spacer89">
    <label class="label6">Book</label>
      <div id="summernote"> 
        {{ form.book }}
     </div>
    </div>

        <script>
          $('#summernote').summernote({
            placeholder: '',
            tabsize: 2,
            width: 800,
            height: 200
          });

        </script>
    </div>

I am not using {{ form.as_p }}, I am using individual variable names and can't seem to correlate the summernote editor with my book field.

Author:Steve Smith,eproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article:https://stackoverflow.com/questions/51216738/how-to-pass-data-to-database-using-wysiwyg-html-javascript-editor-with-django
yy