jQuery와 ASP.NET MVC 모두에서 HTML 편집기를 사용하여 서식 Infragistics 텍스트 편집
jQuery 11.2 릴리스용 NetAdvantage에 도입된 모든 흥미로운 기능(읽기: 새로운 Hierarchical grid, tree, combo controls) 및 Motion Framework를 사용한 CTP 차트와 함께 일부 컨트롤이 완전한 스포트라이트를 받지 못한 것은 놀라운 일이 아닙니다.
Damyan Petev
9min read
jQuery 11.2 릴리스용 NetAdvantage에 도입된 모든 흥미로운 기능(읽기: 새로운 Hierarchical grid, tree, combo controls) 및 Motion Framework를 사용한 CTP 차트와 함께 일부 컨트롤이 완전한 스포트라이트를 받지 못한 것은 놀라운 일이 아닙니다.
jQuery 기반의 WYSIWYG 구현 HTML 편집기 컨트롤에 대해 이야기하고 있습니다. WYSIWYG는 'What you see is what you get'(Wikipedia에서 자세히 보기)의 약자로, 이 컨트롤의 핵심이 바로 이 컨트롤을 제공하고자 하는 것입니다. 여는 꺾쇠 괄호와 닫는 꺾쇠 괄호("<" 및 ">")를 동등한 HTML("<"/">")로 변환합니다. 그것은 단지 예일 뿐이지만 내 블로그 편집자가 하는 일이기도 하므로 브라우저에서 적절하게 표시할 수 있을 뿐만 아니라 일부 서버는 잠재적인 위협과 같은 콘텐츠를 차단합니다. 눈치채지 못했더라도 이러한 종류의 기능은 이 블로그, 댓글, 포럼 등과 같이 사용자 생성 콘텐츠가 지원되는 거의 모든 곳에서 제공됩니다.
이제 igHtmlEditor 위젯 등을 사용하여 사용자에게 이러한 종류의 기능을 제공할 수 있습니다!
여기서 HTML 편집기는 CTP (Community Technology Preview)이며, 이는 아직 개발의 베타 단계에 있음을 의미합니다. 그렇기 때문에 공식 출시될 때까지는 아무 것도 확정되지 않았지만, 다시 한 번 시도해보고 미리 컨트롤을 알아두지 않을 이유도 없습니다. 최신 서비스 릴리스 버전을 사용하는 경우에도 권장됩니다.
시작하기
위젯은 jQuery UI 위에 구축되었으므로 다른 NetAdvantage for jQuery 컨트롤과 마찬가지로 먼저 jQuery를 추가 한 다음 jQuery UI를 페이지에 추가해야합니다. 그러나 igHtmlEditor에 대한 스크립트는 기본 "ig.ui.min.js" 파일에 포함되지 않고 자체 "ig.ui.htmleditor.min.js"에 포함됩니다. 후자는 실제로 jQuery 파일 뒤에 포함해야하는 유일한 필수 스크립트 파일입니다.
이미 익숙할 수 있는 기본 스타일도 필요합니다. 다시 한 번, 필요한 리소스를 찾고 관리하는 방법을 정확히 읽을 수 있는 배포 가이드를 확인해보시기 바랍니다.
물론 참조용으로 사용할 수 있는 결합된 코드 조각을 제공할 것이며(기본적으로 'Scripts' 및 'themes' 폴더가 있다고 가정) igHtmlEditor를 페이지에 추가하는 것은 HTML DIV 요소를 컨테이너로 사용하고 스크립트 줄을 사용하여 JavaScript에서 위젯의 새 인스턴스를 만드는 것만 큼 간단합니다 ASP.NET MVC 둘 다에 대한 결합된 코드 조각:
<!-- ## Javascript/HTML ## -->
<!-- CSS -->
<link href="../../themes/min/ig/jquery.ui.custom.min.css" rel="stylesheet" type="text/css" />
<link href="../../themes/base/ig.ui.min.css")" rel="stylesheet" type="text/css" />
<!-- Scripts -->
<script src="../Scripts/jquery.min.js"></script>
<script src="../Scripts/jquery-ui.min.js"></script>
<script src="../Scripts/ig.ui.htmleditor.min.js"></script>
<!-- in the body of the document: -->
<div id="HtmlEditor1"></div>
<!-- initialize the editor on document ready: -->
<script type="text/javascript">
$(document).ready(function () {
$("#HtmlEditor1").igHtmlEditor();
});
</script>
<!--## ASP.NET MVC ##-->
<!-- CSS -->
<link href="@Url.Content("~/Content/themes/min/ig/jquery.ui.custom.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/themes/base/ig.ui.min.css")" rel="stylesheet" type="text/css" />
<!-- Scripts -->
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/ig.ui.htmleditor.min.js")" type="text/javascript"></script>
<!-- in your View: -->
@using Infragistics.Web.Mvc
@( Html.Infragistics().HtmlEditor().Render()
)
기능, 기능, 기능!
완료되지 않았지만 jQuery Html Editor 위젯에는 인상적인 기능이 있습니다. 현재 구현에서는 거의 모든 항목이 추가 사용자 정의 없이 제공되므로 개발자 관점에서 설정해야 할 항목이 많지 않으며 사용자는 항상 소수를 얻습니다. 사용자가 액세스할 수 있는 거의 모든 항목은 상단의 도구 모음 영역에 있으며 옵션은 관련 세트로 깔끔하게 그룹화되어 있습니다.
가장 좋은 점은 그 중 거의 모든 사용자가 즉시 인식하고 편안하게 사용할 수 있는 서식 있는 텍스트 서식 도구를 찾을 수 있다는 것입니다. 하나의 포괄적인 편집 경험은 시각적 시연 후에만 인식됩니다.
스크린 샷의 모든 것 (음,이 페이지에 맞도록 변경 한 컨트롤의 너비를 제외하고)은 글꼴과 크기, 굵게 및 기울임 꼴, 밑줄 및 취소 선, 텍스트 정렬 옵션, 목록 및 글 머리 기호, 들여 쓰기 컨트롤 등 위젯이 기본적으로 생성하는 것과 같습니다. 맨 위에 있는 도구 외에도 컨트롤은 현재 전체 DOM 경로를 편리하게 표시하며 사용자는 각 DOM 트리 요소를 클릭하여 편집 영역에서 해당 내용을 강조 표시할 수 있습니다. 사용자가 자신의 입력이 뒤에서 어떻게 처리되고 있는지 알아야 할 때 정말 깔끔하지만, 그것만으로는 충분하지 않은 경우 위젯은 버튼 클릭으로 기본 '디자인'과 소스 뷰 사이를 전환하는 기능을 제공합니다.
이것은 이전 스크린샷에 표시된 글꼴의 소스이며 컨테이너에 스타일로 적용되는 것도 볼 수 있습니다.
또한 복사된 텍스트도 있었는데, 이는 편집기가 모든 일반적인 작업(잘라내기, 복사 및 붙여넣기)에 대한 클립보드 지원과 함께 제공된다는 것을 보여주기 위한 것이었습니다. 그리고 편집 영역 내에서 다른 텍스트 스타일이 보존되는 것이 아니라 실제로 서식 있는 텍스트를 붙여넣을 수 있으며 해당 서식은 원래 본 그대로 유지됩니다. 웹 페이지에서 복사하여 편집기에 붙여 넣을 수 있지만 모두 HTML 기반이라는 점을 고려하면 그다지 인상적이지 않은 것 같습니다. 당신이 정말로 할 수있는 것은 MS Word에서 복사 , 예, 할 수 있으며 다음과 같이 보입니다.
또한 사용자는 콘텐츠를 붙여넣는 것 외에 콘텐츠를 쉽게 삽입할 수 있는 방법을 제공합니다. 도구 모음은 이미지와 링크를 모두 삽입할 수 있는 대화 상자를 제공합니다.
사용 가능한 대화 상자가 하나 더 있으며, 사용자는 거의 또는 전혀 노력하지 않고 HTML 테이블 요소를 추가하고 포인터를 원하는 크기로 드래그하여 자연스러운 방식으로 열과 행의 수를 정의 할 수 있습니다.
도구 모음에는 한 번의 클릭으로 새 행과 열을 제거하거나 추가할 수 있는 버튼도 찾을 수 있습니다.
맞춤화
개발자의 관점에서 설정해야 할 것이 많지 않다고 언급했을 때, 이는 위젯을 필요에 맞게 사용자 정의할 수 없다는 것을 의미하지는 않습니다. 컨트롤을 설정할 때 사용자에게 표시할 도구 모음 항목을 정의할 수 있습니다. 기본값은 물론 "all"이지만 activeToolbars 속성을 사용하면 사용자 정의 도구 모음 세트를 정의 할 수 있습니다. 이 속성은 사용할 도구 모음의 이름을 포함하는 단일 문자열을 허용하며 다음은 기본 도구 모음 목록입니다.
- fontProperties
- textFormat
- textAlign
- textIndent
- 테이블
- source
그러나 확실히 당신은 속지 않습니다 이것은 사용자 정의가 중지되는 곳입니다 – 물론 자신의 도구 모음을 추가 할 수있는 옵션이 있습니다. 모든 도구 모음에는 사용자 지정 도구 모음에 항목으로 추가할 수 있는 버튼 및 콤보 요소, 즉 igButton 및 igCombo가 포함되어 있습니다. igButton은 jQuery UI 버튼의 스타일 버전이고 igCombo는 NetAdvantage for jQuery 제품의 일부입니다.
예를 들어, Infragistics 홈페이지로 연결되는 버튼을 툴바에 추가하고 멋진 로고를 추가해 보겠습니다. 다음은 Chaining 및 Razor 구문을 사용하여 JavaScript와 ASP.NET MVC 3 모두에서 활성 속성을 설정하는 것과 함께 'toolbars'속성에 직접 추가하는 스 니펫입니다.
<!-- ## In Javascript ## -->
<script type="text/javascript">
$(document).ready(function () {
$("#HtmlEditor1").igHtmlEditor({
width: '750',
toolbars: [
{
name: 'custom',
items: [
{
type: 'igButton', link: { href: 'http://ko.infragistics.com', target: '_blank' }
}]
}],
activeToolbars: 'fontProperties textFormat textIndent source custom'
});
});
</script>
<!-- ## In ASP.NET MVC ## -->
@( Html.Infragistics().HtmlEditor()
.Width("750")
.Toolbars(toolbars =>
{
toolbars.AddToolbar().Name("custom").Items(items =>
{
items.AddIgButtonItem()
.Link(link =>
{
link.Href("http://ko.infragistics.com").Target("_blank");
});
});
})
.ActiveToolbars("fontProperties textFormat textIndent source custom")
.Render()
)
기본 활성 도구 모음이 '모두'이기 때문에 자동으로 추가되지만 물론 이름을 지정하고 위에서 볼 수 있듯이 사용할 목록에 포함 할 수 있습니다. 그리고 매우 동일한 방법을 사용하여 igCombo 또는 더 많은 버튼을 추가할 수 있습니다. 위 코드의 결과는 다음과 같습니다(마지막 버튼은 사용자 지정 도구 모음 추가이며 클릭하면 새 탭/창에서 Infragistics 홈페이지가 열립니다).
결론
jQuery HTML Editor는 순수한 클라이언트 측 스크립트로 구동되는 풍부한 텍스트 서식을 제공하며 친숙하고 다소 본능적인 기능의 조합을 제공하도록 코스를 설정했으며 최종 목표는 사용자에게 놀라운 경험과 포괄적 인 도구 세트를 제공하는 것입니다. 또한 고유한 도구 집합을 만들고 도구 모음에 추가할 수 있다는 것은 이 컨트롤을 원하는 만큼 사용자 지정할 수 있음을 의미합니다. 예상대로 jQuery Themeroller로 스타일을 지정할 수 있으며 위에 링크 된 배포 가이드 에서도 이에 대한 지침을 찾을 수 있습니다.
NetAdvantage for jQuery 온라인 샘플을 방문하거나 Razor 및 jQuery 전용 구현이 모두 포함된 APS.NET MVC3 프로젝트가 포함된 이 블로그의 데모 프로젝트를 다운로드할 수도 있습니다.