프로알라 옵션

Froala 옵션

구매하신 분들이 편하게 커스텀 할 수 있도록 필요한 부분만 번역을 진행했습니다.
번역 외 수정은 추천드리지 않으며 혹시라도 하신다면,
https://froala.com/wysiwyg-editor/docs/options로 들어가서 확인 해주세요.

최종 수정 : 2020-12-25

colorsBackground colorsButtons colorsHEXInput colorsStep colorsText embedlyEditButtons embedlyInsertButtons embedlyKey embedlyScriptPath emoticonsButtons emoticonsSet emoticonsStep emoticonsUseImage fileAllowedTypes fileInsertButtons fileMaxSize fileUseSelectedText fontFamily fontFamilyDefaultSelection fontFamilySelection fontSize fontSizeDefaultSelection fontSizeSelection fontSizeUnit formEditButtons formMultipleStyles formStyles formUpdateButtons Language lineBreakerHorizontalOffset linkAlwaysBlank paragraphDefaultSelection attribution attribution autofocus charCounterCount charCounterMax direction disableRightClick documentReady editInPopup editorClass enter filesManagerAllowedTypes filesManagerMaxSize fullPage height heightMax heightMin htmlAllowComments htmlAllowedAttrs htmlAllowedEmptyTags htmlAllowedStyleProps htmlAllowedTags htmlDoNotWrapTags iconsTemplate imageAddNewLine imageAllowedTypes imageAltButtons imageDefaultAlign imageDefaultDisplay imageDefaultMargin imageDefaultWidth imageEditButtons imageInsertButtons imageMaxSize imageMinWidth imageMove imageMultipleStyles imageOutputSize imagePaste imagePasteProcess imageResize imageResizeWithPercent imageRoundPercent imageSizeButtons imageStyles imageUpload indentMargin inlineClasses inlineStyles lineBreakerOffset lineBreakerTags lineHeights linkAlwaysNoFollow linkAttributes linkAutoPrefix linkConvertEmailAddress linkEditButtons linkInsertButtons linkList linkMultipleStyles linkNoOpener linkNoReferrer linkStyles linkText multiLine paragraphFormat paragraphFormatSelection paragraphMultipleStyles paragraphStyles pasteDeniedAttrs pasteDeniedTags pastePlain placeholderText pluginsEnabled scrollableContainer shortcutsEnabled shortcutsHint spellcheck tabIndex tabSpaces theme toolbarBottom toolbarButtons toolbarButtonsMD toolbarButtonsSM toolbarButtonsXS toolbarContainer toolbarInline toolbarSticky toolbarStickyOffset toolbarVisibleWithoutSelection tooltips typingTimer width wordAllowedStyleProps wordDeniedAttrs wordDeniedTags wordPasteKeepFormatting wordPasteModal zIndex

문자 카운터[Char Counter]

charCounterCount

Type : Boolean
기본 :
활성화[true]
Plugin : char_counter.min.js

문자 카운터의 표시를 활성화하거나 비활성화합니다.

코드 예제

new FroalaEditor('#wr_contents', {
  charCounterCount: false
});

charCounterMax

Type : Number
기본 :
-1
Plugin : char_counter.min.js

텍스트 편집기에 삽입할 수 있는 최대 문자 수. -1은 제한이 설정되어 있지 않음을 의미합니다.

코드 예제

new FroalaEditor('#wr_contents', {
  charCounterMax: 140
});

colorsBackground

Type : Array
기본 :
[
'#61BD6D', '#1ABC9C', '#54ACD2', '#2C82C9', '#9365B8', '#475577', '#CCCCCC',
'#41A85F', '#00A885', '#3D8EB9', '#2969B0', '#553982', '#28324E', '#000000',
'#F7DA64', '#FBA026', '#EB6B56', '#E25041', '#A38F84', '#EFEFEF', '#FFFFFF',
'#FAC51C', '#F37934', '#D14841', '#B8312F', '#7C706B', '#D1D5D8', 'REMOVE'
]
Plugin : colors.min.js

배경의 색상 팝업에서 사용되는 색상 배열입니다. REMOVE를 배열의 값으로 전달하면 색상에 대한 Clear Formating(포맷 지우기) 버튼이 표시됩니다.

코드 예제

  new FroalaEditor('#wr_contents', {
    colorsBackground: [#61BD6D, #1ABC9C, #54ACD2, REMOVE]
  });

colorsButtons

Type : Array
기본 :
["colorsBack", "|", "-"]
Plugin : colors.min.js

버튼 색 팝업을 설정합니다.

코드 예제

new FroalaEditor('#wr_contents', {
  colorsButtons: 140
});

colorsHEXInput

Type : Boolean
기본 :
true
Plugin : colors.min.js

사용자 지정 색상을 선택하려면 HEX 입력을 표시합니다.

코드 예제

new FroalaEditor('#wr_contents', {
  colorsHEXInput: false
});

colorsStep

Type : Number
기본 :
7
Plugin : colors.min.js

색상 팝업에서 라인에 표시되는 색상 개수입니다.

코드 예제

new FroalaEditor('#wr_contents', {
  colorsStep: 14
});

colorsText

Type : Array
기본 :
[
'#61BD6D', '#1ABC9C', '#54ACD2', '#2C82C9', '#9365B8', '#475577', '#CCCCCC',
'#41A85F', '#00A885', '#3D8EB9', '#2969B0', '#553982', '#28324E', '#000000',
'#F7DA64', '#FBA026', '#EB6B56', '#E25041', '#A38F84', '#EFEFEF', '#FFFFFF',
'#FAC51C', '#F37934', '#D14841', '#B8312F', '#7C706B', '#D1D5D8', 'REMOVE'
]
Plugin : colors.min.js

텍스트의 색상 팝업에 사용되는 색상 배열입니다. REMOVE를 배열의 값으로 전달하면 색상에 대한 Clear Formating(포맷 지우기) 버튼이 표시됩니다.

코드 예제

new FroalaEditor('#wr_contents', {
  colorsText: '#61BD6D', '#1ABC9C', '#54ACD2', 'REMOVE'
});

embedlyKey

Type : String
기본 :
null
Plugin : embedly.min.js

개인 키를 입력해서 Embed.ly에 "Powered By Banner"를 제거합니다.

코드 예제

new FroalaEditor('#wr_contents', {
  embedlyKey: XXXXXXXXXXXXXXXXXXXXXX
});

embedlyEditButtons

Type : Array
기본 :
['embedlyRemove']
Plugin : video.min.js

내장된 오브젝트를 선택하면 Embed.ly 편집 팝업에 나타나는 버튼입니다.

코드 예제

new FroalaEditor('#wr_contents', {
  embedlyEditButtons: []
});

embedlyInsertButtons

Type : Array
기본 :
['embedlyBack', '|']
Plugin : embedly.min.js

내장된 오브젝트가 WYSIWYG 편집기에 삽입될 때 insert Embed.ly 팝업에 나타나는 버튼입니다.

코드 예제

new FroalaEditor('#wr_contents', {
  embedlyInsertButtons: ['embedlyBack', '|']
});

embedlyScriptPath

Type : String
기본 :
'https://cdn.embedly.com/widgets/platform.js'
Plugin : embedly.min.js

Embly JS의 기본 스크립트 경로입니다.

코드 예제

new FroalaEditor('#wr_contents', {
  embedlyScriptPath: 'https://cdn.embedly.com/widgets/platform.js'
});

emoticonsButtons

Type : Array
기본 :
["emoticonsBack", "|"]
Plugin : emoticons.min.js

이모티콘 팝업에 대해 설정된 버튼입니다.

코드 예제

      new FroalaEditor('#wr_contents', {
        emoticonsButtons: emoticonsBack", "|"
      });

emoticonsSet

Type : Array
기본 :
[
   {code: '1f600', desc: 'Grinning face'},
   {code: '1f601', desc: 'Grinning face with smiling eyes'},
   {code: '1f602', desc: 'Face with tears of joy'},
   {code: '1f603', desc: 'Smiling face with open mouth'},
   {code: '1f604', desc: 'Smiling face with open mouth and smiling eyes'},
   {code: '1f605', desc: 'Smiling face with open mouth and cold sweat'},
   {code: '1f606', desc: 'Smiling face with open mouth and tightly-closed eyes'},
   {code: '1f607', desc: 'Smiling face with halo'},

   {code: '1f608', desc: 'Smiling face with horns'},
   {code: '1f609', desc: 'Winking face'},
   {code: '1f60a', desc: 'Smiling face with smiling eyes'},
   {code: '1f60b', desc: 'Face savoring delicious food'},
   {code: '1f60c', desc: 'Relieved face'},
   {code: '1f60d', desc: 'Smiling face with heart-shaped eyes'},
   {code: '1f60e', desc: 'Smiling face with sunglasses'},
   {code: '1f60f', desc: 'Smirking face'},

   {code: '1f610', desc: 'Neutral face'},
   {code: '1f611', desc: 'Expressionless face'},
   {code: '1f612', desc: 'Unamused face'},
   {code: '1f613', desc: 'Face with cold sweat'},
   {code: '1f614', desc: 'Pensive face'},
   {code: '1f615', desc: 'Confused face'},
   {code: '1f616', desc: 'Confounded face'},
   {code: '1f617', desc: 'Kissing face'},

   {code: '1f618', desc: 'Face throwing a kiss'},
   {code: '1f619', desc: 'Kissing face with smiling eyes'},
   {code: '1f61a', desc: 'Kissing face with closed eyes'},
   {code: '1f61b', desc: 'Face with stuck out tongue'},
   {code: '1f61c', desc: 'Face with stuck out tongue and winking eye'},
   {code: '1f61d', desc: 'Face with stuck out tongue and tightly-closed eyes'},
   {code: '1f61e', desc: 'Disappointed face'},
   {code: '1f61f', desc: 'Worried face'},

   {code: '1f620', desc: 'Angry face'},
   {code: '1f621', desc: 'Pouting face'},
   {code: '1f622', desc: 'Crying face'},
   {code: '1f623', desc: 'Persevering face'},
   {code: '1f624', desc: 'Face with look of triumph'},
   {code: '1f625', desc: 'Disappointed but relieved face'},
   {code: '1f626', desc: 'Frowning face with open mouth'},
   {code: '1f627', desc: 'Anguished face'},

   {code: '1f628', desc: 'Fearful face'},
   {code: '1f629', desc: 'Weary face'},
   {code: '1f62a', desc: 'Sleepy face'},
   {code: '1f62b', desc: 'Tired face'},
   {code: '1f62c', desc: 'Grimacing face'},
   {code: '1f62d', desc: 'Loudly crying face'},
   {code: '1f62e', desc: 'Face with open mouth'},
   {code: '1f62f', desc: 'Hushed face'},

   {code: '1f630', desc: 'Face with open mouth and cold sweat'},
   {code: '1f631', desc: 'Face screaming in fear'},
   {code: '1f632', desc: 'Astonished face'},
   {code: '1f633', desc: 'Flushed face'},
   {code: '1f634', desc: 'Sleeping face'},
   {code: '1f635', desc: 'Dizzy face'},
   {code: '1f636', desc: 'Face without mouth'},
   {code: '1f637', desc: 'Face with medical mask'}
]
Plugin : emoticons.min.js

이모티콘 삽입 팝업에서 사용할 수 있는 이모티콘 배열입니다. 각 이모티콘은 각 이모티콘의 코드와 설명을 포함하는 개체에 의해 정의됩니다.

코드 예제

      new FroalaEditor('#wr_contents', {
        emoticonsSet: [
          {code: '1f630', desc: 'Face with open mouth and cold sweat'},
          {code: '1f631', desc: 'Face screaming in fear'},
          {code: '1f632', desc: 'Astonished face'},
          {code: '1f633', desc: 'Flushed face'},
          {code: '1f634', desc: 'Sleeping face'},
          {code: '1f635', desc: 'Dizzy face'},
          {code: '1f636', desc: 'Face without mouth'},
          {code: '1f637', desc: 'Face with medical mask'}
        ]
      });

emoticonsUseImage

Type : Boolean
기본 :
true
Plugin : emoticons.min.js

유니코드 텍스트 대신 EmojiOne svg 이미지를 사용합니다.

코드 예제

      new FroalaEditor('#wr_contents', {
        emoticonsUseImage: false
      });

emoticonsStep

Type : Number
기본 :
8
Plugin : emoticons.min.js

이모티콘 삽입 팝업의 줄에 표시되는 이모티콘 개수입니다.

코드 예제

      new FroalaEditor('#wr_contents', {
        emoticonsStep: 10
      });

fileAllowedTypes

Type : Array
기본 :
['*']
Plugin : file.min.js

업로드할 수 있는 파일 형식 목록입니다. 이렇게 하면 다른 유형의 파일 업로드가 제한되지만 서버의 파일 형식도 확인하는 것이 좋습니다.

코드 예제

      new FroalaEditor('#wr_contents', {
        fileAllowedTypes: ['application/pdf', 'application/msword']
      });

fileInsertButtons

Type : Array
기본 :
['fileBack', '|']
Plugin : file.min.js

WYSIWYG 편집기에 새 파일을 삽입할 때 삽입 파일 팝업에 나타나는 버튼 목록입니다.

코드 예제

      new FroalaEditor('#wr_contents', {
        fileInsertButtons: []
      });

fileMaxSize

Type : Number
기본 :
1024 * 1024 * 10
Plugin : file.min.js

업로드 시 허용되는 최대 파일 크기(바이트)입니다. 기본값은 10MB입니다. 이렇게 하면 파일을 업로드하기 전에 추가 확인이 수행되지만 서버의 파일 크기도 확인하는 것이 좋습니다.

코드 예제

      new FroalaEditor('#wr_contents', {
        fileMaxSize: 1024 * 1024 * 3
      });

fileUseSelectedText

Type : Boolean
기본 :
false
Plugin : file.min.js

파일을 삽입할 때 선택한 텍스트 대신 파일 이름을 사용할 수 있습니다.

코드 예제

      new FroalaEditor('#wr_contents', {
        fileUseSelectedText: true
      });

fontFamily

Type : Object
기본 :
{
 'Arial,Helvetica,sans-serif': 'Arial',
 'Georgia,serif': 'Georgia',
 'Impact,Charcoal,sans-serif': 'Impact',
 'Tahoma,Geneva,sans-serif': 'Tahoma',
 "'Times New Roman',Times,serif": 'Times New Roman',
 'Verdana,Geneva,sans-serif': 'Verdana'
}
Plugin : font_family.min.js

텍스트 편집기의 도구 모음에서 글꼴 그룹 단추 아래에 나타나는 글꼴을 정의합니다.

코드 예제

      new FroalaEditor('#wr_contents', {
        fontFamily: true
      });

fontFamilyDefaultSelection

Type : String
기본 :
'Font Family'
Plugin : font_family.min.js

글꼴 모음이 연결 해제되었거나 아무것도 선택되지 않은 경우 표시할 텍스트입니다.

코드 예제

      new FroalaEditor('#wr_contents', {
        fontFamilyDefaultSelection: 'Font'
      });

fontFamilySelection

Type : Boolean
기본 :
false
Plugin : font_family.min.js

WYSIWYG 편집기 도구 모음의 글꼴 패밀리 버튼은 현재 텍스트 선택 항목에 대한 실제 글꼴 모음에 이름을 표시하는 드롭다운으로 대체됩니다.

코드 예제

      new FroalaEditor('#wr_contents', {
        fontFamilySelection: true
      });

fontSizeSelection

Type : Boolean
기본 :
false
Plugin : font_size.min.js

WYSIWYG 편집기 도구 모음의 Font Size(글꼴 크기) 버튼은 현재 텍스트 선택에 대한 실제 글꼴 크기 값을 보여주는 드롭다운으로 대체됩니다.

코드 예제

      new FroalaEditor('#wr_contents', {
        fontSizeSelection: true
      });

fontSize

Type : Array
기본 :
['8', '9', '10', '11', '12', '14', '18', '24', '30', '36', '48', '60', '72', '96']
Plugin : font_size.min.js

WYSIWYG 편집기의 도구 모음에서 글꼴 크기 단추 아래에 표시되는 글꼴 크기를 정의합니다.

코드 예제

      new FroalaEditor('#wr_contents', {
        fontSize: ['8', '10', '12', '14', '18', '30', '60', '96']
      });

fontSizeDefaultSelection

Type : String
기본 :
'12'
Plugin : font_size.min.js

글꼴 크기를 선택하지 않았거나 이름이 지정되지 않은 경우 표시할 텍스트입니다.

코드 예제

      new FroalaEditor('#wr_contents', {
        fontSizeDefaultSelection: '14'
      });

fontSizeUnit

Type : String
기본 :
'px'
Plugin : font_size.min.js

글꼴 크기에 사용할 단위입니다.

코드 예제

      new FroalaEditor('#wr_contents', {
        fontSizeUnit: 'pt'
      });

formEditButtons

Type : Array
기본 :
["inputStyle", "inputEdit"]
Plugin : form.min.js

폼으로 버튼 편집 팝업.

코드 예제

      new FroalaEditor('#wr_contents', {
        formEditButtons: ["inputStyle", "inputEdit"]
      });

formMultipleStyles

Type : Boolean
기본 :
true
Plugin : form.min.js

양식 요소에 여러 css를 적용할 수 있습니다.

코드 예제

      new FroalaEditor('#wr_contents', {
        formMultipleStyles: ["inputStyle", "inputEdit"]
      });

formStyles

Type : Object
기본 :
{fr-rounded: "Rounded", fr-large: "Large"}
Plugin : form.min.js

폼에 스타일을 적용하기 위한 옵션입니다.

코드 예제

      new FroalaEditor('#wr_contents', {
        formStyles: {class1: "Class 1", class2: "Class 2"}
      });

formUpdateButtons

Type : Array
기본 :
["inputBack", "|"]
Plugin : form.min.js

양식 팝업 단추입니다.

코드 예제

      new FroalaEditor('#wr_contents', {
        formUpdateButtons: ["inputBack", "|"]
      });

imageAllowedTypes

Type : Array
기본 :
['jpeg', 'jpg', 'png', 'gif', 'webp']
Plugin : image.min.js

업로드할 수 있는 이미지 유형 목록입니다. 이렇게 하면 다른 유형의 파일 업로드가 제한되지만 서버의 파일 형식도 확인하는 것이 좋습니다.

코드 예제

    new FroalaEditor('#wr_contents', {
      imageAllowedTypes: ['jpeg', 'jpg', 'png']
    });

imageAltButtons

Type : Array
기본 :
['imageBack', '|']
Plugin : image.min.js

이미지의 대체 텍스트를 변경할 때 이미지 대체 텍스트 편집 팝업에 나타나는 단추 목록입니다.

코드 예제

    new FroalaEditor('#wr_contents', {
      imageAltButtons: ['imageBack']
    });

imageDefaultAlign

Type : String
기본 :
'center'
Plugin : image.min.js

텍스트 에디터 편집기에 삽입할 때 기본 영상 정렬을 설정합니다. 가능한 값은 'left', 'center' 및 'right'입니다.

코드 예제

    new FroalaEditor('#wr_contents', {
      imageAllowedTypes: ['left']
    });

imageDefaultDisplay

Type : String
기본 :
'block'
Plugin : image.min.js

텍스트 에디터에 삽입될 때 이미지의 기본 표시를 설정합니다. 가능한 옵션은 'inline' 및 'block'입니다.

코드 예제

    new FroalaEditor('#wr_contents', {
      imageDefaultDisplay: ['jpeg', 'jpg', 'png']
    });

imageDefaultMargin

Type : Number
기본 :
5
Plugin : image.min.js

텍스트 에디터 편집기에 삽입할 때 이미지의 기본 너비를 설정합니다. 0으로 설정하면 너비가 설정되지 않습니다.

코드 예제

    new FroalaEditor('#wr_contents', {
      imageDefaultMargin: 7
    });

imageDefaultWidth

Type : Number
기본 :
300
Plugin : image.min.js

텍스트 에디터 텍스트 편집기에 삽입할 때 이미지의 기본 너비를 설정합니다. 0으로 설정하면 너비가 설정되지 않습니다.

코드 예제

    new FroalaEditor('#wr_contents', {
      imageDefaultWidth: 200
    });

imageEditButtons

Type : Array
기본 :
['imageReplace', 'imageAlign', 'imageCaption', 'imageRemove', '|', 'imageLink', 'linkOpen', 'linkEdit', 'linkRemove', '-', 'imageDisplay', 'imageStyle', 'imageAlt', 'imageSize']
Plugin : image.min.js

이미지를 선택하면 이미지 편집 팝업에 나타나는 버튼 목록입니다. Image Aviary 플러그인이 포함되어 있으면 'Aviary'도 옵션으로 사용할 수 있습니다.

코드 예제

    new FroalaEditor('#wr_contents', {
      imageEditButtons: ['imageReplace', 'imageAlign', 'imageCaption', 'imageRemove']
    });

imageInsertButtons

Type : Array
기본 :
['imageBack', '|', 'imageUpload', 'imageByURL', 'imageManager']
Plugin : image.min.js

WYSIWYG 편집기에 새 이미지를 삽입할 때 이미지 삽입 팝업에 나타나는 버튼 목록입니다.

코드 예제

    new FroalaEditor('#wr_contents', {
      imageInsertButtons: ['imageBack', '|', 'imageManager']
    });

imageMaxSize

Type : Number
기본 :
1024 * 1024 * 10
Plugin : image.min.js

업로드 시 허용되는 최대 이미지 크기(바이트)입니다. 기본값은 10MB입니다. 이렇게 하면 이미지를 업로드하기 전에 추가 확인이 수행되지만 서버에서 이미지 크기를 확인하는 것이 좋습니다.

코드 예제

    new FroalaEditor('#wr_contents', {
      imageMaxSize: 1024 * 1024 * 3
    });

imageMinWidth

Type : Number
기본 :
16
Plugin : image.min.js

이미지 크기를 조정할 수 있는 PX의 최소 너비입니다.

코드 예제

    new FroalaEditor('#wr_contents', {
      imageMinWidth: 32
    });

imageMove

Type : Boolean
기본 :
true
Plugin : image.min.js

이미지를 끌어서 이미지 위치를 변경할 수 있습니다. 이 옵션은 끌 수 있는 플러그인이 포함된 경우에만 올바르게 작동합니다.

코드 예제

    new FroalaEditor('#wr_contents', {
      imageMove: false
    });

imageMultipleStyles

Type : Boolean
기본 :
true
Plugin : image.min.js

한 번에 여러 이미지 스타일을 선택할 수 있습니다.

코드 예제

    new FroalaEditor('#wr_contents', {
      imageMultipleStyles: false
    });

imagePaste

Type : Boolean
기본 :
true
Plugin : image.min.js

클립보드에서 이미지를 붙여넣을 수 있습니다.

코드 예제

    new FroalaEditor('#wr_contents', {
      imagePaste: false
    });

imagePasteProcess

Type : Boolean
기본 :
false
Plugin : image.min.js

붙여넣은 이미지에 기본 이미지 설정을 사용합니다.

코드 예제

    new FroalaEditor('#wr_contents', {
      imagePasteProcess: true
    });

imageResize

Type : Boolean
기본 :
true
Plugin : image.min.js

false로 설정하면 이미지 크기를 조정할 수 없습니다.

코드 예제

    new FroalaEditor('#wr_contents', {
      imageResize: false
    });

imageResizeWithPercent

Type : Boolean
기본 :
false
Plugin : image.min.js

기본적으로 이미지 크기 조정은 PX를 사용합니다. 이 옵션을 활성화하면 편집기 내에서 이미지 크기를 조정할 때 %가 대신 사용됩니다.

코드 예제

    new FroalaEditor('#wr_contents', {
      imageResizeWithPercent: true
    });

imageRoundPercent

Type : Boolean
기본 :
false
Plugin : image.min.js

크기를 조정하는 동안 이미지 백분율을 정수로 반올림합니다.

코드 예제

    new FroalaEditor('#wr_contents', {
      imageRoundPercent: true
    });

imageOutputSize

Type : Boolean
기본 :
false
Plugin : image.min.js

이 옵션을 활성화하면 영상에 너비와 높이가 출력에서 속성으로 설정됩니다.

코드 예제

    new FroalaEditor('#wr_contents', {
      imageOutputSize: true
    });

imageSizeButtons

Type : Array
기본 :
['imageBack', '|']
Plugin : image.min.js

이미지의 너비와 높이를 편집할 때 이미지 크기 편집 팝업에 나타나는 단추 목록입니다.

코드 예제

    new FroalaEditor('#wr_contents', {
      imageSizeButtons: ['imageBack']
    });

imageStyles

Type : Object
기본 :
{
  'fr-rounded': 'Rounded',
  'fr-bordered': 'Bordered'
}
Plugin : image.min.js

선택한 이미지에 대한 사용자 지정 스타일을 설정합니다. 클래스는 CSS에 정의되어야 합니다. 그렇지 않으면 이미지 모양에 변경 사항이 표시되지 않습니다.

코드 예제

    new FroalaEditor('#wr_contents', {
      imageStyles: {
        class1: 'Class 1',
        class2: 'Class 2',
        class3: 'Class 3'
      }
    });

imageUpload

Type : Boolean
기본 :
true
Plugin : image.min.js

이미지 업로드를 사용하거나 사용하지 않습니다.

코드 예제

    new FroalaEditor('#wr_contents', {
      imageUpload: false
    });

imageAddNewLine

Type : Boolean
기본 :
false
Plugin : image.min.js

활성화된 경우 이미지를 삽입한 후 새 줄을 추가됩니다.

코드 예제

    new FroalaEditor('#wr_contents', {
      imageAddNewLine: true
    });

인라인 스타일[Inline Style]

inlineStyles

Type : Object
기본 :
{
  'Big Red': 'font-size: 20px; color: red;',
  'Small Blue': 'font-size: 14px; color: blue;'
}
Plugin : inline_style.min.js

선택한 텍스트에 대한 사용자 정의 스타일을 설정합니다. 이 옵션은 개체입니다. 여기서 키는 드롭다운에 나타나는 새 스타일의 이름이며 값은 해당 스타일에 대한 CSS 속성을 지정합니다.

코드 예제

    new FroalaEditor('#wr_contents', {
      inlineStyles: {
        'Big Red': 'font-size: 20px; color: red;',
        'Small Blue': 'font-size: 14px; color: blue;'
      }
    });

인라인 클래스[Inline Class]

inlineClasses

Type : Object
기본 :
{
 'fr-class-code': 'Code',
 'fr-class-highlighted': 'Highlighted',
 'fr-class-transparency': 'Transparent'
}
Plugin : inline_style.min.js

선택한 텍스트에 대한 사용자 지정 클래스를 설정합니다. 이 옵션은 키가 드롭다운에 나타나는 새 클래스의 이름이고 값이 해당 클래스의 클래스 이름을 지정하는 개체입니다.

코드 예제

    new FroalaEditor('#wr_contents', {
      inlineClasses: {
        'fr-class-code': 'Code',
        'fr-class-highlighted': 'Highlighted',
        'fr-class-transparency': 'Transparent'
      }
    });

언어[Language]

Language

Type : String
기본 :
null

리치 텍스트 편집기 인터페이스에서 사용할 언어를 선택합니다. 해당 언어 파일이 필요: /langs/es.js.

코드 예제

    new FroalaEditor('#wr_contents', {
      Language: 'es'
    });

lineBreakerHorizontalOffset

Type : Number
기본 :
20
Plugin : line_breaker.min.js

줄 바꿈을 표시 할 요소의 왼쪽 또는 오른쪽으로부터의 거리 (픽셀)입니다.

코드 예제

    new FroalaEditor('#wr_contents', {
      lineBreakerHorizontalOffset: 20
    });

lineBreakerOffset

Type : Number
기본 :
15
Plugin : line_breaker.min.js

줄 바꿈을 표시 할 요소의 상단 또는 하단으로부터의 거리 (픽셀)입니다.

코드 예제

    new FroalaEditor('#wr_contents', {
      lineBreakerHorizontalOffset: 20
    });

lineBreakerTags

Type : Array
기본 :
['table', 'hr', 'form', 'dl', 'span.fr-video', '.fr-embedly', '.fr-img-caption']
Plugin : line_breaker.min.js

줄 바꿈이 나타나는 사이의 HTML 태그 목록입니다.

코드 예제

    new FroalaEditor('#wr_contents', {
      lineBreakerHorizontalOffset: ['table', 'hr', 'form']
    });

linkAlwaysBlank

Type : Boolean
기본 :
false
Plugin : link.min.js

이 옵션을 선택하면 모든 링크가 새 탭에서 열리며 이 작업을 설정하는 옵션이 UI에 표시되지 않습니다.

코드 예제

    new FroalaEditor('#wr_contents', {
      linkAlwaysBlank: true
    });

linkAlwaysNoFollow

Type : Boolean
기본 :
true
Plugin : link.min.js

rel="nofollow" 특성을 모든 링크에 추가할지 여부를 지정합니다.

코드 예제

    new FroalaEditor('#wr_contents', {
      linkAlwaysNoFollow: false
    });

linkAttributes

Type : Object
기본 :
{}
Plugin : link.min.js

링크에 대해 사용자 지정할 수 있는 추가 특성을 가진 개체입니다.

코드 예제

    new FroalaEditor('#wr_contents', {
      linkAttributes: {
        title: 'Title'
      }
    });

linkAutoPrefix

Type : String
기본 :
'http://'
Plugin : link.min.js

기본 URL 접두사를 설정합니다.

코드 예제

    new FroalaEditor('#wr_contents', {
      linkAutoPrefix: 'https://'
    });

linkConvertEmailAddress

Type : Boolean
기본 :
true
Plugin : link.min.js

링크로 삽입된 이메일 주소는 메일로: 링크로 변환된다.

코드 예제

    new FroalaEditor('#wr_contents', {
      linkConvertEmailAddress: false
    });

linkEditButtons

Type : Array
기본 :
['linkOpen', 'linkStyle', 'linkEdit', 'linkRemove']
Plugin : link.min.js

편집기에서 기존 링크를 클릭할 때 편집 링크 팝업에 나타나는 단추 목록.

코드 예제

    new FroalaEditor('#wr_contents', {
      linkEditButtons: ['linkEdit', 'linkRemove']
    });

linkInsertButtons

Type : Array
기본 :
['linkBack', '|', 'linkList']
Plugin : link.min.js

WYSIWYG 편집기에 새 링크를 삽입할 때 삽입 링크 팝업에 나타나는 버튼 목록입니다.

코드 예제

    new FroalaEditor('#wr_contents', {
      linkInsertButtons: ['linkBack']
    });

linkMultipleStyles

Type : Boolean
기본 :
true
Plugin : link.min.js

한 번에 여러 링크 스타일을 선택할 수 있습니다.

코드 예제

    new FroalaEditor('#wr_contents', {
      linkMultipleStyles: false
    });

linkNoOpener

Type : Boolean
기본 :
true
Plugin : link.min.js

새 탭에서 링크를 열도록 설정한 경우 noopener 속성을 추가할 수 없습니다.

코드 예제

    new FroalaEditor('#wr_contents', {
      linkNoOpener: false
    });

linkNoReferrer

Type : Boolean
기본 :
true
Plugin : link.min.js

새 탭에서 링크를 열도록 설정한 경우 noreferer 속성을 추가할 수 없습니다.

코드 예제

    new FroalaEditor('#wr_contents', {
      linkAlwaysBlank: false
    });

linkStyles

Type : Object
기본 :
{
  'fr-green': 'Green',
  'fr-strong': 'Thick'
}
Plugin : link.min.js

선택한 링크에 대한 사용자 지정 스타일을 설정합니다. 클래스는 CSS에 정의되어야 합니다. 그렇지 않으면 링크 모양에 변경 사항이 표시되지 않습니다.

코드 예제

    new FroalaEditor('#wr_contents', {
      linkStyles:{ 
        class1: 'Class 1',
        class2: 'Class 2',
        class3: 'Class 3'
      }
    });

linkText

Type : Boolean
기본 :
false
Plugin : link.min.js

이 옵션을 사용하면 링크 편집 팝업 내에서 링크 텍스트를 편집할 수 있습니다.

코드 예제

    new FroalaEditor('#wr_contents', {
      linkText: true
    });

paragraphDefaultSelection

Type : String
기본 :
'Paragraph Format'
Plugin : paragraph_format.min.js

문단 형식에 대해 선택할 수 있는 기본 옵션입니다.

코드 예제

    new FroalaEditor('#wr_contents', {
      paragraphDefaultSelection: 'Paragraph'
    });

paragraphFormat

Type : Object
기본 :
{
  N: 'Normal',
  H1: 'Heading 1',
  H2: 'Heading 2',
  H3: 'Heading 3',
  H4: 'Heading 4',
  PRE: 'Code'
}
Plugin : paragraph_format.min.js

도구 모음의 단락 형식 드롭 다운에 표시되는 옵션이있는 개체입니다. 여기서 'N'태그는 enter 옵션이 'FroalaEditor.ENTER_P'로 설정된 경우

로 처리되고 enter 옵션이 'FroalaEditor.ENTER_DIV'로 설정된 경우

로 처리됩니다.

코드 예제

    new FroalaEditor('#wr_contents', {
      paragraphFormat: {
	  N: 'Normal',
	  H1: 'Heading 1',
	  H2: 'Heading 2'
	}
    });

paragraphFormatSelection

Type : Boolean
기본 :
false
Plugin : paragraph_format.min.js

WYSIWYG 편집기 도구 모음의 단락 형식 버튼은 현재 텍스트 선택에 대한 실제 단락 형식 이름을 보여주는 드롭 다운으로 대체됩니다.

코드 예제

    new FroalaEditor('#wr_contents', {
      paragraphFormatSelection: true
    });

paragraphMultipleStyles

Type : Boolean
기본 :
true
Plugin : paragraph_format.min.js

이 옵션을 사용하면 링크 편집 팝업 내에서 링크 텍스트를 편집할 수 있습니다.

코드 예제

    new FroalaEditor('#wr_contents', {
      paragraphMultipleStyles: false
    });

paragraphStyles

Type : Object
기본 :
 {
   'fr-text-gray': 'Gray',
   'fr-text-bordered': 'Bordered',
   'fr-text-spaced': 'Spaced',
   'fr-text-uppercase': 'Uppercase'
 }
Plugin : paragraph_format.min.js

선택한 단락에 대한 사용자 정의 스타일을 설정합니다. 클래스는 CSS에서 정의해야합니다. 그렇지 않으면 단락 모양에 변경 사항이 표시되지 않습니다.

코드 예제

    new FroalaEditor('#wr_contents', {
      paragraphStyles: 
      {
        class1: 'Class 1',
        class2: 'Class 2',
        class3: 'Class 3'
      }
    });

lineHeights

Type : Object
기본 :
 {
   Default: '',
   Single: '1',
   '1.15': '1.15',
   '1.5': '1.5',
   Double: '2'
 }
Plugin : line_height.min.js

현재 선택한 단락의 줄 높이를 설정합니다.

코드 예제

    new FroalaEditor('#wr_contents', {
      lineHeights: {
        '1.15': '1.15',
        '1.5': '1.5',
        Double: '2' 
      }
    });

리스트[List]

listAdvancedTypes

Type : Boolean
기본 :
true
Plugin : lists.min.js

글 머리 기호에 대한 고급 유형을 나열 할 수 있습니다.

코드 예제

    new FroalaEditor('#wr_contents', {
      listAdvancedTypes: false
    });

wordAllowedStyleProps

Type : Array
기본 :
['font-family', 'font-size', 'background', 'color', 'width', 'text-align', 'vertical-align', 'background-color', 'padding', 'margin', 'height', 'margin-top', 'margin-left', 'margin-right', 'margin-bottom', 'text-decoration', 'font-weight', 'font-style', 'text-indent', 'border', 'border-.*']

Word에서 붙여 넣을 때 태그에 사용할 수있는 허용 된 CSS 속성 목록입니다.

코드 예제

    new FroalaEditor('#wr_contents', {
      wordAllowedStyleProps: ['font-size']
    });

wordDeniedAttrs

Type : Array
기본 :
[]

Word에서 리치 텍스트 편집기로 붙여넣을 때 제거되는 속성입니다.

코드 예제

    new FroalaEditor('#wr_contents', {
      wordDeniedAttrs: ['style']
    });

wordDeniedTags

Type : Array
기본 :
[]

Word에서 리치 텍스트 편집기로 붙여넣을 때 내용과 함께 제거된 태그입니다.

코드 예제

    new FroalaEditor('#wr_contents', {
      wordDeniedTags: ['a']
    });

wordPasteModal

Type : Boolean
기본 :
true

Word에서 붙여 넣은 스타일을 유지할지 여부를 선택하는 모달을 표시합니다. false로 설정하면 기본 동작은 서식을 유지하는 것입니다.

코드 예제

    new FroalaEditor('#wr_contents', {
      wordPasteModal: false
    });

wordPasteKeepFormatting

Type : Boolean
기본 :
true

wordPasteModal 옵션이 활성화 된 경우 기본 동작을 선택합니다.

코드 예제

    new FroalaEditor('#wr_contents', {
      wordPasteKeepFormatting: false
    });

멀티 업로드[Files Manager]]

filesManagerAllowedTypes

Type : Array
기본 :
['*']
Plugin : filesManager.min.js

업로드가 허용되는 파일 유형 목록입니다. 이로 인해 다른 유형의 파일 업로드가 제한되지만 서버에서도 파일 유형을 확인하는 것이 좋습니다.

코드 예제

      new FroalaEditor('#wr_contents', {
        filesManagerAllowedTypes: ['application/pdf', 'application/msword',
          ‘video/mp4’, ‘video/webm’, ‘image/png’]
      });

filesManagerMaxSize

Type : Number
기본 :
1024 * 1024 *10
Plugin : filesManager.min.js

업로드에 허용되는 최대 파일 크기 (바이트)입니다. 기본값은 10MB입니다. 이렇게하면 파일을 업로드하기 전에 추가 확인이 수행되지만 서버에서도 파일 크기를 확인하는 것이 좋습니다.

코드 예제

      new FroalaEditor('#wr_contents', {
        filesManagerMaxSize: 1024 * 1024 * 3
      });

attribution

Type : Boolean
기본 :
활성화[true]

에디터 하단에 'Powered By Froala' 메시지를 표시합니다.

코드 예제

new FroalaEditor('#wr_contents', {
  attribution: false
});

autofocus

Type : Boolean
기본 :
비활성화[false]

페이지가 로드될 때 편집기 인스턴스의 초점을 맞춥니다.

코드 예제

new FroalaEditor('#wr_contents', {
  autofocus: ture
});

direction

Type : String
기본 :
자동[auto]

텍스트의 방향을 설정한다. 가능한 값은 'auto', 'ltr', 'rtl'이다. 옵션이 자동으로 설정되면 편집기는 키보드 입력이 RTL인지 LTR인지를 자동으로 감지한다. 그러나 편집 상자 안의 텍스트만 방향을 변경하고 도구 모음은 그대로 유지된다. rtl 및 ltr 값은 도구 모음의 방향도 변경한다.

코드 예제

new FroalaEditor('#wr_contents', {
  direction: 'rtl'
});

disableRightClick

Type : Boolean
기본 :
비활성화[false]

기본 브라우저의 상황에 맞는 메뉴를 사용하지 않습니다. 'toolbarVisibleWithoutSelection' 옵션이 활성화된 경우 사용하는 것이 좋습니다.

코드 예제

new FroalaEditor('#wr_contents', {
  disableRightClick: ture
});

documentReady

Type : Boolean
기본 :
비활성화[false]

문서 편집을 위한 편집기 최적 설정을 켭니다.

코드 예제

new FroalaEditor('#wr_contents', {
  documentReady: ture
});

editInPopup

Type : Boolean
기본 :
비활성화[false]

팝업에서 편집기가 초기화된 HTML 요소 내의 텍스트를 편집합니다.

코드 예제

new FroalaEditor('#wr_contents', {
  editInPopup: ture
});

editorClass

Type : Boolean
기본 :
없음[null]

팝업에서 편집기가 초기화된 HTML 요소 내의 텍스트를 편집합니다.

코드 예제

new FroalaEditor('#wr_contents', {
  editorClass: 'custom-class'
});

enter

Type : String
기본값 :
FroalaEditor.ENTER_P

ENTER 키를 누를 때 사용할 기본 태그를 설정합니다. 가능한 값은 ProalaEditor.ENTER_P, ProalaEditor.ENTER_DIV 또는 ProalaEditor.ENTER_BR.

코드 예제

new FroalaEditor('#wr_contents', {
  enter: FroalaEditor.ENTER_BR
});

fullPage

Type : Boolean
기본값 :
비활성화[false]

HTML, HEAD, BODE 태그 및 DOCTYPE 선언을 사용할 수 있습니다. 참고: 이 옵션을 활성화하면 iframe 옵션이 자동으로 활성화됩니다.

코드 예제

new FroalaEditor('#wr_contents', {
  fullPage: true
});

height

Type : Number
기본값 :
없음[null]

텍스트 편집기의 컨텐츠 상자 높이를 설정합니다.

코드 예제

new FroalaEditor('#wr_contents', {
  height: 300
});

heightMax

Type : Number
기본값 :
없음[null]

텍스트 편집기의 편집 상자의 최대 높이를 설정합니다.

코드 예제

new FroalaEditor('#wr_contents', {
  heightMax: 500
});

heightMin

Type : Number
기본값 :
없음[null]

텍스트 편집기의 편집 상자의 최소 높이를 설정합니다.

코드 예제

new FroalaEditor('#wr_contents', {
  heightMin: 200
});

htmlAllowComments

Type : Boolean
기본값 :
ture

편집된 HTML 내에서 주석을 허용합니다.

코드 예제

new FroalaEditor('#wr_contents', {
  htmlAllowComments: false
});

htmlAllowedAttrs

Type : Array
기본값 :
['accept', 'accept-charset', 'accesskey', 'action', 'align', 'allowfullscreen', 'allowtransparency', 'alt', 'aria-.*', 'async', 'autocomplete', 'autofocus', 'autoplay', 'autosave', 'background', 'bgcolor', 'border', 'charset', 'cellpadding', 'cellspacing', 'checked', 'cite', 'class', 'color', 'cols', 'colspan', 'content', 'contenteditable', 'contextmenu', 'controls', 'coords', 'data', 'data-.*', 'datetime', 'default', 'defer', 'dir', 'dirname', 'disabled', 'download', 'draggable', 'dropzone', 'enctype', 'for', 'form', 'formaction', 'frameborder', 'headers', 'height', 'hidden', 'high', 'href', 'hreflang', 'http-equiv', 'icon', 'id', 'ismap', 'itemprop', 'keytype', 'kind', 'label', 'lang', 'language', 'list', 'loop', 'low', 'max', 'maxlength', 'media', 'method', 'min', 'mozallowfullscreen', 'multiple', 'muted', 'name', 'novalidate', 'open', 'optimum', 'pattern', 'ping', 'placeholder', 'playsinline', 'poster', 'preload', 'pubdate', 'radiogroup', 'readonly', 'rel', 'required', 'reversed', 'rows', 'rowspan', 'sandbox', 'scope', 'scoped', 'scrolling', 'seamless', 'selected', 'shape', 'size', 'sizes', 'span', 'src', 'srcdoc', 'srclang', 'srcset', 'start', 'step', 'summary', 'spellcheck', 'style', 'tabindex', 'target', 'title', 'type', 'translate', 'usemap', 'value', 'valign', 'webkitallowfullscreen', 'width', 'wrap']

태그에 사용할 수 있는 속성 목록입니다.

코드 예제

new FroalaEditor('#wr_contents', {
  htmlAllowComments: 'title','href','alt','src','style'
});

htmlAllowedEmptyTags

Type : Array
기본값 :
['textarea', 'a', 'iframe', 'object', 'video', 'style', 'script', '.fa', '.fr-emoticon', '.fr-inner', 'path', 'line', 'hr']

내부에 내용이 없을 때 제거되지 않는 태그 목록입니다.

코드 예제

new FroalaEditor('#wr_contents', {
  htmlAllowedEmptyTags: ['table','strong']
});

htmlAllowedStyleProps

Type : Array
기본값 :
[]

태그에 사용할 수 있는 CSS 특성 목록입니다.

코드 예제

new FroalaEditor('#wr_contents', {
  htmlAllowedStyleProps: ['font-family','font-size','background','color','width','text-align','vertical-align','background-color']
});

htmlAllowedTags

Type : Array
기본값 :
['a', 'abbr', 'address', 'area', 'article', 'aside', 'audio', 'b', 'base', 'bdi', 'bdo', 'blockquote', 'br', 'button', 'canvas', 'caption', 'cite', 'code', 'col', 'colgroup', 'datalist', 'dd', 'del', 'details', 'dfn', 'dialog', 'div', 'dl', 'dt', 'em', 'embed', 'fieldset', 'figcaption', 'figure', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'header', 'hgroup', 'hr', 'i', 'iframe', 'img', 'input', 'ins', 'kbd', 'keygen', 'label', 'legend', 'li', 'link', 'main', 'map', 'mark', 'menu', 'menuitem', 'meter', 'nav', 'noscript', 'object', 'ol', 'optgroup', 'option', 'output', 'p', 'param', 'pre', 'progress', 'queue', 'rp', 'rt', 'ruby', 's', 'samp', 'script', 'style', 'section', 'select', 'small', 'source', 'span', 'strike', 'strong', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'textarea', 'tfoot', 'th', 'thead', 'time', 'title', 'tr', 'track', 'u', 'ul', 'var', 'video', 'wbr']

허용된 태그 목록입니다.

코드 예제

new FroalaEditor('#wr_contents', {
  htmlAllowedTags: ['p','h1','h2','h3','h4','h5','h6']
});

htmlDoNotWrapTags

Type : Array
기본값 :
['script', 'style']

블록 태그 내부에 감싸지 않아야 하는 태그 목록입니다.

코드 예제

new FroalaEditor('#wr_contents', {
  htmlDoNotWrapTags: ['script','style','img']
});

공지글


  • 글이 없습니다.

동영상


최근글


  • 글이 없습니다.

새댓글


  • 댓글이 없습니다.