Summernote.js + webpack encore - Не обновляется исходный ввод - PullRequest
Новая
       17

Summernote.js + webpack encore - Не обновляется исходный ввод

0 голосов
/ 28 апреля 2019

Я пытаюсь создать простой модуль форума, и мне нужна была простая библиотека WYSIWYG, поэтому я выбрал summernote.js. Я использую Symfony 4.2.7 (последняя версия) и webpack бис для отслеживания моих файлов js и css.

Я смог загрузить свою библиотеку Summernote следующим образом:

bootstrap.js 

import Vue from 'vue';
import BootstrapVue from 'bootstrap-vue';
import axios from 'axios';
import Swal from 'sweetalert2';

window.Vue = Vue;
Vue.use(BootstrapVue);

// Modules
window.axios = axios;
window.axios.defaults.headers.common = {
    'X-Requested-With': 'XMLHttpRequest'
};

window.Swal = Swal;

// Summernote
$('.editable-area').summernote({
    toolbar: [
        // [groupName, [list of button]]
        ['style', ['bold', 'italic', 'underline']],
        ['font', ['strikethrough', 'superscript', 'subscript']],
        ['fontsize', ['fontsize']],
        ['color', ['color']],
        ['para', ['ul', 'ol', 'paragraph']],
        ['height', ['height']]
    ],
    placeholder: '',
    minHeight: 250,
    maxHeight: 1000,
    height: 300,
});

app.js 

// Bootstrap
import './bootstrap';

// Styles
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-vue/dist/bootstrap-vue.css';
import 'sweetalert2/dist/sweetalert2.all.min';
import 'summernote/dist/summernote-lite.css';
import '../css/app.css';
import '../css/common.css';

// VueJS application
new Vue({
    el: '#app',
    data: {
        // Loading page spinner,
        isLoading: true,

        // Scroll
        showGoToTop: false,
    },
    created() {
        window.addEventListener('scroll', this.scrollHandler); // Handle scroll
        this.loaded(); // Page loaded.
    },
    methods: {
        /**
         * Page loading
         */
        loaded() {
            this.isLoading = false;
        },

        /**
         * Go to top
         */
        scrollToTop() {
            window.scroll({top: 0, left: 0, behavior: 'smooth'});
        },
        scrollHandler() {
            this.showGoToTop = document.body.scrollTop > 100 || document.documentElement.scrollTop > 100; // Display 'Go to top' button
        },
    }
});

Все работает отлично, моя летняя заметка добавлена ​​на мою страницу, но не добавлена ​​в исходную текстовую область. Библиотека отключает мою исходную текстовую область (поле с заданным классом summernote) и создает другую div с определенным дизайном summernote и данными.

Как вы видите, я использую облегченную версию summernote. Мое ожидаемое поведение: после того, как я нажму "отправить", в моем исходном текстовом поле должен быть весь текст из summernote, но исходное текстовое поле никогда не будет обновлено summernote.

Что не так?

Обновление: я только что понял, что форматирование тоже не работает.

...