آموزش ساخت Editor
آموزش ساخت Editor در Kendo UI
اکثر امکاناتی که در نرم افزار world برای فرمت کردن متن وجود دارد در این ابزار نیز وجود دارد.
متد ()kendoEditor
با استفاده از متد ()kendoEditor در Kendo UI، می توانید یک Editor بسازید.
پیکربندی (Configuration)
| پارامتر | توضیح |
|---|---|
| tools |
ابزارهایی که در بالای editor نمایش داده می شود را مشخص می کند. |
| insertHtml |
یک DropDownList در بالای ادیتور نمایش می دهد. با گزینه هایی که شما مشخص کرده اید. |
| execute |
با نام یک تابع تنظیم می شود و زمانی که یکی از ابزارهای بالای Editor را استفاده کنید و یا یک خط جدید ایجاد کنید، صدا زده می شود. |
| change |
با نام یک تابع تنظیم می شود و زمانی که محتوای Edito تغییر کند، صدا زده می شود. |
| select |
با نام یک تابع تنظیم می شود و زمانی که یکی از گزینه های Editor انتخاب شود، صدا زده می شود. |
| past |
با نام یک تابع تنظیم می شود و زمانی که در Editor چیزی را Past کنید، صدا زده می شود. |
در مثال زیر، نحوه ساخت Editor با استفاده از متد ()kendoEditor و تنظیم پارامترهای مختلف آن نشان داده شده است:
مثال (آموزش ساخت Editor)
<html>
<head>
<title>RTL support</title>
<meta charset="utf-8">
<link href="/../../content/shared/styles/examples-offline.css" rel="stylesheet">
<link href="/../../../styles/kendo.common.min.css" rel="stylesheet">
<link href="/../../../styles/kendo.rtl.min.css" rel="stylesheet">
<link href="/../../../styles/kendo.default.min.css" rel="stylesheet">
<script src="/../../../js/jquery.min.js"></script>
<script src="/../../../js/kendo.web.min.js"></script>
<script src="/../../content/shared/js/console.js"></script>
<script>
</script>
</head>
<body>
<div id="example" class="k-content">
<div class="k-rtl">
<textarea id="editor" rows="10" cols="30" style="height:440px">
</textarea>
</div>
<script>
$(document).ready(function() {
// create Editor from textarea HTML element with default set of tools
$("#editor").kendoEditor({
//tools:[
// "bold",
// "italic",
// "underline",
// "foreColor",
// "strikethrough",
// "insertHtml"
//],
//insertHtml:[
// {text:"Beyamooz1",value:"<p>CSS</p>"},
// {text:"Beyamooz2",value:"<h1>JavaScript</h1>"},
// {text:"Beyamooz3",value:"<div><strong>PHP</strong></div>"},
]
});
});
</script>
</div>
</body>
</html>
توجه: برای استفاده از ابزارهای Kendo UI در زبان های راست به چپ، علاوه براینکه باید فایل kendo.rtl.min.css را به صفحه لینک کنید، باید کلاس "k-rtl" را در تگ <div> مطابق مثال بالا تنظیم نمایید.
رویدادهای Editor در Kendo UI
در مثال زیر، هر تغییری که در Editor صورت گیرد، یک پیغام چاپ می شود:
مثال (آموزش ساخت Editor)
<html>
<head>
<title>Events</title>
<meta charset="utf-8">
<link href="/../../content/shared/styles/examples-offline.css" rel="stylesheet">
<link href="/../../../styles/kendo.common.min.css" rel="stylesheet">
<link href="/../../../styles/kendo.rtl.min.css" rel="stylesheet">
<link href="/../../../styles/kendo.default.min.css" rel="stylesheet">
<script src="/../../../js/jquery.min.js"></script>
<script src="/../../../js/kendo.web.min.js"></script>
<script src="/../../content/shared/js/console.js"></script>
<script>
</script>
</head>
<body>
<div id="example" class="k-content">
<div class="configuration">
<span class="configHead">Events log</span>
<div class="console"></div>
</div>
<textarea id="editor" rows="10" cols="30" style="width:710px;height:400px">
</textarea>
<script>
function onChange(e) {
kendoConsole.log("value change");
}
function onSelect(e) {
kendoConsole.log("selection change");
}
function onExecute(e) {
kendoConsole.log("command :: " + e.name);
}
function onPaste(e) {
kendoConsole.log("paste :: " + kendo.htmlEncode(e.html));
}
$("#editor").kendoEditor({
change: onChange,
select: onSelect,
execute: onExecute,
paste: onPaste
});
</script>
</div>
</body>
</html>
متد ()past در Kendo UI
در مثال زیر، زمانی که کاربر روی دکمه با شناسه "paste" کلیک می کند، محتوای "<h1>beyamooz.com</h1>" در Editor درج می شود:
$(document).ready(function() {
var editor = $('#editor').data('kendoEditor');
$('#paste').click(function (){
editor.paste('<h1>beyamooz.com</h1>');
});
});
</script>
متد ()exec در Kendo UI
در مثال زیر، زمانی که کاربر روی دکمه با شناسه "underline" کلیک می کند، برای متن انتخاب شده در Editor، آندرلاین در نظر گرقته می شود:
$(document).ready(function() {
var editor = $('#editor').data('kendoEditor');
$('#underline').click(function (){
editor.exec('underline');
});
});
</script>
تنظیم یک متن پیش فرض برای Editor
$(document).ready(function() {
var editor = $('#editor').data('kendoEditor');
editor.value('<h1>welcome to beyamooz.com</h1>');
});
</script>
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 12475
