Jul 26

Using Rich Text Box Control from Kendo UI #CSS #Root #JQuery #By Sayed Ahmed

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” />

http://cdn.kendostatic.com/2014.3.1119/js/jquery.min.js
http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js
</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> From: http://sitestree.com/?p=1847
Categories:CSS, Root, JQuery, By Sayed Ahmed
Tags:
Post Data:2014-12-30 21:12:39

Shop Online: https://www.ShopForSoul.com/
(Big Data, Cloud, Security, Machine Learning): Courses: http://Training.SitesTree.com
In Bengali: http://Bangla.SaLearningSchool.com
http://SitesTree.com
8112223 Canada Inc./JustEtc: http://JustEtc.net (Software/Web/Mobile/Big-Data/Machine Learning)
Shop Online: https://www.ShopForSoul.com/
Medium: https://medium.com/@SayedAhmedCanada