ویرایشگر Kendo UI به کاربر اجازه می دهد که محتوای متنی غنی و کاربر پسند ایجاد کند. خروجی ابزار ویرایشگر Kendo یک HTML یکسان در تمام مرورگر های بزرگ است، که از دسترسی های استاندارد و ارائه دادن API برای دستکاری محتوا پیروی می کند. در ادامه با من همراه باشید …
ویرایشگر Kendo UI
کار کردن با Kendo UI scheduler
در توضیحات زیر نحوه ایجاد ویرایشگر Kendo را توضیح داده ایم.
قدم اول: یک صفحه ایجاد کنید (ما نام آن را KendoEditor.html. گذاشته ایم).
کد زیر را در KendoEditor.html بنویسید.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.930/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.930/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<textarea id="editor" rows="10" cols="30" style="height:440px">
</textarea>
</div>
</body>
</html>
قدم دوم: یک فایل JS ایجاد کنید و کد زیر را بنویسید.
$(document).ready(function() {
$("#editor").kendoEditor({ resizable: {
content: true,
toolbar: true
}});
});
نتیجه در مرورگر
با توجه به تصویر بالا مشاهده می کنید که script ویرایشگر را از textarea HTML element با ابزار های پیش فرض ایجاد کرده است.
همین ویرایشگر Kendo می تواند در مدل MVVM اجرا شود.
HTML Design
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.930/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.930/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="container">
<div class="row">
<h4>Kendo Editor</h4>
<textarea data-role="editor"
data-tools="['bold',
'italic',
'underline',
'strikethrough',
'justifyLeft',
'justifyCenter',
'justifyRight',
'justifyFull']"
data-bind="visible: isVisible,
value: html,
events: { change: onChange }"
style="height: 200px;"></textarea>
</div>
</div>
</div>
</body>
</html>
JavaScript
var viewModel = kendo.observable({
html: null,
isVisible: true,
});
kendo.bind($("#example"), viewModel);
نتیجه آن در مرورگر
با ویرایشگر Telerik kendo UI، می توانیم با استفاده از ویژگی های bold، italic، underline و… یک متن ایجاد و به صورت دلخواه ویرایش کنیم.
خارج کردن محتوای ویرایشگر به PDF
یکی از ویژگی های خارق العاده در ویرایشگر Kendo تبدیل کردن محتوا به PDF می باشد، فقط با اضافه کردن نوار ابزار (toolbar) و pdf property در script.
کد زیر را در KendoEditor.html بنویسید.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.930/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.930/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<textarea id="editor" rows="10" cols="30" style="height:440px">
</textarea>
</div>
</body>
</html>
JavaScript
$(document).ready(function() {
$("#editor").kendoEditor({
tools: ["pdf"],
pdf: {
fileName: "KendoEditor.pdf",
paperSize: "a4",
margin: {
bottom: 20,
left: 20,
right: 20,
top: 20
}
}
});
});
نتیجه آن در مرورگر
هیچ دیدگاهی نوشته نشده است.