آموزش ساخت 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)

<!DOCTYPE html>
<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)

<!DOCTYPE html>
<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 درج می شود:

<script>
          $(document).ready(function() {
                      var editor = $('#editor').data('kendoEditor');
                      $('#paste').click(function (){
                          editor.paste('<h1>beyamooz.com</h1>');
                      });
            });
</script>                     

متد ()exec در Kendo UI

در مثال زیر، زمانی که کاربر روی دکمه با شناسه "underline" کلیک می کند، برای متن انتخاب شده در Editor، آندرلاین در نظر گرقته می شود:

<script>
          $(document).ready(function() {
                      var editor = $('#editor').data('kendoEditor');
                      $('#underline').click(function (){                
                          editor.exec('underline');
                     });
            });
</script>                       

تنظیم یک متن پیش فرض برای Editor

<script>
          $(document).ready(function() {
                    var editor = $('#editor').data('kendoEditor');
                    editor.value('<h1>welcome to beyamooz.com</h1>');
            });
</script>                    
نوشته شده توسط امیر پهلوان صادق
بازدید: 12287