V-модель и TinyMCE не работают вместе

Я пытаюсь заставить Vuejs и TinyMCE работать вместе. Я использую пакет @ tinymce / tinymce-vue, который является интеграцией vue для TinyMCE. Я выполнил все инструкции, и, похоже, все работает, я имею в виду, что я могу правильно писать, вставлять изображение ... все, кроме части v-модели.

Вот упрощенный шаблон:

<form action = "/http://localhost:4000/articles" method = "POST">

   <input id = "data_title" class = "input-title" v-model = "title" type = "text"/>

   <editor id = "editor" v-model = "content"></editor>

   <textarea id = "data_description" v-model = "description" class = "input-resume"></textarea>
</form>

Часть сценария:

 export default {
    data() {
        return {
            title: "",
            description: "",
            content:"",
        }
    },

    mounted() {
        tinymce.init({
            selector: '#editor',
            plugins: "image",
            toolbar: [
                'undo redo | styleselect | bold italic | link image',
                'alignleft aligncenter alignright'
            ]
        });
    }

Я отправляю свои данные в Rest API с помощью axios:

 axios.post('http://localhost:4000/articles', {
                title: this.title,
                description: this.description,
                content: this.content,
            })
                .then(function (response) {
                    console.info(response);
                })
                .catch(function (error) {
                    console.info(error);
                });
        },

Все ок, ошибок нет. После публикации статьи у меня есть заголовок и описание, но нет содержания. V-модель, похоже, не привязана к <editor></editor>, потому что в chrome devtool ничего не происходит, когда я пишу в нем. Остальные v-модели в форме работают отлично.

Есть предположения?

Спасибо за уделенное время, ребята :)

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
3 647
3

Ответы 3

Почему вы используете вызов TinyMCE init() в своем коде mounted()? Оболочка TinyMCE делает это за вас, и вы можете передать параметр init, чтобы включить нужную конфигурацию.

https://github.com/tinymce/tinymce-vue#configuring-the-editor

Я подозреваю, что ваш код mounted() инициализирует TinyMCE, а данные вашей модели Vue ничего об этом не знают - когда оболочка позже пытается инициализировать редактор, он терпит неудачу, потому что он уже инициализирован, что приводит к тому, что привязка данных не на месте.

Я использую это в смонтированном виде, потому что я использую TinyMCE несколько раз, и если я не сделаю этого после перехода между страницами, TinyMCE не будет работать должным образом! Спасибо за ответ

blickblick 27.09.2018 17:18

Оболочка должна обрабатывать все это за вас ... она предназначена для добавления и удаления редактора по мере необходимости.

Michael Fromin 27.09.2018 18:13

Я только что пробовал без него, все равно не работает ...: /

blickblick 27.09.2018 18:48

Возможно, компонент кешируется? Посмотрите на параметр :key и на то, как он может принудительно выполнить повторную визуализацию компонента, когда вы вернетесь на страницу. Если элементы DOM под TinyMCE будут удалены, TinyMCE сломается.

Michael Fromin 27.09.2018 18:54

Я знаю, что этот пост немного устарел, но для тех, кто испытывает эту проблему, попробуйте обернуть теги компонентов редактора в блок div следующим образом:

<form action = "/http://localhost:4000/articles" method = "POST">

   <input id = "data_title" class = "input-title" v-model = "title" type = "text"/>

   <div>
       <editor id = "editor" v-model = "content"></editor>
   </div>

   <textarea id = "data_description" v-model = "description" class = "input-resume"></textarea>
</form>

Это сработало для меня, и я надеюсь, что это поможет.

Думаю, я нашел решение. Если вы используете vue-tinymce-editor

Из TinymceVue.vue (в \ node_modules \ vue-tinymce-editor \ src \ components \ TinymceVue.vue) удалите этот код:

        value : function (newValue){
            if (!this.isTyping){
                if (this.editor !== null)
                    this.editor.setContent(newValue);
                else
                    this.content = newValue;
            }
        },

И вам не нужно инициализировать в смонтированном ()

В TinyMCE для Vue так много ошибок, что иногда приходится искать решения в исходных файлах: P

Я также отредактировал несколько других строк: content : '', - content : this.value, И из смонтированного я удалил: this.content = this.value;

Kamil Kanik 11.05.2019 01:24

любое лучшее решение без редактирования исходных файлов

Johhn 04.09.2019 20:17

@Kamil Никогда не редактируйте файлы зависимостей. Это бесполезно по многим причинам, одна из которых - исключение из репо.

rjcarl 21.08.2020 17:54

Другие вопросы по теме