How to transfer TinyMCE content to Airtable database?

Other Questions Airtable
1

Hey everyone! I’m working on an app that uses TinyMCE for text input. I want to save the content to Airtable when a button is clicked. I’ve set up TinyMCE and Airtable in my project, but I’m having trouble with the actual data transfer.

Here’s what I’m trying to do:

  1. Get the text from TinyMCE
  2. Grab some user info
  3. Create a new record in Airtable

I’ve written some code, but it’s not working as expected. Can someone take a look and help me figure out what’s wrong?

Here’s a simplified version of my code:

function sendToAirtable() {
  const content = tinyMCE.get('editor').getContent();
  const userId = getCurrentUserId();
  
  const airtable = new Airtable({ apiKey: 'mykey' });
  const base = airtable.base('mybase');
  
  base('mytable').create({
    Content: content,
    User: [userId]
  }, (err, record) => {
    if (err) {
      console.error('Error:', err);
      return;
    }
    console.log('Created record:', record.getId());
  });
}

Any ideas on what I might be doing wrong? Thanks in advance for your help!

2

hey harry, i’ve done this before. make sure ur airtable api key and base ID are correct. also, check if the table name and field names match exactly in ur code. if that doesn’t work, try logging the ‘content’ and ‘userId’ before sending to see if they’re correct. hope this helps!

3

I’ve dealt with similar integrations before, and one thing that often trips people up is handling the rich text content from TinyMCE. Airtable might not accept all the HTML formatting directly. You could try stripping the HTML tags or converting to Markdown before sending.

Also, double-check your Airtable field types. If ‘Content’ is set as a ‘Long text’ field, it should work fine, but if it’s a different type, you might need to adjust your data before sending.

Another tip: implement a loading state while the data is being sent. This prevents users from thinking the app is frozen if the API call takes a while. Something like this:

async function sendToAirtable() {
  setLoading(true);
  try {
    const content = tinyMCE.get('editor').getContent();
    // Rest of your code here
    // ...
  } catch (error) {
    console.error('Error:', error);
  } finally {
    setLoading(false);
  }
}

This approach has worked well for me in similar situations. Let me know if you need any more help!

4

I’ve encountered similar issues when integrating TinyMCE with Airtable. One potential problem is asynchronous execution. Try wrapping your Airtable code in a Promise and using async/await. This ensures the content is fully retrieved before sending. Also, verify your Airtable schema matches the data you’re sending. The ‘User’ field might need to be a string instead of an array, depending on your setup. Lastly, implement proper error handling to catch and log any API errors. This will provide more detailed information about what’s going wrong during the transfer process.