Kendo Text Editor Kullanımı

Merhaba arkadaşlar, bu yazımda sizlere Kendo Text Editor Kullanımı konusundan bahsedeceğim.

Text Editor, bizim için zengin metin içeriği oluşturmamızı sağlar. Text Editör kullanarak html kodları ile paragraflar, tablolar, resimler, linkler ekleyebilir ve bunları düzenleyebiliriz. Bunların yanında birçok desteği de bulunur. Örneğin: Dosya eki desteği, metinlerin biçimlendirilip kopyalanması…

Kendo Text Editor de bizim için kullanışlı ve güçlü bir WYSIWYG(What You See Is What You Get) bileşenidir.

Peki nasıl kullanabiliriz?

Kendo Text Editör Basic Kullanım için;

@(Html.Kendo().Editor()
     .Name("editor")
     .HtmlAttributes(new { style = "width: 100%; height:470px", aria_label = "editor" })
     .StyleSheets(css => css
            .Add(Url.Content("~/Content/web/Editor/editorStyles.css"))
     )
     .Value(@<text>
	<br/>
	<p style="text-align:center;">
	<span style="font-family:Verdana, Geneva, sans-serif;font-size:large;">
	<strong>KENDO TEXT EDITOR KULLANIMI</strong>
	</span>
	</p>
	<p>
	<span style="font-family:Verdana, Geneva, sans-serif;font-size:medium;">
	<strong>CONTENT</strong>
	</span>
	</p>
     </text>)
    )

Custom Kullanım İçin;

@(Html.Kendo().Editor()
          .Name("editor")
          .HtmlAttributes(new { style = "width: 100%; height:470px", aria_label = "editor" })
          .StyleSheets(css => css
            .Add(Url.Content("~/Content/web/Editor/editorStyles.css"))
          )
          .Tools(tools => tools
            .Clear()
            .Bold().Italic().Underline()
            .JustifyLeft().JustifyCenter().JustifyRight()
            .InsertUnorderedList().InsertOrderedList()
            .Outdent().Indent()
            .CreateLink().Unlink()
            .InsertImage()
            .TableEditing()
            .FontName()
            .FontSize()
            .FontColor().BackColor()
          )
          .Value(@<text>
	<br/>
	<p style="text-align:center;">
	<span style="font-family:Verdana, Geneva, sans-serif;font-size:large;">
	<strong>KENDO TEXT EDITOR KULLANIMI</strong>
	</span>
	</p>
	<p>
	<span style="font-family:Verdana, Geneva, sans-serif;font-size:medium;">
	<strong>CONTENT</strong>
	</span>
	</p>
     </text>)
    )

Custom Kullanım için de Tools özelliği ile istediğimiz özelliklerin eklenmesini gerçekleştirebiliriz.

Kendo Text Editör kullanımı yukarıdaki gibi gerçekleştirilebilir.

Umarım faydalı olur.

Bir sonraki yazıda görüşmek üzere…