Привязать атрибут модели магистрали к тексту TinyMCE

Я делаю форму с форматированным текстом. Для этого у меня есть TinyMCE, Backbone управляет логикой, а подчеркивание используется для создания шаблонов.

Я не могу найти способ привязать модель Backbone к значению TinyMCE?

Что-то типа:

var backboneModel = new BackBobeModel();
tinymce.init({ 
    selector:'#rich-text',
    'data-object': backboneModel.richText
});

person mindz    schedule 26.04.2017    source источник


Ответы (1)


Насколько мне известно, TinyMCE не связывается автоматически с Backbone. Поэтому я сделал простой многоразовый компонент TextArea.

Он создан из Backbone View, который инициализирует свой собственный корневой элемент <textarea> как экземпляр TinyMCE и привязывается к своему событию Change.

Компонент TinyMCE Backbone

var TextArea = Backbone.View.extend({
    tagName: 'textarea',
    initialize: function(options) {
        // set the default options
        options = this.options = _.extend({
            attribute: 'value',
            format: 'raw'
        }, options);

        // initialize a default model if not provided
        if (!this.model) this.model = new Backbone.Model();
        if (!this.getValue()) this.setValue('');

        this.listenTo(this.model, 'change:' + options.attribute, this.onModelChange);
    },
    render: function() {
        this.$el.html(this.getValue());
        tinymce.init({
            target: this.el,
            init_instance_callback: this.onEditorInit.bind(this)
        });
        return this;
    },

    // simple accessors
    getValue: function() {
        return this.model.get(this.options.attribute) || '';
    },
    setValue: function(value, options) {
        return this.model.set(this.options.attribute, value, options);
    },
    // event handlers
    onEditorInit: function(editor) {
        editor.on('Change', this.onTextChange.bind(this));
        this.editor = editor;
    },
    onTextChange: function(e) {
        this.setValue(this.editor.getContent());
    },
    onModelChange: function(model, value, options) {
        if (!this.editor) return;
        this.editor.setContent(value, { format: this.options.format });
    }
});

Используйте его как есть

Вы можете использовать его без модели, и он создаст собственную модель для отслеживания данных.

var component = new TextArea({ content: "initial content" });

Можно получить данные или даже прослушать модель компонента.

component.getValue();
// or use events:
Backbone.listenTo(component.model, 'change:value', function(model, value, options) {
    // use the new value
});

Используйте его с пользовательской моделью

Скажем, у вас есть пользовательская модель с произвольными атрибутами.

var car = new CarModel({ 
    make: "mazda", 
    description: "This is a car"
    // ...
});

Просто передайте его компоненту, определив, какой атрибут он должен использовать для обновления модели.

var component = new TextArea({ 
    model: car, 
    // 
    attribute: 'description'
});

Тот же атрибут description экземпляра исходной модели теперь будет автоматически обновляться каждый раз, когда пользователь вводит данные в поле TinyMCE.

Backbone.listenTo(car , 'change:description', function(model, value, options) {
    console.log("Car description changed:", value);
});
person Emile Bergeron    schedule 27.04.2017
comment
Спасибо. Это была большая помощь! - person mindz; 27.04.2017
comment
у меня здесь не работает stackoverflow.com/questions /54010977/ - person jcarlosweb; 03.01.2019
comment
@jcarlosweb, ты даже не используешь содержание моего ответа ... Я мало чем могу помочь. - person Emile Bergeron; 03.01.2019