Hallo.js jQuery UI_jquery를 기반으로 한 WYSIWYG 웹 편집기

먼저 효과를 살펴보겠습니다.

Hallo.js는 jQuery UI를 기반으로 하는 간단한 서식 있는 텍스트 웹 편집기이며 HTML5 contentEditable을 사용하여 WYSIWYG를 구현합니다. 목표는 TinyMCE나 Aloha Editor와 같이 오늘날 매우 인기 있는 편집기를 대체하는 것이 아니라 개발자에게 더 간단하고 즐거운 사용자 편집 경험을 제공하는 것입니다.

Hallo.js는 Henri Bergius가 IKS 프로젝트를 위해 개발한 무료 소프트웨어로 CoffeeScript를 사용하여 개발되었으며 MIT 라이센스 계약을 따르며 GitHub에서 호스팅됩니다.

사용방법

1. 프로젝트에 jQuery, jQuery UI 및 Rangy 라이브러리를 도입해야 합니다.

<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/rangy-core.js"></script>

편집기 툴바는 jQuery UI 테마를 사용하므로 필요에 맞게 테마를 맞춤설정할 수도 있습니다. 도구 모음 아이콘 글꼴은 Font Awesome을 기반으로 합니다. 스타일이 지정된 도구 모음이 데모에 나타나면, hallotoolbar 클래스에 일부 CSS(예: 배경 및 테두리)를 추가할 수도 있습니다.

<link rel="stylesheet" href="/path/to/your/jquery-ui.css">
<link rel="stylesheet" href="/path/to/your/font-awesome.css">

Hello.js를 소개합니다

<script src="hallo.js"></script>

플러그인 호출은 매우 간단합니다

jQuery('p').hallo();

태그 편집 기능을 끌 수도 있습니다

jQuery('p').hallo({editable: false});

Hallo 자체는 선택한 DOM 요소만 편집 가능하게 만들 수 있으며 서식 지정 도구는 제공하지 않습니다. 플러그인을 로딩하여 Hallo를 초기화하는 형식입니다. 볼드체 및 이탤릭체 플러그인과 같은 간단한 플러그인도 있습니다.

jQuery('.editable').hallo({
 plugins: {
  'halloformat': {}
 }
});

이 예에서는 굵게 및 기울임꼴과 같은 기능을 제공하는 간단한 서식 지정 플러그인을 만듭니다. 원하는 만큼 좋은 플러그인을 가질 수 있으며 필요한 경우 그중에서 선택할 수 있습니다.

Hallo에는 인스턴스화 시 설정할 수 있는 옵션이 더 많습니다. 설명서 hallo.coffee 파일을 참조하세요.

이벤트 방식

할로는 통합과 소집에 도움이 되는 이벤트를 진행하고 있습니다. jQuery 바인딩을 사용하여 구독할 수 있습니다.

• halloenabled: 편집 가능 항목이 활성화되면 트리거됩니다(editable이 true로 설정됨)
  
• hallodisabled: 편집 가능 항목이 비활성화되면 트리거됩니다(editable이 false로 설정됨)
  
• hallomodified: 사용자가 편집 중인 콘텐츠를 변경할 때마다 트리거됩니다. 이벤트 데이터 키 콘텐츠에 HTML이 포함되어 있습니다.
  
• halloactivated: 사용자가 편집 가능한 영역을 활성화할 때 트리거됩니다(보통 클릭하여)
  
• hallodeactivated: 사용자가 편집 가능한 영역을 비활성화할 때 트리거됩니다

플러그인

• halloformat – 도구 모음에 굵게, 기울임꼴, 취소선 및 밑줄 지원을 추가합니다(옵션으로 활성화/비활성화: "formattings": {"bold": true, "italic": true, "strikethrough). ": 참, "밑줄": 거짓})
  
• halloheadings – H1, H2, H3에 대한 지원을 추가합니다. 제목 옵션 키를 전달하여 표시할 항목을 지정할 수 있습니다(예: “formatBlocks”:[“p”, “h2″, "h3"])
  
• hallojustify – 왼쪽, 가운데, 오른쪽 정렬 지원 추가
  
• hallolists – 정렬된 목록과 정렬되지 않은 목록에 대한 지원을 추가합니다(옵션 선택: “lists”: {“ordered”: false, “unordered”: true})
  
• halloreundo – 실행 취소 및 다시 실행 지원 추가
  
• hallolink – 선택 항목에 링크를 추가하는 지원 추가(현재 작동하지 않음)
  
• halloimage – 이미지 업로드, 검색, 제안
  
• halloblacklist – 콘텐츠에서 원치 않는 태그 필터링
  

플러그인 작성

Hallo 플러그인은 일반 jQuery UI 플러그인을 작성하는 데 사용됩니다.

Hallo가 로드되면 해당 장치의 활성화된 모든 플러그인도 로드되고 몇 가지 추가 옵션이 전달됩니다.

• 편집 가능: 기본 Hallo 위젯 인스턴스
• uuid: Hallo 인스턴스의 고유 식별자, 요소 ID에 사용할 수 있음
  

간단한 플러그인은 다음과 같습니다.

#  Formatting plugin for Hallo
#  (c) 2011 Henri Bergius, IKS Consortium
#  Hallo may be freely distributed under the MIT license
((jQuery) ->
 jQuery.widget "IKS.halloformat",
  boldElement: null

  options:
   uuid: ''
   editable: null

  _create: ->
   # Add any actions you want to run on plugin initialization
   # here

  populateToolbar: (toolbar) ->
   # Create an element for holding the button
   @boldElement = jQuery '<span></span>'

   # Use Hallo Button
   @boldElement.hallobutton
    uuid: @options.uuid
    editable: @options.editable
    label: 'Bold'
    # Icons come from Font Awesome
    icon: 'icon-bold'
    # Commands are used for execCommand and queryCommandState
    command: 'bold'

   # Append the button to toolbar
   toolbar.append @boldElement

  cleanupContentClone: (element) ->
   # Perform content clean-ups before HTML is sent out

)(jQuery)

위 내용은 Hallo.js 리치 텍스트 편집기에 대한 자세한 소개입니다. 모든 분들의 학습에 도움이 되기를 바랍니다.