How to get rich text data from Quill editor to pass through to Memberstack custom fields? Answered

• 

  Julian Galluzzo

  • June 25, 2023 20:19

  Hey Brian, if you could give me the following I can figure it out and get you a loom:

  1. Read only link
  2. Live link
  3. Demo credentials
  0
• 

  Jayess

  • June 25, 2023 20:21

  Hey Julian Galluzzo Not sure you’re still around but I see this error (check screenshot) and we added an (if) statement to check for a null value.

  Also changed the querySelector to match the customField we want it to be saved in Memberstack (data-ms-member=“experience”)

  Josh Lopez Can you check to see if you notice anything else? https://hustlewing-v1-1.webflow.io/members/create-profile

  I’m not seeing any errors in the console anymore when the page has submitted, so I’m not sure the code is even running, but all the other fields are being saved in Memberstack BUT the quill section.

  The code is from the article
  New code we’re trying:

  script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
  
  <script>
  document.addEventListener('DOMContentLoaded', function() {
    var quill = new Quill('#editor', {
      modules: {
        toolbar: [
          [{ 'header': [2, 3, 4, 5, 6, false] }],
          ['bold', 'italic', 'underline', 'strike'],
          ['blockquote', 'code-block', 'link'],
          [{ 'list': 'ordered'}, { 'list': 'bullet' }],
          ['clean']
        ]
      },
      placeholder: 'Type something here...',
      theme: 'snow'
    });
  
    var notesField = document.querySelector('[data-ms-member="experience"]');
    if (notesField) {
      var html = notesField.value;
      var quillDelta = quill.clipboard.convert(html);
      quill.setContents(quillDelta);
      quill.on('text-change', function(delta, oldDelta, source) {
        notesField.value = quill.root.innerHTML;
      });
    }
  
    var form = document.querySelector('#post-form');
    if (form) {
      form.onsubmit = function() {
        var about = document.querySelector('textarea[name=Description]');
        about.value = quill.root.innerHTML;
        notesField.value = quill.root.innerHTML;
        console.log("Submitted", $(form).serialize(), $(form).serializeArray());
        return false;
      };
    }
  });
  </script>

  
  0
• 

  Josh Lopez

  • June 25, 2023 20:21

  Try adding an event listener like:
  object.addEventListener("submit", myScript);

  Instead of the .onSubmit

  0
• 

  Jayess

  • June 25, 2023 20:22

  <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
  
  <script>
  document.addEventListener('DOMContentLoaded', function() {
    var quill = new Quill('#editor', {
      modules: {
        toolbar: [
          [{ 'header': [2, 3, 4, 5, 6, false] }],
          ['bold', 'italic', 'underline', 'strike'],
          ['blockquote', 'code-block', 'link'],
          [{ 'list': 'ordered'}, { 'list': 'bullet' }],
          ['clean']
        ]
      },
      placeholder: 'Type something here...',
      theme: 'snow'
    });
  
    var notesField = document.querySelector('[data-ms-member="experience"]');
    if (notesField) {
      var html = notesField.value;
      var quillDelta = quill.clipboard.convert(html);
      quill.setContents(quillDelta);
      quill.on('text-change', function(delta, oldDelta, source) {
        notesField.value = quill.root.innerHTML;
      });
    }
  
    var form = document.querySelector('#post-form');
    if (form) {
      form.addEventListener("submit",  function() {
        var about = document.querySelector('textarea[name=Description]');
        about.value = quill.root.innerHTML;
        notesField.value = quill.root.innerHTML;
        console.log("Submitted", $(form).serialize(), $(form).serializeArray());
        return false;
      };
    )}
  });
  </script>

  Brian Ficho Can you try this 

  0
• 

  Julian Galluzzo

  • June 25, 2023 20:23

  Brian Ficho https://www.loom.com/share/5e57e9fd50974142872612a0c84dcf3c

  And another video just to show a test: https://www.loom.com/share/5a22a7c777834f0b8d856b6825cf8bdd

  0
• 

  Brian Ficho

  • June 25, 2023 20:39

  Thanks Julian Galluzzo Jayess - Got it working!

  If it’s helpful to anyone else, it seems there were 2 things I needed to line up that throughout my testing that I guess I never did properly until you showed me these videos

  1 - data-ms-member=“experience” needed to be only on the hidden field for the RTE
  2 - I needed to update the code in the /body text to match “experience” vs “notes”, the default from the tutorial

  0

Please sign in to leave a comment.