Adding a WYSIWYG editor to a popup form

Title:

BI{code} ?

I'm trying to add in a WYSIWYG editor to a popup form and I'm having a hard time getting it to work. I'm trying to have a user enter a template that can be stored for form email processing. I can get the editor to work in a project that doesn't use Awesome, but when I try adding it to my Awesome project it won't work. I'm assuming it has to do with scripts not being loaded in the proper order but I'm unsure how to verify that. What's the best way to go about adding one of these editors to a popup form?

Save Changes Cancel

I'm trying to add in a WYSIWYG editor to a popup form and I'm having a hard time getting it to work. I'm trying to have a user enter a template that can be stored for form email processing. I can get the editor to work in a project that doesn't use Awesome, but when I try adding it to my Awesome project it won't work. I'm assuming it has to do with scripts not being loaded in the proper order but I'm unsure how to verify that. What's the best way to go about adding one of these editors to a popup form?

Sean Davidson

asked at 14 Sep 2021

Answers 

• BI{code} ?

  we have a demo for this on this page: https://prodinner.aspnetawesome.com/Feedback ( click "Create" ), you can download the prodinner demo and have a look at the code the usual problem is that the js for these editors is executed on document.ready, but the popup is opened after, in the view code `Feedback/Create.cshtml` you'll see this: <script> var editor; ClassicEditor .create(document.querySelector('#Comments'), { toolbar: ['heading', '|', 'bold', 'italic', 'bulletedList', 'numberedList', 'blockQuote', 'insertTable'] }) .then(newEditor => { editor = newEditor; }) .catch(error => { console.error(error); }); $('#Comments').closest('form').submit(function () { var editorData = editor.getData(); $('#Comments').val(editorData); }); </script> <style> .ck-editor__editable_inline { min-height: 200px; } </style> you can see the `id` ( `#Comments` ) of the textarea is passed to the CKEditor js code

  Save Changes Cancel

  we have a demo for this on this page: https://prodinner.aspnetawesome.com/Feedback ( click "Create" ), you can download the prodinner demo and have a look at the code the usual problem is that the js for these editors is executed on document.ready, but the popup is opened after, in the view code

  Feedback/Create.cshtml

  you'll see this:

  <script>
      var editor;
      ClassicEditor
          .create(document.querySelector('#Comments'),
              {
                  toolbar: ['heading', '|', 'bold', 'italic', 'bulletedList', 'numberedList', 'blockQuote', 'insertTable']
              })
          .then(newEditor => { editor = newEditor; })
          .catch(error => {
              console.error(error);
          });
  
      $('#Comments').closest('form').submit(function () {
          var editorData = editor.getData();
          $('#Comments').val(editorData);
      });
  </script>
  
  <style>
      .ck-editor__editable_inline {
          min-height: 200px;
      }
  </style>

  you can see the

  id

  (

  #Comments

  ) of the textarea is passed to the CKEditor js code

  

  Omu

  answered at 14 Sep 2021

please Sign In to leave an answer