How to save rich text editor data to Airtable database

Other Questions Airtable
1

I’m working on a web application that uses a rich text editor and I need help with saving the editor content to my Airtable database when users click a submit button.

My plan is pretty straightforward: get the text from the editor, grab some user info and database details, then add a new record to Airtable. But I’m having issues with my function and it’s not working properly. Could someone check my code and help me figure out what’s wrong?

Here’s my current setup:

HTML Head Section:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill.min.js"></script>
<script src="https://unpkg.com/airtable/build/airtable.browser.js"></script>
<script>
  var editor = new Quill('#textEditor', {
    theme: 'snow',
    modules: {
      toolbar: true
    }
  });
</script>

Main Content:

<div id="textEditor">Enter your content here...</div>
<br>
<button onclick="saveContent()" class="submit-btn">Save Entry</button>

<script>
  function saveContent(){
    var content = editor.root.innerHTML;
    submitToDatabase(content);

    function submitToDatabase(content){
      var userID = window['current_user']['record_id']
      var database = new Airtable({apiKey: 'your_api_key'}).base('base_id_here');
    }

    database('Posts').create([
      {
        "fields": {
          "Text":content,
          "Author": [
            userID
          ]
        }
      }
    ], function(error, records) {
      if (error) {
        console.error(error);
        return;
      }
    });
  }
</script>
2

Everyone’s right about the scope issue, but you’ve got bigger problems. Wrap your save operation in try-catch - Airtable’s SDK throws exceptions before it even hits the callback, especially with network problems or bad base IDs. Found this out when my app kept crashing silently. Your current setup lets users spam the save button too. Just add var saving = false at the top, check it in saveContent(), and flip it during saves. Also check editor.getText().length before sending to Airtable. Empty rich text still has formatting markup that looks like content but isn’t.

3

Your code’s breaking because of a scope issue. You declared database inside submitToDatabase, but you’re trying to use it from outside the function.

Move the database call inside the function:

function saveContent() {
  var content = editor.root.innerHTML;
  submitToDatabase(content);

  function submitToDatabase(content) {
    var userID = window['current_user']['record_id'];
    var database = new Airtable({apiKey: 'your_api_key'}).base('base_id_here');
    
    // Move this inside the function
    database('Posts').create([
      {
        "fields": {
          "Text": content,
          "Author": [
            userID
          ]
        }
      }
    ], function(error, records) {
      if (error) {
        console.error(error);
        return;
      }
      console.log('Record created successfully:', records[0].getId());
    });
  }
}

I hit this exact problem building a feedback system last year. JavaScript’s weird with variable access across functions.

Also, throw in some user feedback - disable the button while saving or show a success message. People need to know their stuff actually saved.

4

Your problem is variable scope. You’re declaring database inside submitToDatabase but trying to use it outside that function. Move the database creation and create operation both inside submitToDatabase. Also, you’re only logging errors - add some success feedback so users know when the save actually worked. I hit this exact same scope issue last month and wasted hours debugging it. One more tip - use editor.getContents() instead of innerHTML if you want to keep the rich text as Delta format rather than HTML, depending on how you’ll display it later.

5

yeah, classic scope issue - your database variable is trapped in the wrong function. also check if window['current_user']['record_id'] is actually loaded when the button gets clicked. I’ve seen this fail silently when user data hasn’t finished loading. try adding console.log(userID) to debug that part.

6

Yeah, the scoping issue everyone’s talking about is the main problem - your Airtable create call can’t see the database variable since it’s outside the submitToDatabase function. But here’s another thing that’ll bite you: add some error handling for the Quill editor. Sometimes editor.root.innerHTML returns empty content if the editor hasn’t loaded yet, especially when users spam the submit button right after page load. I’ve been there. Try checking if (!content || content.trim() === '<p><br></p>') to catch empty submissions. Also, that hardcoded API key is gonna be a security nightmare in production. Move it to an environment variable or handle it server-side.