Editor

Description

The Editor widget allows users to create and edit HTML in an user friendly interface.

Official Kendo UI Editor documentation

Examples

  • Basic Example
  • Passing additional options
  • Using global options

This example demonstrates passing a single option to bind against the value of the Editor widget.

<textarea rows="10" cols="20" data-bind="kendoEditor: content" > </textarea>
<hr/>
<div data-bind="text: content"> </div>
var ViewModel = function() {
   this.content = ko.observable("this is a <strong>test</strong>!");
};

                            ko.applyBindings(new ViewModel());

This example demonstrates passing additional options in the data-bind attribute with content now being explicitly specified.

<textarea rows="10" cols="20" data-bind="kendoEditor: { value: content, tools: ['bold', 'italic'] }" > </textarea>
<hr/>
<div data-bind="text: content"> </div>
var ViewModel = function() {
   this.content = ko.observable("this is a <strong>test</strong>!");
};

                            ko.applyBindings(new ViewModel());

This example demonstrates setting global options in ko.bindingHandlers.kendoEditor.options. This helps to simplify the markup for settings that can be used as a default for all instances of this widget.

<textarea rows="10" cols="20" data-bind="kendoEditor: content" > </textarea>
<hr/>
<div data-bind="text: content"> </div>
var ViewModel = function() {
   this.content = ko.observable("this is a <strong>test</strong>!");
};

ko.bindingHandlers.kendoEditor.options.tools = ['bold', 'italic'];        

                            ko.applyBindings(new ViewModel());

Live Options

The kendoEditor.md binding accepts all of the options that can be specified for the widget. However, when bound against an observable, these live options will update the widget or respond to updates from interactions with the widget.
enabled

Determines if users can interact with the editor

value

The HTML output of the editor

widget

If specified, will populate an observable with a reference to the actual widget