How to submit 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 to save the editor content to my Airtable database when users click a submit button. My plan is to get the text from the editor, grab user details and database info, then add a new record.

I’m having issues with my current implementation. Can someone help me figure out what’s wrong with my approach?

HTML Setup:

<script src="https://cdn.tiny.cloud/1/your-api-key/tinymce/6/tinymce.min.js"></script>
<script>
  tinymce.init({
    selector: '#editor-field',
    branding: false,
    height: 300
  });
</script>

Main Content:

<textarea id="editor-field">Begin writing your content...</textarea>
<br><br>
<button onclick="submitToDatabase()" class="submit-btn">Save Content</button>

<script>
  function submitToDatabase(){
    var content = tinymce.get('editor-field').getContent();
    saveContent(content);
    
    function saveContent(textData){
      var currentUser = window['active_user']['record_id'];
      var database = new Airtable({apiKey: 'your-key'}).base('base-id');
    }
    
    database('Posts').create([
      {
        "fields": {
          "Post Content": textData,
          "Author": [
            currentUser
          ]
        }
      }
    ], function(error, results) {
      if (error) {
        console.error(error);
        return;
      }
    });
  }
</script>

The function runs but nothing gets saved to my database. What am I missing here?

2

Yeah, the scope issue’s right, but I hit another problem with a similar setup. You’re missing the Airtable library - I don’t see it in your HTML. You need the script tag before your code will work.

Add this to your HTML head:

Check your browser’s network tab in dev tools when you click submit. If the API call’s failing because of CORS or auth issues, you’ll see the real error there instead of weird undefined behavior. I wasted hours debugging what was just an expired API key.

Also verify window['active_user']['record_id'] actually has a valid record ID. If it’s undefined or malformed, Airtable sometimes just silently rejects the whole request.

3

I had the same issue with TinyMCE and Airtable. Besides the scoping problem mentioned earlier, you’re probably dealing with HTML encoding issues. Rich text editors spit out HTML tags and special characters that mess with Airtable’s API.

Log the content first to see what you’re actually working with:

var content = tinymce.get('editor-field').getContent();
console.log('Content to save:', content);

If you’re getting HTML when you wanted plain text, use getContent({format: 'text'}) instead. Also make sure your Airtable field is set to “Long text” not “Single line text” - rich content usually breaks the single line limit.

Double-check your base ID and table name too. Airtable’s case sensitive, so “Posts” vs “posts” will break things. Your error handling should catch most API problems, but network issues sometimes fail silently.

4

Your problem is scope - you’re defining database inside saveContent but trying to use it outside that function.

Move the Airtable setup and create call inside saveContent:

function submitToDatabase(){
  var content = tinymce.get('editor-field').getContent();
  saveContent(content);
  
  function saveContent(textData){
    var currentUser = window['active_user']['record_id'];
    var database = new Airtable({apiKey: 'your-key'}).base('base-id');
    
    database('Posts').create([
      {
        "fields": {
          "Post Content": textData,
          "Author": [
            currentUser
          ]
        }
      }
    ], function(error, results) {
      if (error) {
        console.error(error);
        return;
      }
      console.log('Record created:', results[0].getId());
    });
  }
}

Add a success message so you know when it works. I’ve hit this same scoping issue when refactoring - it’s easy to miss when moving variables around.

Double check your API key has write permissions and that field names match exactly what’s in your Airtable base.

5

the nested function setup seems off. why not throw everything straight into submitToDatabase()? having saveContent buried inside just makes debugging a pain. also, make sure tinymce’s actually loaded before you call get() - I’ve seen the editor not be ready when people spam the submit button.