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

Question

Я пытаюсь заставить Вуэйса и 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'
            ]
        });
    }

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

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

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

Есть мысли?

Спасибо за ваше время, ребята :):

Answer 1

Я знаю, что этот пост немного устарел, но для тех, кто испытывает эту проблему, попробуйте обернуть теги компонента редактора в блок 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>

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

Answer 2

Я думаю, что нашел решение.Если вы используете 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;
            }
        },

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

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

Answer 3

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

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

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