tinymce textarea 的淘汰赛 JS 问题答案

【问题标题】：Knockout JS issue with tinymce textareatinymce textarea 的淘汰赛 JS 问题
【发布时间】：2013-11-07 16:52:52
【问题描述】：

Javascript

var tiny_options = {
    height: 120,
    width: 300,
    mode: 'textareas',
    theme: 'advanced',
    theme_advanced_buttons1: 'bold,italic,underline',
    theme_advanced_buttons2: '',
    theme_advanced_fonts: 'Arial=arial,helvetica,sans-serif,Courier New=courier new,courier,monospace,Georgia=georgia,times new roman,times,serif,Tahoma=tahoma,arial,helvetica,sans-serif,Times=times new roman,times,serif,Verdana=verdana,arial,helvetica,sans-serif',
    theme_advanced_toolbar_location: 'top',
    theme_advanced_toolbar_align: 'left'
};


//tinymce.init(tiny_options); // Please, remove comment to activate the tinymce

var initData = function (d) {
    this.id = ko.observable(d.id);
    this.text = ko.observable(d.text);
};

var viewModel = function () {
    var self = this,
        data = [{
            id: 1,
            text: 'some text 1'
        }, {
            id: 2,
            text: 'some text 2'
        }];

    self.dataSet = ko.observableArray([]);

    $.each(data, function (i, d) {
        self.dataSet.push(new initData(d));
    });
};

var model = new viewModel();
ko.applyBindings(model);

用户界面

<!-- ko foreach : dataSet -->
<br>
<textarea data-bind="value: text, valueUpdate : 'change'"></textarea>
<br>
<!-- /ko -->

Link to Demo

上面，代码工作正常，即模型数据在没有tinymce 绑定的情况下很好地更新，但是当我激活tinymce 时，视图模型 observable 没有更新。我也试过 this，但没有结果。

那么，请帮我配置一下，如何使用tinymce 绑定更新视图模型可观察对象？

【问题讨论】：

标签： javascript knockout.js tinymce knockout-2.0 knockout-mvc

【解决方案1】：

看起来您需要一个 custom binding 来绑定值并将 TinyMCE 编辑器应用于您的 <textarea>。最终结果看起来像这样；

<textarea data-bind="wysiwyg: text"></textarea>

试试我在 Github 上整理的那个https://github.com/michaelpapworth/tinymce-knockout-binding

【讨论】：

【解决方案2】：

这是一个用于更新 observable 的简单自定义绑定：

ko.bindingHandlers.richTextEditor = {
    init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
        window.tinymce.init({
            target: element,
            skin: "lightgray",
            menubar: false,
            statusbar: false,
            forced_root_block: false,
            browser_spellcheck: true,
            toolbar: "bold italic underline",
            valid_elements: "strong,br,em,span[style|class|id|data],i[class]",
            formats: {
                bold: { inline: "strong" },
                italic: { inline: "em" },
                underline: { inline: "span", styles: { "text-decoration": "underline" } }
            },
            plugins: "paste",
            resize: false,
            setup: function (editor) {
                editor.on("change", function () {
                    var textInputBinding = allBindings().textInput;
                    var content = this.getContent();
                    textInputBinding && textInputBinding(content);
               });
            }
        });
    }
};

textarea 上的绑定应该是 data-bind="textInput: yourObservable"。

【讨论】：