نحوه کار با Kendo UI Editor

در این مقاله استفاده از Kendo Editor UI را بررسی خواهیم کرد و با استفاده از jQuery قابلیت های مختلف این ویرایشگر را به کار خواهیم برد.

ویرایشگر Kendo به کاربر اجازه ایجاد محتوای متن غنی به صورت کاربر پسند می دهد. خروجی این ویرایشگر متن ، صفحات HTML یکسان در تمام مرورگرهای بزرگ است. و یک API برای دستکاری و بکاربردن محتوا فراهم میکند.

در اینجا مثال ساده ای برای استفاده از Kendo آورده ایم.

در یک web form کدهای زیر را وارد کنید. کتابخانه های مورد نیاز را در head صفحه اضافه میکنیم.

<!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>

کدهای جاوا اسکریپت را به آن اضافه میکنیم.

    $(document).ready(function() {  
                        
                        $("#editor").kendoEditor({ resizable: {  
                            content: true,  
                            toolbar: true  
                        }});  
                    });

نتیجه در مرورگر به صورت زیر خواهد بود.

با توجه به تصویر بالا مشاهده میکنید که اسکریپت نوشته شده یک textarea با ابزار های پیش فرض ایجاد کرده است.

ویرایشگر Kendo مشابه می تواند در مدل MVVM اجرا شود.

    <!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>

کدهای جاوا اسکریپت را نیز به آن اضافه میکنیم.

    var viewModel = kendo.observable({  
            html: null,  
            isVisible: true,  
             
        });  
        kendo.bind($("#example"), viewModel);

نتیجه در مرورگر به صورت زیر خواهد بود:

ابزارهای بسیار زیادی برای Kendo Editor وجود دارد.

با Telerik Kendo UI Editor می توانیم با استقاده از ابزارهای رایج مانند bold, Italic,underline و ... متن را ایجاد و فرمت دهی کنیم.

یکی از خصیصه های جالب و مورد استفاده Kendo Editor ، تبدیل متن ایجاد شده به فرمت PDF با استفاده از اضافه کردن toolbar و خواص PDF در اسکریپت است.

برای این کار از کدهای زیر استفاده میکنیم.

<!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>

و کدهای جاوا به صورت زیر خواهد بود :

    $(document).ready(function() {  
                         
                        $("#editor").kendoEditor({   
                          
                        tools: ["pdf"],  
                              
                            pdf: {  
                                fileName: "KendoEditor.pdf",  
                                paperSize: "a4",  
                                margin: {  
                                    bottom: 20,  
                                    left: 20,  
                                    right: 20,  
                                    top: 20  
                                }  
                            }  
                          
                        });  
                    });

نتیجه به صورت زیر مشاهده می شود:

در این مقاله آموختیم چگونه از Kendo Editor UI استفاده کنیم و نحوه استفاده از امکانات آن را با استفاده از jQuery آموختیم .

فایل های ضمیمه

4013_KendoEditor.rar

مرجع تخصصی برنامه نویسان

انجمن تخصصی برنامه نویسان فارسی زبان

دوره های در حال ثبت نام آکادمی برنامه نویسان

نحوه کار با Kendo UI Editor

فایل های ضمیمه

برنامه نویسان

اگر نیاز به یک مشاور در زمینه طراحی سایت ، برنامه نویسی و بازاریابی الکترونیکی دارید