Databases
StackOverflow2013
Postsdbo
PObootstrap-wysihtml5 knockout.validation
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PObootstrap-wysihtml5 knockout.validation
    text
    copied!<p>I am trying to set up knockout validation for a wysihtml5 control. Currently I have following code:</p> <pre><code>&lt;div&gt; &lt;textarea data-bind="wysihtml5: { data: Text, options: { 'font-styles': false, 'link': false, 'image': false, 'html': true } }"&gt;&lt;/textarea&gt; &lt;/div&gt; </code></pre> <p>and the viewModel:</p> <pre><code> viewModel.Text.extend({ required: true }); viewModel.saveValidationGroup = ko.validatedObservable({ Text: viewModel.Text }); viewModel.save = function () { if (!viewModel.saveValidationGroup.isValid()) { viewModel.saveValidationGroup.errors.showAllMessages(); return false; } else { console.log(ko.toJSON(viewModel.Text)); } }; </code></pre> <p>When you run the app, the control loads properly, and when the textarea is empty, there is still set for Text viewmodel Property:</p> <pre><code>&lt;span id=\"_wysihtml5-undo\" class=\"_wysihtml5-temp\"&gt;&lt;/span&gt;&lt;span&gt;&lt;br&gt;&lt;ul&gt; &lt;/ul&gt; &lt;/span&gt; </code></pre> <p>Question is what is the proper way of integrating the wysihtml5 control with knockout.validation.</p> <h2>Edit: Custom Binding</h2> <pre><code>ko.bindingHandlers.wysihtml5 = { init: function (element, valueAccessor, allBindingsAccessor, viewModel) { var options = {}; var value = ko.utils.unwrapObservable(valueAccessor()) || {}; options.events = { "change": function () { var observable; var content = ko.utils.unwrapObservable(valueAccessor()) || {}; if (content.data != undefined) { observable = valueAccessor().data; } else { observable = valueAccessor(); } observable(control.getValue()); } }; if (value.options) { ko.utils.extend(options, value.options); delete value.options; } // if the textarea has no id, generate one to keep wysihtml5 happy if ($(element).attr('id') == undefined || $(element).attr('id') == '') $(element).attr('id', 'id_' + Math.floor(new Date().valueOf())); var control = $(element).wysihtml5(options).data("wysihtml5").editor; }, update: function (element, valueAccessor, allBindingsAccessor, viewModel) { // var control = $(element).data("wysihtml5").editor; var content = ko.utils.unwrapObservable(valueAccessor()) || {}; if (content.data != undefined) { control.setValue(valueAccessor().data()); } else { control.setValue(valueAccessor()()); } } }; ko.validation.makeBindingHandlerValidatable('wysihtml5'); </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload