ورود / ثبت نام
0
0

کار کردن با ویرایشگر Kendo UI

303 بازدید
ویرایشگر Kendo UI

ویرایشگر Kendo UI

ویرایشگر 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  
                    }});  
                }); 

نتیجه در مرورگر

ویرایشگر Kendo UI

با توجه به تصویر بالا مشاهده می کنید که 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);

نتیجه آن در مرورگر

ویرایشگر Kendo UI

با ویرایشگر 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  
                            }  
                        }  
                      
                    });  
                });  

نتیجه آن در مرورگر

ویرایشگر Kendo UIویرایشگر Kendo UI

 

  • پسورد: www.mspsoft.com
آیا این مطلب را می پسندید؟
https://www.mspsoft.com/?p=16274
اشتراک گذاری:
واتساپتوییترفیسبوکپینترستلینکدین
داریوش فرخی
داریوش فرخی هستم از سال 92 شروع به یادگیری برنامه نویسی و از سال 93 در بخش برنامه نویسی و تولید محتوای سایت mspsoft.com مشغول هستم. فعالیتم نیز بیشتر در زمینه های برنامه نویسی با سی شارپ و asp.net بوده است. اوقات فراغتم را هم غالبا با تماشای فیلم یا بازی های کامپیوتری پر میکنم .
مطالب بیشتر
برچسب ها:

نظرات

0 نظر در مورد کار کردن با ویرایشگر Kendo UI

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

هیچ دیدگاهی نوشته نشده است.