contenteditable如何与后端数据同步

来源：佚名编辑：佚名

2024-06-28 13:53:49

将contenteditable元素与后端数据同步的一种常见方法是使用JavaScript来监听内容变化，并将更改的内容发送到后端。以下是一个简单的示例：

在前端页面中，使用contenteditable属性创建一个可编辑的元素，例如一个div：

<div id="editable" contenteditable="true">Editable content</div>

使用JavaScript来监听内容变化，并将更改的内容发送到后端：

// 获取可编辑元素
const editable = document.getElementById('editable');

// 监听内容变化事件
editable.addEventListener('input', function() {
  // 获取编辑后的内容
  const content = editable.innerHTML;
  
  // 发送内容到后端
  fetch('/update_data', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({content: content}),
  })
  .then(response => {
    if (!response.ok) {
      throw new Error('Failed to update data');
    }
    return response.json();
  })
  .then(data => {
    console.log('Data updated successfully');
  })
  .catch(error => {
    console.error(error);
  });
});