{"id":67642,"date":"2021-07-26T04:10:06","date_gmt":"2021-07-26T08:10:06","guid":{"rendered":"http:\/\/bangla.salearningschool.com\/recent-posts\/using-rich-text-box-control-from-kendo-ui-css-root-jquery-by-sayed-ahmed\/"},"modified":"2021-07-26T04:10:06","modified_gmt":"2021-07-26T08:10:06","slug":"using-rich-text-box-control-from-kendo-ui-css-root-jquery-by-sayed-ahmed","status":"publish","type":"post","link":"http:\/\/bangla.sitestree.com\/?p=67642","title":{"rendered":"Using Rich Text Box Control from Kendo UI #CSS #Root #JQuery #By Sayed Ahmed"},"content":{"rendered":"

Kendo UI Rich Textbox Control:<\/p>\n

http:\/\/docs.telerik.com\/kendo-ui\/api\/javascript\/ui\/editor<\/p>\n

Yes, I used this in real projects.<\/p>\n

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<\/p>\n

 <\/p>\n

\/\/with all buttons<\/p>\n

$(“#editor”).kendoEditor();
\n});<\/p>\n

 <\/p>\n

\/\/with selected buttons<\/p>\n

$<\/span>(<\/span>\"#topEditor\"<\/span>).<\/span>kendoEditor<\/span>({<\/span>\r\n                        tools<\/span>:<\/span> [<\/span>\r\n                            \"bold\"<\/span>,<\/span>\r\n                            \"italic\"<\/span>,<\/span>\r\n                            \"underline\"<\/span>,<\/span>\r\n                            \"strikethrough\"<\/span>,<\/span>\r\n                            \"justifyLeft\"<\/span>,<\/span>\r\n                            \"justifyCenter\"<\/span>,<\/span>\r\n                            \"justifyRight\"<\/span>,<\/span>\r\n                            \"justifyFull\"<\/span>,<\/span>\r\n                            \"createLink\"<\/span>,<\/span>\r\n                            \"unlink\"<\/span>,<\/span>\r\n                            \"insertImage\"<\/span>,<\/span>\r\n                            \"createTable\"<\/span>,<\/span>\r\n                            \"addColumnLeft\"<\/span>,<\/span>\r\n                            \"addColumnRight\"<\/span>,<\/span>\r\n                            \"addRowAbove\"<\/span>,<\/span>\r\n                            \"addRowBelow\"<\/span>,<\/span>\r\n                            \"deleteRow\"<\/span>,<\/span>\r\n                            \"deleteColumn\"<\/span>,<\/span>\r\n                            \"foreColor\"<\/span>,<\/span>\r\n                            \"backColor\"<\/span>\r\n                        ]<\/span>\r\n                    });<\/span>\r\n<\/pre>\n
 <\/p>\n
 <\/p>\n
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<\/p>\n
 <\/p>\n
<!DOCTYPE html>
\n<html>
\n<head>
\n<base href=”http:\/\/demos.telerik.com\/kendo-ui\/editor\/index”>
\n<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }<\/style>
\n<title><\/title>
\n<link rel=”stylesheet” href=”http:\/\/cdn.kendostatic.com\/2014.3.1119\/styles\/kendo.common.min.css” \/>
\n<link rel=”stylesheet” href=”http:\/\/cdn.kendostatic.com\/2014.3.1119\/styles\/kendo.default.min.css” \/>
\n<link rel=”stylesheet” href=”http:\/\/cdn.kendostatic.com\/2014.3.1119\/styles\/kendo.dataviz.min.css” \/>
\n<link rel=”stylesheet” href=”http:\/\/cdn.kendostatic.com\/2014.3.1119\/styles\/kendo.dataviz.default.min.css” \/>
\n<link rel=”stylesheet” href=”http:\/\/cdn.kendostatic.com\/2014.3.1119\/styles\/kendo.default.mobile.min.css” \/><\/p>\n
http:\/\/cdn.kendostatic.com\/2014.3.1119\/js\/jquery.min.js<\/a>
\nhttp:\/\/cdn.kendostatic.com\/2014.3.1119\/js\/kendo.all.min.js<\/a>
\n<\/head>
\n<body><\/p>\n
<div id=”example”>
\n<textarea id=”editor” rows=”10″ cols=”30″ style=”height:440px”>
\n<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>
\n<p>
\nKendo UI Editor allows your users to edit HTML in a familiar, user-friendly way.<br \/>
\nIn this version, the Editor provides the core HTML editing engine, which includes basic text formatting, hyperlinks, lists,
\nand image handling. The widget <strong>outputs identical HTML<\/strong> across all major browsers, follows
\naccessibility standards and provides API for content manipulation.
\n<\/p>
\n<p>Features include:<\/p>
\n<ul>
\n<li>Text formatting & alignment<\/li>
\n<li>Bulleted and numbered lists<\/li>
\n<li>Hyperlink and image dialogs<\/li>
\n<li>Cross-browser support<\/li>
\n<li>Identical HTML output across browsers<\/li>
\n<li>Gracefully degrades to a <code>textarea<\/code> when JavaScript is turned off<\/li>
\n<\/ul>
\n<p>
\nRead <a href=”http:\/\/docs.telerik.com\/kendo-ui”>more details<\/a> or send us your
\n<a href=”http:\/\/www.telerik.com\/forums\/”>feedback<\/a>!
\n<\/p>
\n<\/textarea>
\n<script>
\n$(document).ready(function() {
\n\/\/ create Editor from textarea HTML element with default set of tools
\n$(“#editor”).kendoEditor();
\n});
\n<\/script>
\n<\/div>
\n<\/body>
\n<\/html> From: http:\/\/sitestree.com\/?p=1847
 Categories:CSS, Root, JQuery, By Sayed Ahmed
Tags:
 Post Data:2014-12-30 21:12:39<\/p>\n
\t\tShop Online: https:\/\/www.ShopForSoul.com\/<\/a>
\n\t\t(Big Data, Cloud, Security, Machine Learning): Courses:  http:\/\/Training.SitesTree.com<\/a>
\n\t\tIn Bengali: http:\/\/Bangla.SaLearningSchool.com<\/a>
\n\t\thttp:\/\/SitesTree.com<\/a>
\n\t\t8112223 Canada Inc.\/JustEtc: http:\/\/JustEtc.net (Software\/Web\/Mobile\/Big-Data\/Machine Learning) <\/a>
\n\t\tShop Online:  https:\/\/www.ShopForSoul.com\/<\/a>
\n\t\tMedium:  https:\/\/medium.com\/@SayedAhmedCanada <\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
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”, … <\/p>\n
Continue reading<\/a><\/p>\n","protected":false},"author":8,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1917],"tags":[],"class_list":["post-67642","post","type-post","status-publish","format-standard","hentry","category-fromsitestree-com","item-wrap"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":22423,"url":"http:\/\/bangla.sitestree.com\/?p=22423","url_meta":{"origin":67642,"position":0},"title":"Some Resources on Development.. #Root #By Sayed Ahmed #MS SQL Server #SQL Server Reporting #Misc. Reading","author":"Author-Check- Article-or-Video","date":"March 14, 2021","format":false,"excerpt":"Tools for Business Intelligence Development in SQL Server and Visual Studio http:\/\/curah.microsoft.com\/30004\/sql-server-data-tools-ssdt-and-sql-server-business-intelligence \u00a0 ASP.NET MVC Tutorial http:\/\/www.w3schools.com\/aspnet\/mvc_intro.asp \u00a0 Web and Mobile Development with Kendo UI http:\/\/www.telerik.com\/kendo-ui#a-complete-framework-for-modern-web-and-mobile-app-development There is an Open Source Version that you can give it a try \u00a0 Kendo UI components http:\/\/demos.telerik.com\/kendo-ui\/ \u00a0 Telerik has UI components for\u2026","rel":"","context":"In "FromSitesTree.com"","block_context":{"text":"FromSitesTree.com","link":"http:\/\/bangla.sitestree.com\/?cat=1917"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":23071,"url":"http:\/\/bangla.sitestree.com\/?p=23071","url_meta":{"origin":67642,"position":1},"title":"Using Kendo Chart; Kendo Chart Events #Root #By Sayed Ahmed","author":"Author-Check- Article-or-Video","date":"March 24, 2021","format":false,"excerpt":"Using Kendo Chart; Kendo Chart Events Sayed Ahmed \u00a0 One example that helped in real projects http:\/\/demos.telerik.com\/kendo-ui\/tabstrip\/events \u00a0 The example shows how you can execute functionality on different Kendo Chart events. You can see the methods and events mapping as below $(\"#tabstrip\").kendoTabStrip({ select: onSelect, activate: onActivate, show: onShow, contentLoad: onContentLoad,\u2026","rel":"","context":"In "FromSitesTree.com"","block_context":{"text":"FromSitesTree.com","link":"http:\/\/bangla.sitestree.com\/?cat=1917"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":68264,"url":"http:\/\/bangla.sitestree.com\/?p=68264","url_meta":{"origin":67642,"position":2},"title":"Skills for Current Java Focused Jobs #Blog #Java","author":"Author-Check- Article-or-Video","date":"July 31, 2021","format":false,"excerpt":"Strong object-oriented analysis, design, and programming experience Core Java J2EE based Web Application experience Spring Framework Hibernate Web\/UI Technologies (JSP \/ JSF \/ JavaScript \/ JQuery) Maven \/ Ant Git \/ SVN RDBMS (Oracle) , SQL & PL\/Sql basics Agile\/ SCRUM experience Application Servers (WebSphere \/ Webogic \/ JBOSS) Eclipse\u2026","rel":"","context":"In "FromSitesTree.com"","block_context":{"text":"FromSitesTree.com","link":"http:\/\/bangla.sitestree.com\/?cat=1917"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":67795,"url":"http:\/\/bangla.sitestree.com\/?p=67795","url_meta":{"origin":67642,"position":3},"title":"Resources Checked Recently or Stumbled Upon #By Sayed Ahmed #Misc. Reading","author":"Author-Check- Article-or-Video","date":"July 28, 2021","format":false,"excerpt":"Resources Checked Recently or Stumbled Upon On NoSQL http:\/\/searchdatamanagement.techtarget.com\/feature\/Key-criteria-for-choosing-different-types-of-NoSQL-databases http:\/\/blog.flux7.com\/blogs\/nosql\/nosql-database-solutions-types-and-examples http:\/\/www.eweek.com\/database\/slideshows\/nosql-database-deployments-10-real-world-examples http:\/\/programmers.stackexchange.com\/questions\/158790\/best-practices-for-nosql-database-design On Data Visualization\/Chart Display Technologies https:\/\/www.sitepoint.com\/15-best-javascript-charting-libraries\/ http:\/\/c3js.org\/ http:\/\/www.telerik.com\/blogs\/get-rolling-with-kendo-ui-and-php-ndash-part-1 https:\/\/www.sitepoint.com\/4-best-chart-generation-options-php-components\/ Which platform is the best for Career (.Net, PHP, Java) : https:\/\/www.linkedin.com\/pulse\/20141114182637-12880086-php-vs-asp-net-what-you-should-really-be-comparing-instead https:\/\/www.quora.com\/Which-job-has-more-pay-Java-PHP-or-net https:\/\/www.quora.com\/Which-job-has-more-pay-Java-PHP-or-net https:\/\/www.quora.com\/Which-is-better-as-a-developer-career-NET-or-PHP Misc -Job\/Career http:\/\/www.forbes.com\/sites\/lizryan\/2016\/09\/11\/ten-reasons-never-to-be-the-perfect-employee\/#36b480a94f46 https:\/\/msdn.microsoft.com\/en-us\/library\/ms819938.aspx http:\/\/www.careerplaybook.com\/guide\/research_employers.asp On Health http:\/\/www.kidney-treatment.org\/micro-chinese-medicine-osmotherapy.html Code-igNiter and Laravel http:\/\/career.guru99.com\/top-14-codeigniter-interview-questions\/ http:\/\/www.programmerdesk.com\/blog\/detail\/33\/codeigniter-interview-questions-and-answers http:\/\/phpsollutions.blogspot.ca\/2014\/07\/codeigniter-interview-question-and.html\u2026","rel":"","context":"In "FromSitesTree.com"","block_context":{"text":"FromSitesTree.com","link":"http:\/\/bangla.sitestree.com\/?cat=1917"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":6956,"url":"http:\/\/bangla.sitestree.com\/?p=6956","url_meta":{"origin":67642,"position":4},"title":"\u099c\u09c7\u0995\u09cb\u09df\u09c7\u09b0\u09bf \u09ae\u09cb\u09ac\u09be\u0987\u09b2 \u098f\u09b0 \u09b8\u0982\u0995\u09cd\u09b7\u09bf\u09aa\u09cd\u09a4 \u09ac\u09b0\u09cd\u09a3\u09a8\u09be \u0964","author":"Author-Check- Article-or-Video","date":"March 16, 2015","format":false,"excerpt":"\u099c\u09c7\u0995\u09cb\u09df\u09c7\u09b0\u09bf \u09ae\u09cb\u09ac\u09be\u0987\u09b2 \u098f\u09b0 \u09b8\u0982\u0995\u09cd\u09b7\u09bf\u09aa\u09cd\u09a4 \u09ac\u09b0\u09cd\u09a3\u09a8\u09be \u0964 \u09b2\u09c7\u0996\u0995\u0983 \u09ae\u09cb\u09b8\u09cd\u09a4\u09be\u09ab\u09bf\u099c\u09c1\u09b0 \u09ab\u09bf\u09b0\u09cb\u099c \u0964 \u099c\u09c7\u0995\u09cb\u09df\u09c7\u09b0\u09bf \u09ae\u09cb\u09ac\u09be\u0987\u09b2 \u09b9\u09b2\u09cb \u099c\u09c7\u0995\u09cb\u09df\u09c7\u09b0\u09bf \u098f\u09b0 \u098f\u0995\u099f\u09be \u0985\u0982\u09b6 \u09af\u09c7\u099f\u09be \u09ae\u09cb\u09ac\u09be\u0987\u09b2 \u09aa\u09cd\u09b2\u09be\u099f\u09ab\u09b0\u09cd\u09ae\u09c7\u09b0 \u0993\u09df\u09c7\u09ac\u09b8\u09be\u0987\u099f \u098f\u09ac\u0982 \u0993\u09df\u09c7\u09ac \u0985\u09cd\u09af\u09be\u09aa\u09cd\u09b2\u09bf\u0995\u09c7\u09b6\u09be\u09a8 \u09a4\u09c8\u09b0\u09bf\u09a4\u09c7 \u09ac\u09cd\u09af\u09ac\u09b9\u09be\u09b0 \u0995\u09b0\u09be \u09b9\u09df \u0964 \u099c\u09c7\u0995\u09cb\u09df\u09c7\u09b0\u09bf \u09ae\u09cb\u09ac\u09be\u0987\u09b2 \u09a6\u09bf\u09df\u09c7 \u09a4\u09c8\u09b0\u09bf \u0995\u09b0\u09be \u09b8\u0995\u09b2 \u0993\u09df\u09c7\u09ac\u09b8\u09be\u0987\u099f \u098f\u09ac\u0982 \u0993\u09df\u09c7\u09ac-\u0985\u09cd\u09af\u09be\u09aa\u09cd\u09b2\u09bf\u0995\u09c7\u09b6\u09be\u09a8 \u09aa\u09cd\u09b0\u09be\u09df \u09b8\u0995\u09b2 \u09a7\u09b0\u09a3\u09c7\u09b0 \u09b8\u09cd\u09ae\u09be\u09b0\u09cd\u099f\u09ab\u09cb\u09a8 \u098f\u09ac\u0982 \u099f\u09cd\u09af\u09be\u09ac\u09b2\u09c7\u099f\u09c7 \u0995\u09be\u099c \u0995\u09b0\u09c7 \u0964 \u098f\u09b8\u09ac \u09b8\u09cd\u09ae\u09be\u09b0\u09cd\u099f\u09ab\u09cb\u09a8 \u098f\u09ac\u0982\u2026","rel":"","context":"In "jQuery Mobile \u0964 \u099c\u09c7\u0995\u09c1\u098f\u09b0\u09bf \u09ae\u09cb\u09ac\u09be\u0987\u09b2"","block_context":{"text":"jQuery Mobile \u0964 \u099c\u09c7\u0995\u09c1\u098f\u09b0\u09bf \u09ae\u09cb\u09ac\u09be\u0987\u09b2","link":"http:\/\/bangla.sitestree.com\/?cat=176"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":6933,"url":"http:\/\/bangla.sitestree.com\/?p=6933","url_meta":{"origin":67642,"position":5},"title":"\u099c\u09c7\u0995\u09cb\u09df\u09c7\u09b0\u09bf \u09ae\u09cb\u09ac\u09be\u0987\u09b2 \u09ac\u09be\u099f\u09a8\u09c7 \u0986\u0987\u0995\u09a8 \u09b8\u09be\u099c\u09be\u09a8\u09cb \u0964","author":"Author-Check- Article-or-Video","date":"March 16, 2015","format":false,"excerpt":"\u099c\u09c7\u0995\u09cb\u09df\u09c7\u09b0\u09bf \u09ae\u09cb\u09ac\u09be\u0987\u09b2 \u09ac\u09be\u099f\u09a8\u09c7 \u0986\u0987\u0995\u09a8 \u09b8\u09be\u099c\u09be\u09a8\u09cb \u0964 \u09b2\u09c7\u0996\u0995\u0983 \u09ae\u09cb\u09b8\u09cd\u09a4\u09be\u09ab\u09bf\u099c\u09c1\u09b0 \u09ab\u09bf\u09b0\u09cb\u099c \u0964 \u099c\u09c7\u0995\u09cb\u09df\u09c7\u09b0\u09bf \u09ae\u09cb\u09ac\u09be\u0987\u09b2 \u098f\u0995 \u099d\u09be\u0981\u0995 \u0986\u0987\u0995\u09a8 \u09aa\u09cd\u09b0\u09a6\u09be\u09a8 \u0995\u09b0\u09c7 \u09af\u09be \u0986\u09aa\u09a8\u09be\u09b0 \u09ac\u09be\u0981\u099f\u09a8\u0995\u09c7 \u0995\u09b0\u09c7 \u09a4\u09cb\u09b2\u09c7 \u0986\u09b0\u09cb \u0986\u0995\u09b0\u09cd\u09b7\u09a3\u09c0\u09df \u0964 \u099c\u09c7\u0995\u09cb\u09df\u09c7\u09b0\u09bf \u09ae\u09cb\u09ac\u09be\u0987\u09b2 \u09ac\u09be\u099f\u09cb\u09a8\u09c7 \u0986\u0987\u0995\u09a8 \u09af\u09cb\u0997 \u0995\u09b0\u09be\u0983 \u09ac\u09be\u099f\u09a8\u09c7 \u0986\u0987\u0995\u09a8 \u09af\u09cb\u0997 \u0995\u09b0\u09be\u09b0 \u099c\u09a8\u09cd\u09af ui-icon \u0995\u09cd\u09b2\u09be\u09b8 \u09ac\u09cd\u09af\u09ac\u09b9\u09be\u09b0 \u0995\u09b0\u09a4\u09c7 \u09b9\u09ac\u09c7 \u098f\u09ac\u0982 \u098f\u0995\u09c7 \u09aa\u099c\u09bf\u09b6\u09a8 \u0995\u09b0\u09be\u09b0 \u099c\u09a8\u09cd\u09af ui-btn-icon-pos \u0995\u09cd\u09b2\u09be\u09b8 \u09ac\u09cd\u09af\u09ac\u09b9\u09be\u09b0 \u0995\u09b0\u09a4\u09c7\u2026","rel":"","context":"In "Root"","block_context":{"text":"Root","link":"http:\/\/bangla.sitestree.com\/?cat=1"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"http:\/\/bangla.sitestree.com\/index.php?rest_route=\/wp\/v2\/posts\/67642","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/bangla.sitestree.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/bangla.sitestree.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/bangla.sitestree.com\/index.php?rest_route=\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"http:\/\/bangla.sitestree.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=67642"}],"version-history":[{"count":0,"href":"http:\/\/bangla.sitestree.com\/index.php?rest_route=\/wp\/v2\/posts\/67642\/revisions"}],"wp:attachment":[{"href":"http:\/\/bangla.sitestree.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=67642"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/bangla.sitestree.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=67642"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/bangla.sitestree.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=67642"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}