tinymce
https://groups.google.com/d/topic/knockoutjs/yZIZ2QXWEPo/discussion
HTML
<script src=" http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.1.0.js"></script>
<script src="http://tinymce.cachefly.net/4.0/tinymce.min.js"></script>
<script src="http://tinymce.cachefly.net/4.0/jquery.tinymce.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<textarea data-bind="tinymce: content"></textarea>
CSS
body, html
{
height: 100%;
}
textarea
{
height: calc(100% - 38px);
}
JavaScript
var tinymce_config = {
mode: "exact",
width: "100%",
height: "100%",
autoresize: true,
};
(function($) {
var instances_by_id = {} // needed for referencing instances during updates.
, init_queue = $.Deferred() // jQuery deferred object used for creating TinyMCE instances synchronously
, init_queue_next = init_queue;
init_queue.resolve();
ko.bindingHandlers.tinymce = {
init: function (element, valueAccessor, allBindingsAccessor, context) {
var options = allBindingsAccessor().tinymceOptions || {
menubar : false,
statusbar : false,
paste_as_text: true,
toolbar: "bold italic hr | link unlink | bullist numlist | fullscreen",
plugins: "link,paste,fullscreen",
file_browser_callback : function(){alert("Hallo Welt!")}
};
var modelValue = valueAccessor();
var value = ko.utils.unwrapObservable(valueAccessor());
var el = $(element)
//handle edits made in the editor. Updates after an undo point is reached.
options.setup = function (ed) {
ed.on('change', function(e) {
if (ko.isWriteableObservable(modelValue)) {
modelValue(ed.getContent());
}
});
ed.on('keyup', function(e) {
if (ko.isWriteableObservable(modelValue)) {
modelValue(ed.getContent({format: 'raw'}));
}
});
};
//handle destroying an editor
ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
setTimeout(function(){$(element).tinymce().remove()}, 0)
});
//$(element).tinymce(options);
setTimeout(function() { $(element).tinymce(options); }, 0);
el.html(value);
},
update: function (element, valueAccessor, allBindingsAccessor, context) {
var el = $(element)
var value = ko.utils.unwrapObservable(valueAccessor());
var id = el.attr('id')
//handle programmatic updates to the...