Dec 30

Using Rich Text Box Control from Kendo UI

Kendo UI Rich Textbox Control:

http://docs.telerik.com/kendo-ui/api/javascript/ui/editor

Yes, I used this in real projects.

The following code will create a Rich Textbox Control (http://docs.telerik.com/kendo-ui/api/javascript/ui/editor). To customize the control, what buttons should appear on the toolbar, you can use the following instead of

 

//with all buttons

$("#editor").kendoEditor();
});

 

//with selected buttons

$("#topEditor").kendoEditor({
                        tools: [
                            "bold",
                            "italic",
                            "underline",
                            "strikethrough",
                            "justifyLeft",
                            "justifyCenter",
                            "justifyRight",
                            "justifyFull",
                            "createLink",
                            "unlink",
                            "insertImage",
                            "createTable",
                            "addColumnLeft",
                            "addColumnRight",
                            "addRowAbove",
                            "addRowBelow",
                            "deleteRow",
                            "deleteColumn",
                            "foreColor",
                            "backColor"
                        ]
                    });

 

 

Using CSS, you will be able to change the position of the toolbar as well as height of the toolbar. Yes, for sure, you can always customize the look and feel using CSS

 

<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/editor/index">
<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.default.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.mobile.min.css" />

<script src="http://cdn.kendostatic.com/2014.3.1119/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
</head>
<body>

<div id="example">
<textarea id="editor" rows="10" cols="30" style="height:440px">
<p><img src="../content/web/editor/kendo-ui-web.png" alt="Editor for ASP.NET MVC logo" style="display:block;margin-left:auto;margin-right:auto;" /></p>
<p>
Kendo UI Editor allows your users to edit HTML in a familiar, user-friendly way.<br />
In this version, the Editor provides the core HTML editing engine, which includes basic text formatting, hyperlinks, lists,
and image handling. The widget <strong>outputs identical HTML</strong> across all major browsers, follows
accessibility standards and provides API for content manipulation.
</p>
<p>Features include:</p>
<ul>
<li>Text formatting & alignment</li>
<li>Bulleted and numbered lists</li>
<li>Hyperlink and image dialogs</li>
<li>Cross-browser support</li>
<li>Identical HTML output across browsers</li>
<li>Gracefully degrades to a <code>textarea</code> when JavaScript is turned off</li>
</ul>
<p>
Read <a href="http://docs.telerik.com/kendo-ui">more details</a> or send us your
<a href="http://www.telerik.com/forums/">feedback</a>!
</p>
</textarea>
<script>
$(document).ready(function() {
// create Editor from textarea HTML element with default set of tools
$("#editor").kendoEditor();
});
</script>
</div>
</body>
</html>

Skip to toolbar