Я пытаюсь заставить 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-модели в форме работают отлично.
Есть предположения?
Спасибо за уделенное время, ребята :)



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Почему вы используете вызов TinyMCE init() в своем коде mounted()? Оболочка TinyMCE делает это за вас, и вы можете передать параметр init, чтобы включить нужную конфигурацию.
https://github.com/tinymce/tinymce-vue#configuring-the-editor
Я подозреваю, что ваш код mounted() инициализирует TinyMCE, а данные вашей модели Vue ничего об этом не знают - когда оболочка позже пытается инициализировать редактор, он терпит неудачу, потому что он уже инициализирован, что приводит к тому, что привязка данных не на месте.
Оболочка должна обрабатывать все это за вас ... она предназначена для добавления и удаления редактора по мере необходимости.
Я только что пробовал без него, все равно не работает ...: /
Возможно, компонент кешируется? Посмотрите на параметр :key и на то, как он может принудительно выполнить повторную визуализацию компонента, когда вы вернетесь на страницу. Если элементы DOM под TinyMCE будут удалены, TinyMCE сломается.
Я знаю, что этот пост немного устарел, но для тех, кто испытывает эту проблему, попробуйте обернуть теги компонентов редактора в блок 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 Никогда не редактируйте файлы зависимостей. Это бесполезно по многим причинам, одна из которых - исключение из репо.
Я использую это в смонтированном виде, потому что я использую TinyMCE несколько раз, и если я не сделаю этого после перехода между страницами, TinyMCE не будет работать должным образом! Спасибо за ответ