Лучший способ сохранить значения стиля в JSON

#javascript #html #css #json #architecture

#javascript #HTML #css #json #архитектура

Вопрос:

IMGUR: https://imgur.com/a/uToKdKp

Привет всем, предполагается, что у нас есть экран редактора, подобный тому, который у нас есть здесь, в Stackoverflow, для составления вопроса. Как только мы нажмем кнопку отправить, серверная часть должна вызвать метод для генерации JSON. Мои вопросы:

  1. Как хранятся значения JSON? Если у меня есть сообщение, и я хочу изменить color или font size текста, например, слово JSON в этой строке JSON (JavaScript Object Notation, pronounced /ˈdʒeɪsən/; also /ˈdʒeɪˌsɒn/) is an open standard file format, and data interchange format, that uses human-readable text to store and transmit data objects consisting of attribute–value pairs and array data types (or any other serializable value) , не затрагивая остальную часть строки, будет ли правильная схема такой, как показано ниже:
 {
    "title": title,
    content: [
        {
            "type": "text",
            "value": "<style="color:red">JSON</style> (JavaScript Object Notation, pronounced /ˈdʒeɪsən/; also /ˈdʒeɪˌsɒn/) is an open standard file format, and data interchange format, that uses human-readable text to store and transmit data objects consisting of attribute–value pairs and array data types (or any other serializable value)."
        },
        {
            "type": "image",
            "value": "imageId"
        }
    ]
}
 
  1. Если бы я сделал схему, подобную приведенной выше, как только я получу JSON от клиента, я предвижу проблему с перебором всей строки и выделением необходимых стилей. Поэтому я не думаю, что моя приведенная выше схема оптимизирована. Каковы некоторые из лучших способов приблизиться к этому сценарию?
  2. Поток генерации JSON: обычно при нажатии кнопки «Опубликовать» этот редактор отправляет POST-запрос на сервер, который, в свою очередь, генерирует JSON? Если да, то что включено в этот POST-запрос?

Ответ №1:

1:

ну да, на мой взгляд, подход довольно хорош по следующей причине

  • если вы используете contenteditable div, вы можете напрямую установить innerHTML via JavaScript без какого-либо синтаксического анализа ….. или вы можете использовать id (ы) для его пользовательского стиля.

2:

Это неплохой подход, поскольку всем легко управлять.

3:

Я не знаю о черновиках запросов, но при отправке он выполняет или должен отправить запрос post.

Запрос post может быть выполнен с помощью fetch() like ….

 fetch(url, {
  method: 'POST', // or 'PUT'
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(data),
})
// if your api sends a confirmation response

//.then(response => response.json())
//.then(data => {
//  console.log('Success:', data);
//})
.catch((error) => {
  console.error('Error:', error);
});