Как получить текст из редактора?

380

26 мая 2017, 14:43

Использую этот редактор.

Исходное поле:

<textarea class="form-control js-redactor">Это текст</textarea>

Превращается в:

<div class="redactor-box" role="application" dir="ltr">
    <ul class="redactor-toolbar" id="redactor-toolbar-0" role="toolbar" style="position: relative; width: auto; top: 0px; left: 0px; visibility: visible;">
        <li><a href="javascript:void(null);" class="re-button re-format redactor-toolbar-link-dropdown" title="Format" rel="format" role="button" aria-label="Format" tabindex="-1" aria-haspopup="true">Format</a></li>
        <li><a href="javascript:void(null);" class="re-button re-bold" title="Bold" rel="bold" role="button" aria-label="Bold" tabindex="-1">B</a></li>
        <li><a href="javascript:void(null);" class="re-button re-italic" title="Italic" rel="italic" role="button" aria-label="Italic" tabindex="-1">I</a></li>
        <li><a href="javascript:void(null);" class="re-button re-deleted" title="Strikethrough" rel="deleted" role="button" aria-label="Strikethrough" tabindex="-1">S</a></li>
        <li><a href="javascript:void(null);" class="re-button re-lists redactor-toolbar-link-dropdown" title="Lists" rel="lists" role="button" aria-label="Lists" tabindex="-1" aria-haspopup="true">Lists</a></li>
        <li><a href="javascript:void(null);" class="re-button re-image" title="Image" rel="image" role="button" aria-label="Image" tabindex="-1">Image</a></li>
        <li><a href="javascript:void(null);" class="re-button re-link redactor-toolbar-link-dropdown" title="Link" rel="link" role="button" aria-label="Link" tabindex="-1" aria-haspopup="true">Link</a></li>
    </ul>
    <span class="redactor-voice-label" id="redactor-voice-0" aria-hidden="false">Rich text editor</span>
    <div class="redactor-editor redactor-styles redactor-editor-img-edit redactor-in" aria-labelledby="redactor-voice-0" role="presentation" id="redactor-uuid-0" contenteditable="true" spellcheck="true" dir="ltr" style="min-height: 200px;">
        <p>Это текст</p>
    </div>
    <textarea class="form-control js-redactor" name="content-0" style="display: none;"></textarea>
</div>

В итоге в Vue.js если я отправляю форму, то не могу получить содержимое поля textarea. Оно просто не меняется. Это исходный HTML (Slim) код поля:

textarea.form-control.js-task-redactor :value="contentText" v-model="contentText"

По идее если что-то написать в это поле, то оно будет записано в contentText и уже далее в компоненте Vue.js работать с этой информацией. Если убрать класс js-task-redactor (этот класс инициализирует Redactor), то так оно и будет.

Как исправить эту проблему?

Answer 1

Используя директиву v-model вы связываете поле ввода с данными, Vue отслеживает изменение поля и обновляет данные. В данном случае, когда вы используете wysiwyg-редактор поверх textarea, хотя редактор вместе с изменением своего состояния обновляет связанный textarea, Vue об этом ничего не знает.

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

<redactor v-model="contentText"></redactor>

Компонент:

Vue.component('redactor', {
    template: '<textarea>{{value}}</textarea>',
    props: ['value'],
    data() {
        return {
            isWatch: true
        };
    },
    mounted() {
        var vm = this;
        $(this.$el)
            .redactor({
                callbacks: {
                    change() {
                        vm.$emit('input', this.code.get());
                        vm.isWatch = false;
                    }
                }
            });
    },
    watch: {
        value(newValue) {
            if (this.isWatch) {
                $(this.$el).redactor('code.set', newValue);
            }
            this.isWatch = true;
        }
    }
});

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Медленная загрузка JavaScript на IIS 10

Приветствую! У меня на IIS 10 есть 10 JS файлов по 5-10 КБПри заходе на сайт (Если пользователь не имеет кэша (То есть CTRL+ F5)) сайт грузит по 10-20 секунд...

277

javascript