@nohup

Вывод HTML в Nuxt.js из EditorJs. Как?

Привет братцы. Мое слабоумие не позволяет мне решить эту проблему самому. Мучаюсь два дня. В нуксте новичек.
Ситуация: подключил к нуксту редактор текста editorjs . Здесь проблем нет.
Нужно сохранять два вида данных - json (тут сохраняет корректно) и html, чтобы потом выводить его в статье для просмотра. Json нужен для редактирования статьи. По умолчанию, editorjs не сохраняет данные в html. Для этого есть плагин editorjs-html. Он парсит JSON в HTML.

Проблема: мучаюсь с выводом HTML на фронте нукста. Плюс есть проблемы с сохранением HTML базу, а именно траблы с юникодом. Как HTML выглядит в бд:
624739286210f367378343.jpeg

Как выглядит вывод на фронте:
624739ebb054f421075348.jpeg

Как вывожу:

<div v-for="data in content_html">
      <div v-html="data"></div>
    </div>


Фетчу данные из БД так:

data: () => ({
    data: []
  }),
  async fetch () {
    this.data = await this.$axios.$get(`api/articles/show/${this.$route.params.id}`)
  },


И получаю бороду.

Кусок кода как идет сохранение json'a и html в бд:

saveArticle() {

      this.editor.save().then((outputData) => {
        let rawData =  edjsParser.parse(outputData);

        let form = {
          "title": this.data.title,
          "description": this.data.description,
          "content_html": rawData,
          "content_json": outputData,
        }

        this.$axios.patch(`/api/articles/${ this.$route.params.id }/update`, form).then((res) =>
          console.log('success')
        ).catch((e) => {
          console.log(e);
        })

      }).catch((error) => {
        console.log('Saving failed: ', error)
      });
    },


Я бы мог парсить JSON "налету", из переменной типа:
data: () => ({
    title: 'Title',
    description: 'Desc',
    content_html: [],
    content_json: {"time": 1648588254264, "blocks": [{"id": "w3oJwo36ab", "data": {"text": "Какой-то текст"}, "type": "paragraph"}, {"id": "inZm069qGb", "data": {"file": {"url": "http://cfsite.test/api/public/img/48/hVHsLBD3pQinWVuPetTRAHBn8vleka5xbMY5nbCI.jpg"}, "caption": null, "stretched": false, "withBorder": false, "withBackground": false}, "type": "image"}], "version": "2.23.2"},
  }),


Но столкнулся с тем, что я не могу через фетч засунуть туда данные и потом спарсить их, выдает ошибку (я как-то не так фетчу или подключаю парсер). Пример:
data: () => ({
    data: {
      title: 'Title',
      description: 'Desc',
      content_html: [],
      content_json: [],      
    },
  }),
  async fetch () {
    this.data = await this.$axios.$get(`api/articles/show/${this.$route.params.id}`)
  },
  mounted() {
    let html = edjsParser.parse(this.data.content_json)
    this.data.content_html = html
  },


Пробовал и через метод, и через created, -- ошибка. Он не видит там "даты". Если делать тоже самое вне нукста, например просто в обычном html файле, то всё работает (исключал неработоспособность парсера).
62473ca6cd535589097286.jpeg

Еще удавалось достичь такого вывода:
62473cfb07ba4507662875.jpeg

Тестим, получает ли он вообще какие-то данные по АПИ, смотрим в консоль, там все ок:
62473dcf637f0450761478.jpeg

Я понимаю, что я делаю что-то не так, но не могу допереть, что именно. Нужна помощь. Спасибо!
  • Вопрос задан
  • 248 просмотров
Пригласить эксперта
Ответы на вопрос 1
@cheeroque
Сложно конечно разобраться в коде, где каждая вторая переменная называется data, но вы не пробовали edjsParser.parse вызывать прямо в async fetch, после того как await дождётся данных от сервера? Потому что похоже, что mounted просто срабатывает раньше, чем в data что-то появится.
Ну или сделать computed, в котором сначала проверять, получены ли уже данные, и если получены — парсить.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы